A Beginner’s Guide to WordPress Theme Development: Day 5

We’ve arrived! Today is the final day of the [bg] series on [wp]!
  • Day 1: Introduction, the fundamentals of WordPress theme development
  • Day 2: The index.php and style.css files: the most important parts of any theme.
  • Day 3: The header.php, sidebar.php and footer.php files.
  • Day 4: The single.php file: the file that handles posts.
  • Day 5: The archive.php, home.php and functions.php files and a wrap up of all that has gone on. You will also be able to download the whole series as an eBook.

download-5

We’re nearly there. This is the final day of ‘A Beginner’s Guide to WordPress Theme Development’. We’ve got three files to tackle today, but there isn’t too much I’m going to say on each of them. Let’s start with the archive.php file. Download the latest copy of our theme, Champion, unzip it and load up the archive.php file in your text editor.

Creating an awesome archive page in WordPress

day5

According to the WordPress file hierarchy (which we discussed on day two), all archives – date, category, author and tag each have their own template file, but they also all fall back on a single file – the archive.php file. The idea here is that if you’re clever, you can save yourself creating a couple of additional files. Upon opening the file, you’ll be greeted with the familiar get_header and the loop. Then, on line 14 starts a whole load of PHP if statements – if this is a category archive, display this, if this is a tag archive, display this etc etc. After that, on line 37 the loop swings into action and we have the familiar template tags we learnt on day two. Finally, on line 56 the standard “no posts were found” gets replaced with another if statement, changing it to “no posts were found under this category/tag etc etc”. After that, the familiar get_sidebar and get_footer and the archive page ends. It’s pretty similar to the index.php page, all that is happening is that there are a couple of if statements to change the titles according to the archive.

Creating an (equally awesome) homepage

Something you might have noticed is that so far we haven’t created a specific homepage. Whilst there is a homepage, that’s just the contents of the index.php file. At this point, it’d be appropriate to introduce a new template file: the home.php file. It’s highest in the hierarchy for the homepage, so WordPress first looks for the home.php file and if that doesn’t exist then it uses the index.php, which is why so far we’ve so far been creating a homepage with just the index.php.

Why can’t i just use the index.php file?

Good question. You can’t because the index file is at the bottom of all template hierarchies – if you don’t have a specific template file for a certain type of page then WordPress displays the page using the index.php file. For that reason it is best to leave the index file as it is and create an additional page, home.php for generating a homepage. It’s also one of those useful little tricks that are good to know as it allows you to stop using WordPress as a blogging platform and start using it as a CMS.

Developing the homepage

In our example, we’re not going to do anything with our home.php file, other than make it and copy and paste the contents of the index.php file into it, but as someone who is getting started with WordPress theme development, it is something that you should know exists and you’ve always got the option of customising the homepage further yourself.

The functions.php file

This is probably the most powerful template file there is. Effectively, it lets you run plugins from within your theme. It’s not a page that gets displayed, it’s a file that lets you run functions that you can display in other files. Common uses include:

  • Widgets! Whilst you put where you want widgets to display in the theme files, but they’re powered from the functions.php file.
  • Theme options. Theme options pages are too created from the functions.php file. WPShout has a whole tutorial written on the topic here.
  • Language – the functions.php file lets you set up the option for multi-lingual theming.

As the functions file is just so complex, I’ll just cover some basics. The code below will create a widget area ‘Widget area 1’ with an opening div before (which closes after) and the widget title gets an H3 tag:

<?php if ( function_exists('register_sidebar') )

register_sidebar(array(

'name' => ' Widget area 1',

'before_widget' => '<div class="widget">',

'after_widget' => '</div>',

'before_title' => '<h3>',

'after_title' => '</h3>',

)); ?>

To insert the widget in your sidebar you’ll need to add the following to your sidebar.php file (or wherever you want to widgetise):

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Widget area 1') ) : ?>

<p>This area is widgetised! To make use of this area, put some widgets in the 'Widget area 1' section.</p>

<?php endif; ?>

This is just the start though; take a read of this to find out how to build your own theme options page in WordPress.

Concluding the series

We’re done! We have now covered all of the files that any awesome WordPress theme needs! If you enjoyed this series then please consider a donation – it would be wonderful if you could spare a few Pounds/Dollars/Euros/[Your currency here]; these tutorials don’t write themselves!

I hope this series has given you a good start with developing [themes], and make sure you [s] to hone your skills further. As I hope I’ve proved this week, it needn’t be hard to become aware of what all the bits of code on your theme do, and you never know, perhaps in a year or two I could be reading your blog about advanced uses of WordPress!

As I mentioned earlier, a free eBook will be available on Monday with the whole week’s posts, which you can download, keep, print, whatever. It’ll be there when you want to give it another read. So there we are. I hope you’ve enjoyed the series and are on your way to becoming an awesome theme developer! As always, if you’ve got a question, thought or anything you want to share then leave a comment.