Producing themes for WordPress

When it comes to developing a website, you have to take into account the client’s needs. Most clients will need to regularly update their website so a static HTML site may not be ideal for them. This is where a content management system (CMS) may come in handy.

There are a number of CMS’s out there to suit everyone’s needs – whether they are a casual blogger or a multinational company. These include WordPress, Joomla, Drupal, CMS Made Simple and Concrete5 to name just a few.

When looking at creating a website that is easy for a client to manage and maintain, WordPress is one of the more customisable solutions. The WordPress community is growing ever larger and the amount of plugins and themes available increases on a daily basis.

There are many free and paid themes out there if you search, but making your site really stand out is key to your success online.

How do we go about building a theme for WordPress?

It all starts with the design & customer engagement.

Building any website comes from the initial design work. Being able to visualise how the page will look overall and how it reacts with rollover states, onclick events and how the site responds responsively helps the developer understand how to build the site.

Static HTML

How I start to create a theme is by building a static version of the site first. Doing this makes sure that the site works as expected and responds to any responsive designs correctly, others may prefer to jump straight into WordPress and build it, but I find that building the site as static first you can make sure that all the tags are closed and that the code meets all the relevant standards. Cross-browser testing is also made easier as you know that nothing is being added to the page from WordPress (or plugins) so debugging is easier.

Moving to WordPress

Once we have all the pages built, we can then move the static HTML over to WordPress. The basic files needed in a theme are:

  • header.php – all the <head> information, often the logo and menu area of the page are contained in this file too
  • index.php – this structures the site by calling the additional template files such as the header, footer and sidebar as well as the content
  • sidebar.php – any sidebar area that you wish to have. Many have additional navigation in or widget areas to place content/images/etc
  • footer.php – the footer of the site and the closing of the </body> and </html> tags this file too often has widget areas in
  • single.php – the template used to display single posts on the site
  • page.php – the template that is used for single pages on the site
  • functions.php – the functions file is for any functions, and any functions that extend or hook into WordPress core functionality.

Each of these files should be included in a basic theme however, at the very minimum, WordPress states that you only need an index.php and styles.css.

There are some more examples of the file structure from Yoast and WordPress

Slicing up the HTML into these files is easy enough to do if you have the static pages and as you move the code over to the WordPress theme, you need to be sure to include the additional WordPress code following the WordPress Coding Standards. Adding each section a piece at a time you can see if there are any errors that affect the import to WordPress.

This includes the loop that finds any content that has been added to the admin system. The loop looks like this:

Although many times you may see it in the theme like this:

This is an IF statement that checks if there are any posts available to display on the page. It does this by using the ‘have_posts()’ function. This is a function call to an internal WordPress function that uses a query to check if there are any posts that match the criteria within the IF statement and then displays them accordingly.

Within the IF statement, you can choose to show posts that belong to a specific category, author, tag and more. An example of a loop within WordPress would be:

In the example, you can see that the loop is started and then HTML divs are used to style the post correctly. Within the H2 tag we call the post/page title using the function the_title(); and link this to the correct page on the site using the hyperlink call of the_permalink();. We also collect the content using the_content(); as well as the categories and tags related to each post/page using the_category(); and get_the_tags(); respectively. We include an error message to display if there are no posts to show within the specified criteria.

Outside of the loop we can call the header, footer and sidebar (if needed) by using the functions:

  • get_header();
  • get_footer();
  • get_sidebar();

Now that we have the loop defined in the theme, our index.php should look like:

At this point you should have your published posts on a page. If this is the index page then the number of posts shown is controlled in the admin system under the ‘Reading’ section of the ‘Settings’ tab. Within these settings you can also decide if you would like a summary of the post showing or the whole post. If you wish to have a static front page then you can also choose the page to show in the settings too. This is good for business clients who don’t want their posts showing on the homepage of their website.

As well as having the index.php and page.php you can also create custom templates for your theme. If you create an ‘About’ page and create a template called ‘page-about.php’ WordPress will associate the two together and unless you choose a different template to use will show the ‘page-about.php’ template for the page. You can also add custom templates that may not display the sidebar or display different options on the page.

These can be made available in WordPress using a comment at the start of the template file like this:

After identifying the template, the page can be created the same as any other.

Summary

Once you have gotten this far, then extending your WordPress knowledge using the Codex is one of the next steps. A lot of themes have custom menus, widgets, use custom pages or posts and so much more that can be added into your theme using code from within the Codex.

There are many functions that are built into WordPress that you will be able to make use of to create some stunning sites.

And once you have one theme you will want to build more and become even more creative with the way that the theme works. You might even want to try your hand at a WordPress plugin…

Get in touch if you’ve got any questions on producing WordPress themes.

By at 1:49PM on Thursday, 26 Jun 2014

With a passion for development and all things digital, Phil is a member of our development team. Outside of work, Phil enjoys playing football and writes for his own blog dedicated to another of his passions, MotoGP. Follow Phil Broadhead on Twitter.

comments

Leave a Reply