It’s time for the good stuff now. We’ll be adding the comments system, a sidebar with widgets and an archive for all the old posts. This will cover all that you need for a simple but well functioning WordPress theme, and hopefully you be able to apply this to all sorts of theming projects.
Overview Of The Extras
Following on from the previous article on How to Create a WordPress Theme from Scratch, we are now going to add that oh so missing sidebar, the 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.
I hope to show you how to setup a widget ready sidebar, which should also give you an idea of how to add widgets to other areas of a template. The comments system is fairly simple, but we always like our site to look good so there will be a bit of styling involved. Lastly the archive, this is one of WordPress’s standard template files, however custom pages are very similar, killing two birds with one stone…
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:
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>
What this does is tell WordPress that there is a widget ready sidebar in our theme. 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.
<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<h2>About</h2>
<p>This is the deafult sidebar, add some widgets to change it.</p>
<?php endif; ?>
</div>
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.
<?php get_sidebar(); ?>
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 the_time(), etc.)
<?php comments_template(); // Get wp-comments.php template ?>
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 style.css.
textarea#comment { width: 400px; padding: 5px; }
.commentmetadata { font-size: 10px; }
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.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">
<h2 class="entry-title"><?php the_title() ?></h2>
<?php the_content() ?>
<ul id="archives-page" class="xoxo">
<li id="category-archives">
<h2>Archives by Category</h2>
<ul>
<?php wp_list_categories('optioncount=1&title_li=&show_count=1') ?>
</ul>
</li>
<li id="monthly-archives">
<h2>Archives by Month</h2>
<ul>
<?php wp_get_archives('type=monthly&show_post_count=1') ?>
</ul>
</li>
</ul>
</div>
<?php get_footer(); ?>
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_list_categories() and 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.
Review – Does it work?
Yes it does, the sidebar does its job. Same goes for the comment system and the archive page. I hope this has shown you the basics of how to make a WordPress theme, even if in the simplest of forms. Check out the links below to get started with the more advanced themeing available for WordPress.
Further Reading
-
The WordPress Codex
Theme development, the codex is clear and well written documentation. Coming from the creators of WordPress, you can’t go wrong following its instructions.
-
CSS Tricks Screencast
There was a lot of mention about CSS Tricks 3 part guide to WordPress themeing, so I though I’d put it up on this one. It goes through how to build a nice site, a fair bit more complicated that this one but should improve on those themeing skills.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Sam Parkinson
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Thanks for the tutorial
What happened to creating single.php, as mentioned in the first part?
Net tuts+ tutorials simply rocks man.
Brilliant tutorial! Thanks.
I have a slight problem though – my images don’t display. I’ve put them in an images folder within the theme folder, so as far as I can tell the path to them is the same as it is on the static html/css build, which works.
Any ideas?
Try putting an absolute path to the images in the PHP files:
http://www.website.com/blog/wp-content/themes/themename/images/image.jpg
I’ve done this in the meantime, but I was hoping not to have to do that as it’ll mean I’ll have to go and change all the image links when moving the site over to a live server (I’m developing it on XAMPP just now).
Are your images within the theme directory?
If so use this
so for example make your image tag look like..
<img src="/img/header.jpg” alt=”" border=”0″ />
Hope that helps
Seem the php was stripped from my post, anyway, you need to add this enclosed in php tags before the img url – bloginfo(‘template_url’);
Bravo!
Okay how many people did the tutorial? Come on people lets comment when we have something to say.
I did the tut and it was awesome!
There is two problems with the archive.php however.
1) Only the first post in the category will be returned.
2) The returned post will not have a link only a ititle.
The Answer is to go through the Classic theme and find the snippet you need. I can tell I am going to be doing this a lot.
Remember to ALWAYS end a loop in PHP.
Replace Line 7 in archive.php with the following copied from the classic theme:
I seems to work for me now.
Cheers everyone !!
Yes I do work for myself…
Hey my code got deleted! And how is the text gigantic in my last two sentences. Hum.
Anyhow archive.php needs some fixing before its usable on a website.
Also sticking to pixil based fonts is superior using percentages or ems.
People needing accessibility should not be using Internet Explorer anyhow (wouldn’t you just use the zoom function on your browser?).
Nice! This is a very good and easy to understand tutorial for starting with wordpress theme development.
THX for sharing!
I love this thanks for sharing this post………
Great stuff, thanks! :D
Brilliant Tutorial- so clean and simple, love it!
Hey there!
I have a problem with this tutorial, for some reason when I click on the About link the whole layout crashes. I checked the source code, and it seems like there is no closing tag for wrapper div, the footer is completely missing and body and html are not closed… help please
Anyone care to share a graceful way to expand the sidebar stuff to include a widget-ready header? Cheers to you!
Terrific tutorial! I have linked you on my blog (“About This Blog” section) :)
the great tutorial :D
Finally, a simple outright tutorial that just explains what the title says without going through someone’s long explaination.
Cheers, you deserve a nice pat on the back.
thanks this is right to the grain.
Guys,
Where is single.php? I thought we would see it in this article…
Nice job anyways!
After studying this tutorial one can surely design and develop their own themes. thanks for sharing.
the links to the demo pages seemed broken. i hope you won’t delete this page.
Thanks so much, with this template I was able to get 100% w3c validation.
Soon I’ll put this template I made and modified a bit on my church’s website.
I like that easy Explanation, Pretty Cool ,Man !
Thanks very much! for the nice and easy explination. was a great help for me as a beginner!!!
Yes finally a strait forward answer! Everyone else is using Divine, or PSD to HTMl. god, I just want to take my design and convert it easily without copying some ones template theme.
Thank you so much!
You forgot the single.php
Hi,
I implemented this into a design I already coded in HTML/CSS… it works great but my style sheet is not rendering.. I think I have the right links.. Do they need to be direct instead of relative?
Liz, try to replace your style link by:
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
I would like explain it to you but my English is so horrible.
Cheers.
ups…..
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
I’m sorry…I don’t understand a lot of code
grrrr put this between ” ” in href:
the demo and source files links are not working.
any Ideea?
I have used your tut and finally created my 1st theme.you are the best.
The demo and source files are not available anymore??
Any chance of the files being re-uploaded?
Helped me fix the comments on a theme I downloaded which was broken. Thanks a bunch!
broken links
This is a very easy to understand tutorial for starting with wordpress. Thank you
Awesome tut. Thanks
This was brilliant! Exactly what I was looking for!
Thanks! You saved my life with this tutorial!
error in files.zip downloads.
???
I`m Trying To make more graphical WordPress Theme .. to Sell it on my website
Just to let you know, the Demo | View it Online files on this second page of the tutorial doesn’t lead to the right place…
Got kinda frustrated trying to make 2 dynamic sidebars but for the rest thanks a lot!
Thanks for this tutorial! This is really a great help for WP beginners like myself.
I tried downloading the source code and its prompting an error.
Also with the archive section, what do you mean by “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.”?
Hope you can reply to this!
Thanks!
This is a great tutorial! As a WP beginner I found it so easy to follow and it works! Thanks!
I only have one small problem, when I send a new post I get this back on the screen.
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress3\wp-content\themes\files\typography-paramount\functions.php:9) in C:\xampp\htdocs\wordpress3\wp-includes\pluggable.php on line 934
But the post arrives on the site and gets listed on the post page of the dashboard when I hit return page in Firefox.
Any clues to what is happening? I am using the lates version of WordPress 3.2.1 if that helps.
Thanks again.
I want to know how number of widgets and their areas can be determined in sidebar and footer.
Very cool! I said it in part 1 but I’ll say it again. I find it amazing that this still works in 2011 version 3.3 of wordpress.
I’m going to look into using the html5 boilerplate or parts of it to make the theme since I noticed there is a mix of html5 and html4 in wordpress twentyten theme. Not sure why they only do partial html5 but I’m going to get that part figured out and then learn to expand on this simple theme.
I found several updated tuts but they were broke, incomplete, or had bad explanations.
Thanks a lot for this.
The links are dead, please fix it, i need the files.-
Thanks.