2013_02_wordpress_featured Design

10 Important Details To Consider When Developing WordPress Themes

So you’ve created your first WordPress theme for a client and can’t wait to put it live to show off your work. Everything looks perfect and the functionality is flawless – what could go wrong?

Unfortunately, probably quite a few things. Here are the top 10 most commonly forgotten tasks when creating a WordPress theme.

1. 404 page

A 404 page is one of the most commonly overlooked things when it comes to creating a theme. After all, when you’re developing a theme you rarely try and visit pages that don’t exist. However you can rest assured that your users will. A well-designed 404 page should inform the user that the page they are looking for doesn’t exist and provide either a sitemap or a search box to help them find what they’re looking for. For inspiration, check out this article on 404 error pages with a positive impact.

To add a 404 page to your theme simply create a file called 404.php in your theme directory and populate it with whatever you see fit.

2. Search results page

A search results page is another example of a page you generally won’t come across when you’re developing a theme. It’s unlikely you would ever search for anything since you know where everything is.

Obviously the search results page should include the pages and posts including the search term with relevant links. However, it is also nice to add a few little extras such as the number of results matched and the search terms displayed in bold. To find out how to do this check out these 3 codes for a better wordpress search page.

To add a search results page to your theme create a file called search.php in your theme directory.

3. Styling user comments

The theme you’re developing generally doesn’t receive any visitors (apart from yourself) so it would be unusual for any of your posts to have comments. If you’re going to choose to allow comments on your site it is important to make sure they display correctly.

Make sure the author and their avatar are visible and a common technique is to nest replies to comments by indenting them recursively.


If you allow comments on your site, make sure they display correctly.

Alternatively, if you can’t be bothered doing any of this, I recommend installing the ]Disqus plugin](http://wordpress.org/extend/plugins/disqus-comment-system/) which replaces the default WordPress commenting system and takes care of all the styling for you.

4. Blog pagination

When designing a theme it is common to populate the blog page with only a few posts just to make sure everything is working as it should. When the site goes live though, eventually you will have more than just a few posts. How is your theme going to cope?

You can set the number of posts to be displayed in the ‘posts_per_page’ argument in your WP_Query object or similar function (get_posts(), query_posts() etc). To display all posts use ‘-1’. To enable pagination paste the following code before your query:

and then include the following

'paged'=>$paged

in the arguments for your query e.g.

query_posts(
array(
'paged'=>$paged,
'posts_per_page' => '10'
)
);

?>

5. Screenshot

When selecting a theme from the WordPress Dashboard the user is given certain details about the available themes – one of these is a screenshot. Make sure your theme includes an attractive relevant screenshot, either with a visual reminder of the theme, or perhaps your company logo.


Make sure to add an attractive, relevant screenshot to your theme for the WordPress Dashboard.

To add a screenshot to your theme place an image with dimensions 300px x 225px called screenshot.png in your theme directory.

6. Blockquotes

Blockquotes are available to add in the WordPress visual editor and commonly used by clients so make sure you have applied some default styling so they fit in with your theme.

7. Favicon

A favicon is the small icon which browsers display in the URL bar when visiting your site. By default this displays as the WordPress logo so it is important to change this to something more relevant to your theme.

This is done by generating a favicon.ico file at any number of sites such as favicon.co.uk and uploading it to both the root WordPress directory and your theme directory.

8. Multi-level menu

So you’ve tested your theme pages and have tried adding them to the site navigation and everything is fine. But have you considered what happens if your client adds sub-menus? If not then your site’s navigation could end up looking a mess.

Some simple CSS will fix this.

WordPress assigns a class of .sub-menu to any child menus. To hide these by default so they don’t clutter the menu simply add

#yourNavIdentifier ul.sub-menu {
display:none;
}

to your theme’s CSS file.

Next, to display the menus on hover add

#yourNavIdentifier li:hover ul.sub-menu {
display:block;
}

You will also want to add some further styling for the positioning of the menus. Generally I add

#yourNavIdentifier li {
position:relative;
}

and

#yourNavIdentifier ul.sub-menu {
position:absolute;
}

and then toy around with the top and left values until it displays as I would like.

Note that this CSS only works for two-level menus so would need to be extended for extra levels.


Make sure you considered sub-menus in your site navigation.

9. Image alignment classes

If you have written your theme’s stylesheet from scratch it is likely you have forgotten to include certain default WordPress classes. The most important of these are the image alignment classes which are applied to images when the user decides to align them left, right or center. Examples of these classes are as follows but feel free to modify them:

img.alignleft {
float: left;
margin: 10px 20px 10px 0;
}

img.alignright {
float: right;
margin: 10px 0 10px 20px;
}

img.aligncenter {
display: block;
margin: 10px auto
}

10. Social Links

It is extremely rare today to find a site without some kind of social media links on it. When including them in your theme design it is all too easy to give them an href of “#” and simply forget about them. Make sure to update these to actually link to your client’s social media pages because, even if you haven’t noticed the links are broken, I guarantee they will!

Source featured image

One comment

  1. Nicky Helmkamp

    Alex- Fantastic article! We loved it so much we included it in our Monthly Resource Roundup http://blog.nexcess.net/2014/01/03/the-yearly-round-up-2013s-best-expressionengine-wordpress-and-magento-content/

Leave a Reply

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