Designing Your WordPress Themes Guides

As open source code, WordPress engineers jump at the chance to keep things free with regards to what a client does with WordPress. In any case, with regards to planning your styles or Themes for challenges and open utilization, there are a couple of things you should contemplate. These are not rigid standards, they are more rules, on the most proficient method to make your Theme as well as can be expected be before presenting it to general society.

Being able to rapidly change a site’s look is extremely energizing, and having your Theme or style be one of their decisions is significantly all the more energizing. To keep the greater part of this fervor going, we have to ensure that in the engine, there are a few textures and things you should know before discharging your diligent work and superb plan to people in general.

Get Familiar With the Process

In the WordPress Codex, the primary documentation for utilizing WordPress, you will discover huge amounts of data that will answer your inquiries concerning Themes, making Themes, styling CSS, Template Tags, and the sky is the limit from there. Before you start the procedure, we prescribe you get comfortable with the elements of WordPress. The most extensive rundown of articles about these subjects is in the Templates article.

Make a Plan

As you consider your plan potential outcomes, look at CSS Zen Garden for motivation. The volunteer planners took one HTML page and made several different site page outlines from it. The HTML doesn’t change, just the template changes. The plans are fantastically shifted and one of a kind. This shows you the energy of outlining with CSS, as well as the energy of the creative energy to make and control the most least complex of data into gems. It starts with an arrangement.

As per NuclearMoose, one of the well known WordPress defenders, begin to make your arrangement with some essential apparatuses that don’t include the PC

Start With The Default or Classic WordPress Theme

You can start with someone else’s theme or style sheet, that’s fine, but if you really want to do this right, start with one of the two default themes that come with WordPress. They are called “Classic” and “Default” aka Kubrick.

Why start here? Because these have been through the presses by WordPress designers and testers, as well as bazillions of users who are more rigorous on these things than the developers. These are solid code, for the most part, and a good starting point. From there, do whatever your imagination desires.

  • Site Architecture 1.5
  • Kubrick
  • Boren’s Anatomy of a WordPress Theme
  • WordPress Templates
  • Template Tags

Keep The Core References

Do not remove “default” WordPress CSS references!

Alright, subsequent to making it clear that architects are allowed to do whatever they need as long as it approves, and that these are just rules and not rules, we let it be known, we lied a bit.

Easy to understand is the way to planning WordPress Themes. Some portion of that benevolence is to keep the default components of code inside the Templates and CSS records and outline these to change their look, yet not to evacuate the code references. You can shroud them, however don’t evacuate them.

For instance, in the WordPress default Theme, the Theme’s creator settled on a few choices about expelling the creator tag from the post (it’s your blog so why might you need to continue telling individuals you composed it) and the schedule. On the off chance that you take a gander at the code for the schedule, it is still there, quite recently remarked out, so if the following client needs to include a timetable, they can. The styles for the date-book are still in the template so it won’t look terrible if empowered.

Because you like some detail or not, leave the center coding in to suit the different needs of the clients.

To guarantee smooth change for dialect limitation, utilize the _e() work for reverberating titles and headings inside the format records. This makes it less demanding for the interpretation records to snare in and make an interpretation of the titles into the site’s dialect.

As you alter the styles, in the event that you tread into the format records, ensure that <div id=”header”> remains as such. Try not to transform it to <div id=”fred”> in light of the fact that you think “post” is exhausting and you generally named your header area fred. In the event that you are including a fourth segment, or another division or class identifier, you can name it anything you need, however make a note in the template and format record that these are augmentations to the default.

While adding references to new components in the template, it’s prescribed to detach them from the default references so they are featured or make a note of them in the event that they are gathered with related components like the structure, helping individuals distinguish them all the more rapidly. This likewise features the uniqueness of your outline by flaunting your style codes.

Once more, these are things fashioners for challenges and open utilization need to stress over. Every other person tweaking their locales for their own utilization can do anything they need – and will!

Reconsider Plugins

WordPress Plugins add great extensions and capabilities to a WordPress site. Some plugins require the user to edit their theme and add a line of code that calls their plugin. If a plugin is included with a Theme, users still want the right to use or not use them. Themes should be plugin-independent and not rely on a plugin to be installed in order to function. Unfortunately, many questions come into the WordPress Forums about plugins associated with Themes. People want to know how to turn them on, or off, and “What is this code in my Theme?”.

If you choose to include plugin support in your theme, here are some tips:

  • Ensure that the plugin has been fully tested and will work under a variety of conditions.
  • Include the plugin or a link to the plugin.
  • Include specific instructions for installing and uninstalling the plugin to the Theme.
  • Include coding around any tags within the template that will allow the Theme to work even when the plugin is turned off (see below).
  • Be prepared to support questions about the plugin as well as your Theme.
  • Maintain an updated link and information in your Theme and site to the plugin, if that information changes.

Some plugins feature tags inside of the template files. If the plugin is not activated, it will “break” the Theme and it may report errors or fail to load. It is therefore imperative to prevent the plugin from being detected in case it is turned off.

To detect if a plugin is installed, you can use a simple function_exists() check. The if (function_exists()) checks for the plugin, and if it exists, it will use it. If it returns FALSE or “not found”, it will ignore the plugin tag and continue loading the page.

if (function_exists('FUNCTION NAME')) {

This example plugin uses a function called jal_get_shoutbox() to print out its contents.

if (function_exists('jal_get_shoutbox')) {

Style ALL the Template Files

Before WordPress v1.5, it was all about the index.php file, forcing it to do all the work for every element of your page. Today’s WordPress uses modular elements to make up an entire page.

The Default Theme for WordPress relies upon the index.php, sidebar.php, single.php (for a single post which looks different from the categories and archives), comments.php, header.php, and footer.php, among others. If you create a theme or style based on only the index.php, leaving out the comments, header, footer, or others, you may run into design problems.

If WordPress can’t “find” the modular part, such as the comment template, it will look for it in the default folder. Therefore, if the designer hasn’t taken this modular template into consideration, the layout and design might be a little messed up. It will work, but it could look weird. You don’t have to use all the various bits and pieces, keeping the header and sidebar inside of the index.php or single.php, but do look at the parts as well as the whole.

  • WordPress Template Hierarchy
  • WordPress Conditional Tags
  • The WordPress Loop
  • WordPress Templates
  • Theme Development

Stylesheet Structure

There is a considerable measure of open deliberation about how to format the structure of a template. The way to the format is the means by which to make it less demanding for clients (and creators) to discover the data they need and need, for data and to make alterations. Some say that a sequential request of the selectors (names of the style identifiers) makes it simple so that on the off chance that you are searching for #post you simply look towards the base of the page.

However, in the event that you are outlining a Theme, distinctive components, similar to joins, may have an alternate look between segments. So would you normally search for the #post a:link in post or under a:link? In the event that you didn’t have any acquaintance with it was in the post segment, you would look in the last territory.

A few people want to amass their related selector components together, for example, structure, joins, records, headings, et cetera. This bodes well and is useful to the client. On the off chance that they are tweaking the structure, for instance, any change to the header stature will affect the substance and sidebar. Rather than skipping all over the page from center to through and through, the greater part of the components would be near each other, ideally distinguished as/* Structure */in the template. In the event that the client needed to change the look of the majority of the connections to make them more energetic, at that point every one of the connections would be as one of every one place.

There are no firm guidelines about this. Consider what works best for you and after that what may work best for the end client. Keep your introduction predictable. Make an arrangement on how you need to do this from the get-go in your outlining so you won’t invest so much energy revising things later.


Consider the Details

There are a lot of details that have to be taken into consideration when designing your WordPress Theme for public release. Here are a few to consider.

Consistent and Standard Fonts

As you work your Theme, fonts play a critical part in the design. Many inexperienced web page designers present themes and styles with only one font. Not just an overall font style for the whole page but ONE font. In the body style tag it may say:

body {margin: 0; font-family: "Trebuchet MS", 
sans-serif; font-size: 1em;...}

What happens if the user doesn’t have Trebuchet on their computer? It happens every day. If that font isn’t on the user’s computer, the system default shows up which is often Arial or some similar sans-serif font. If you like the look, great, because just about everyone has it, but if you want Trebuchet and you really want your fonts to have a specific look, then you have a problem.

To increase the chances of a font similar to the one you really want showing up on the page when it displays, add more choices to the font-family like this:

font-family: "Trebuchet MS", Verdana, Futura, Arial, Helvetica, sans-serif;

If the browser can’t find Trebuchet, it looks for Verdana, and if can’t find that, it looks for Futura (Mac systems), and so on. That should cover all your bases.

Also remember that while there are some fonts which are common on Windows systems, there are other computer systems out there like Linux and Mac. Consider using fonts that will also work on their machines, too.

As you choose your fonts and design your Theme, make sure you choose fonts that are readable and easy -to-read, keeping font-sizes large to avoid eye-strain yet sized to fit within your design.

Comment Comment Comment

Have you looked in the engine of a dashing auto of late? The fancy odds and ends inside are a bad dream to make sense of. Keep in mind the first occasion when you took a gander at PHP, CSS, or HTML code? Wager that gave you a couple of snapshots of madness. When you are discharging your Themes and styles to general society, recollect the client may take a look in the engine and run shouting from the room, as well.

Remarks are a piece of code that enables the originator and the client to make sense of what will be what. Remarks enable clients to recognize DIVs that cross formats, when a layout starts and closes, and any progressions that show you, the fashioner, has altered something that makes it not quite the same as the first code.

Help your clients by remarking however much as could reasonably be expected to encourages them locate the diverse areas and utilize your Theme easily.

Lean and Mean CSS Style Sheet

WordPress stresses that code and style documents ought to approve and be laid out with a great deal of tabs so they are anything but difficult to peruse. The World Wide Web Consortium and the Web Standards Organization focuses on that all website page code be consistent with their guidelines. In the event that you will get into this, you ought to acclimate yourself with the most essential of these gauges.

One of those benchmarks is to display a clean and streamlined template and HTML code. While WordPress challenges have a tendency to be tolerant regarding this matter, other website page configuration challenges don’t. Their aphorism has a tendency to be “a perfect and tight code is a gem, as well”.

Fundamentally, it implies doing some housekeeping on your code before you discharge it. Yes, you should approve it and test it crosswise over programs, yet we should begin with some straightforward cleaning.

Each space, character, and bit in your code and templates indicate bytes. That sentence came to around 64 bytes. Every byte of data includes and the bigger they are, the more they take to stack. You do yourself and your clients some help by holding your grind sizes down to byte estimated sizes. So where do all these data transfer capacity wasters stow away?

In the event that you have set your code to look lovely with loads of indents, have you verified whether there are any TAB codes toward the finish of the line before the line break? I discover a ton of these. You needn’t bother with a TAB before a line break, simply after, yet some way or another, these sneak into the code.

Utilizing spaces to arrange code adds to the size. A TAB is viewed as one character in many editors, however the five spaces that duplicate the TAB indent takes up five characters. Utilizing twofold spaces rather than single spaces in your code and styles includes, as well.

Utilizing a decent hunt and supplant proficient word processor, you can rapidly tidy these up, making your styles and code enhanced for quick stacking.

Consolidate and Use Shorthand

It’s a smart thought to utilize shorthand for your CSS. While it isn’t a required standard, it is a piece of code streamlining. Utilize this strategy with alert as a few programs can’t deal with it, regularly “more seasoned” programs. On the off chance that you are new to CSS shorthand, we’ve assembled a short instructional exercise for you.

Approve! Approve! Approve!

Ensure your codes and styles approve no matter how you look at it. That implies they need to meet the “strict” norms set by the W3C Organization and pass an assortment of approvals for CSS and HTML. Not all validators check for similar things. Some exclusive check CSS, others HTML, and others for availability. On the off chance that you are genuine in displaying strong code to the general population, test your code with a few validators.

Approval doesn’t simply mean putting your pages through some web driven analyzers. It additionally implies test-driving it with companions, relatives, associates, and outsiders you meet in the city. Everybody has a little unique framework, so request others to test-drive your styles or topics before you make them open. The Your WordPress area in the WordPress Forums is committed to looking at your site by WordPress volunteers while you are chipping away at it, when you experience difficulty, or just to state ooooh and ahhhhhhh.

On the off chance that you are new to how to approve your website pages and templates, we’ve assembled a rundown of assets and data to help you.

CSS and HTML Bugs

WordPress Themes and styles are differing cases of the splendid and inventive WordPress clients out there. What every one of them have in like manner as they hold the outline idea in their mind and work extend periods of time to change over it into code that matches their creative energy is…..browser bugs.

You labor for three days to make it lovely in Microsoft Internet Explorer, investigate a similar webpage in Firefox and it appears to be unique. Truth be told, things don’t arrange right. Or, then again you composed it to work in Opera, however when you see it in Internet Explorer, the sidebar is currently half off the screen.

Before you haul out your hair, recollect that others have endured before you and you are not the only one. Look at these assets for help on illuminating the numerous CSS, HTML, and program bugs that are out there.

  • WordPress CSS Information and Techniques
  • CSS: Fixing Browser Bugs
  • CSS: Troubleshooting

What Else…?

These are a few of the most common things to take into consideration when presenting your themes or styles to the public, but it is only the tip of the iceberg. Remember, if there is a problem with your theme, users should begin their search for help on your website, but they often turn to the WordPress Forums. The more consistent with the default codes and style references, the faster users can get the help they need if there is a problem. We know that you read through this article and followed all of these recommendations to the letter, users will come to the WordPress Forums to brag and show off instead.

The better designed your Theme is, the more web standard and cross-browser compliant, the more successful your Theme may be. As we said, there are no hard and fast rules for design, only guidelines for the code under the hood. The sky is the limit.

Promoting Your Theme

Once your WordPress Theme has been validated and tested thoroughly, then it is ready for release.

Put all your Theme files, including a readme text file with information and description, in a zip file for easy downloading. If possible, provide two or more file compression types like RAR, ZIP, GZIP, etc. to maximize user choices. Be sure and include information on any custom tweaks, tips, plugins, or things the user must know in a readme file.

Post a link to a page on your site with the following:

  • Demo or Screenshot of various page views
  • Description
  • Downloadable zip file

Go to the Using Themes/Theme List and find the appropriate category for your Theme. Post a link to the Theme information and downloadable file, and add the name and keyword description of the Theme, per other examples. The more keyword descriptions you use, the easier it is for people to search through the list to find your Theme.

Post a note about your new Theme on the WordPress Forum under Themes and Templates describing the Theme. The more descriptive keywords you use, the more likely people’s search for Themes will turn up your request. Include links to your Theme and the downloadable zip file.

It is preferable that you provide support for your Theme on your site with a link in the Theme and readme file for the support page, to help users. Also check the Forum frequently to see if people are having problems with your Theme and address their issues as much as possible and update your Theme if necessary. If you update, please add a note of the update with the version number in the Forum and on the Theme List in the Codex

0 Replies to “Designing Your WordPress Themes Guides”

Leave a Reply

Your email address will not be published. Required fields are marked *