Advertisement
WordPress

How to Create a Wordpress Theme from Scratch: Part 2

by

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

    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.

    Visit

  • 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.

    Visit

 

Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…