Following on from the previous article on How to Create a WordPress Theme from Scratch, we are now going to add that some missing topics like sidebar, comments system and lastly an archive page. This should get you well introduced into WordPress theming, however you could always improve so I’ll also give you a bit of recommended reading.
Step 1 – The Sidebar
Always best to tackle the hard parts first right? Well lets get started then. Create a new file in your theme’s directory called
functions.php and open it up for editing. Paste in the following:
This code can be expanded on to include themes with several widget ready areas. We also state that our theme’s sidebar needs different HTML from what WordPress normally outputs. What this does is stop the sidebar widgets getting wrapped in
<li> tags, which wouldn’t look so good for us.
Now, lets design that sidebar, create yet another file, called
sidebar.php and paste in the following.
What this does is simply tell WordPress where the sidebar is meant to be. There’s a little default text in there in case you don’t have any widgets on the sidebar.
Finally we need to include the sidebar file in
index.php, so open that up and add the following just before the
<div id="content"> tag, make sure the header include tag is still at the top of the file though.
Congrats, you’ve just added a dynamic sidebar to the theme.
Step 2 – Comments
The WordPress comment system can be as easy or as complicated as you wish, however because this is a simple tutorial that is building a simple theme, we’re going to use the simple method of adding comments to our posts.
WordPress makes it easy by having a standard commenting system design that comes with every copy of WordPress, and it can be used by any theme. So that’s what we’ll do. Open up
index.php and put the following after line 13 (I’m talking about right after the line with all the post details like
As you can see, this includes a file that we do not have in our theme folder, but actually from somewhere within the confusing depths of WordPress. Joking aside, this makes our life a whole lot easier.
Test out your theme now, you’ll notice that it’s smart enough to not show the form and all the comments on the homepage, but when you click on a post it all renders as you want. Well… except for the fact that the textarea is way to big. To fix this we do not want to go and edit the core of WordPress but simply add a line of CSS, and make it somewhat easier to read in the process. So add the following to the bottom of
The first line will limit the textarea’s with to a sensible size and also add a bit of padding to make it that bit easier to read. You now have a simple but ever so functional commenting system in your theme.
The meta data was also a bit small, so thats what the second line covers.
Step 3 – The Archive
Most WordPress sites have an ‘archive’, the place to look for old posts. The commonly display two lists, one with links to all the posts in the sites categories, and one with all the posts by month. This keeps the archive quick to browse through and makes it a better user experience.
archives.php is seen by WordPress as one of their standard files, you do not need to add any special header to get it seen. However if you wish to make another page template that is not standard, take a read here.
So create the new file and put in the following, and all will be explained.
This may look fairly similar to
index.php however you may notice that there is no WordPress loop. This is because we’re creating a page, with only one item in it. We can still use functions such as
the_title() to get and display information about the page.
There is also the
the_content() function, so that if you did put a little text on this page it would still display. Now the next stuff is fairly simple, its a standard list (well two actually…) with two functions in it,
wp_get_archives(). Both functions output a standard list, the first list all the sites categories and gives each a link which go to display all posts in that category. The second does just the same except it displays months not categories.
The parameters in the functions make them display the category/month with a post count for added dynamic site factor, hehe. To add this cool archive page to your site you need to create a new page and change the “Page Template” option to the new “Archives Page” one. Check it out, a cool archive page for everyone to see how much you have written.