If you have been following this guide from the start, you should currently have three files completed (header.php, footer.php, style.css). If you don’t, you might want to go back and start from the beginning.
Tonight we will be taking a look at the creation of a sidebar and proper implementation of plugins. Although a sidebar may not be practical for all websites, for a blog a sidebar makes a lot of sense. Blogs tend to have lots of information they need to get across to the reader, and sidebar is the simplest, clutter free way to do it. I highly recommend that when you build your template, you consider a sidebar and how you will use it.
Before we start you’ll want to create a new file in your template folder called sidebar.php. This file will hold all of your sidebar information, and will be the file that we will be looking at tonight. There are no WordPress tags that are necessary in sidebar.php, so if you want you could do the entire file in HTML. However, I would recommend that you use WordPress tags in your sidebar, since they’re great for outputting information your readers will want.
The Search Box
One of the items that most templates include in a sidebar is a search box. A search box will allow your readers to find articles of interest by entering keywords. WordPress will then use those keywords to look through your posts directly; displaying the posts that match those keywords. Since adding a search box is easy, I would recommend adding one to your theme. It will greatly improve a reader’s navigation of your blog, and allow them to dig up old articles that may be of interest.
Now here’s what a basic search form’s code would be:
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" />
</form>
You’ll see from the HTML, to create a search box all you’re doing is using regular HTML. However there are a few WordPress tags in there. $_SERVER['PHP_SELF'] tells the browser where to send the form after it’s completed. It’s important to have that tag or the search will not work. wp_specialchars($s, 1) will display the search term in the search box after a search. That tag is not necessary, but highly recommend to include. Beyond that, just make sure you keep the id=”" the same, so that WordPress can identify the search box. You can then customize the form to your heart’s content.
Limit What Pages Content Gets Displayed On
Before we get too deep into the sidebar’s content, I thought it would be a good idea to teach some tricks of the trade. Have you ever seen on a WordPress blog, some sidebar content on one page and not the next? You’re probably wondering how that’s done.
Well, WordPress has a few tags which allow that to be accomplished. Alright, maybe not a few; more like twenty or so. Follow the link to find out all of the possibilities. Now that you know all the conditional tags, you’re probably wondering how to use them. Basic use of them is actually quite simple, and can be used anywhere in your template; not just in the sidebar.
Let’s say for example, I only wanted the text “home” to be displayed on the home page. All I would do is this:
<?php if (is_home()) { ?>home<?php } ?>
Now let’s say you wanted the text “back to home” to be displayed on all pages but the home page. To do that you would do this:
<?php if (!is_home()) { ?>back to home<?php } ?>
Now you can also string multiple conditionals together, but that can get complex. I would recommend reading WordPress’ Codex to find more on how to use conditional statements, because they are very complex, but worth learning.
Listing Your Latest Posts
Another popular thing to do is list your latest posts. This isn’t so useful on the home page, as you can see the latest posts, but it becomes very useful when browsing archives and such. I use it so that people who may have come to my site from another source can see what I’m blogging about.
To add a list of your latest post you would use this WordPress tag:
<?php wp_get_archives('type=postbypost&limit=5'); ?>
It should be kept in mind that this tag will output <li>, so you will need a <ul> or <ol> to use it. There are also several options available for this tag. One possible tweak would be the number of posts it displays. To tweak that all you have to do is change limit=5 to another number such as limit=8. To find out more about what’s customizable check out the codex’s page for wp_get_archives.
Date-Based Archives
Another common use of the sidebar is to include a date-based archive list; most commonly a monthly archive. This can be accomplished by using the same tag as listing your latest posts, only slightly modified. To list your monthly archives, add this to your sidebar:
<?php wp_get_archives('type=monthly'); ?>
As with the latest posts, this also outputs a list, so make sure you use proper list format. This tag can also be customized. Visit the codex page for more information on customizing it.
Category Lists
You’re also probably going want a list of your categories in your sidebar. Once again this WordPress tag does the same thing as the previous mentioned ones, outputs a list. So again, make sure you account for the list. And, just like the other tags, this one can also be customized.
<?php wp_list_cats('sort_column=name&list=1&hide_empty=1'); ?>
Plugins’ Output
The only thing left that you could possibly want in your sidebar would be things that a plugin would output. Adding plugins will be different for each plugin that you encounter, but I have a tip for you when adding the plugin’s code. I’ll be using my own Akismet Spam Count as an example.
My plugin requires this line of code to be inserted in a template to display the output:
<?php akismet_count(); ?>
All plugins are going to have you insert something similar. Now to make things easier for yourself, you’ll want some additional code. This extra code will check to see if the plugin is enabled. If it isn’t, your blog will display as normal, instead of getting a nasty error message that the plugin is not enabled.
To add this additional code you need to know the text before the () or (’anything goes here’). In this example that text would be akismet_count. Now modify the code to this:
<?php if (function_exists('akismet_count')) { akismet_count(); } ?>
As you can see, you’ll place the name of the text before the () in between the ‘ and the ‘ in function_exists(”). You can apply this tip anywhere a plugin is called, regardless of what part of the template it’s in.
Conclusions
After tonight, you should now have style.css, header.php, footer.php, and sidebar.php completed. We’re getting close to a theme that is semi-usable! In the next article, we’ll get into how to actually display your posts. See you next time!
5 Comments
You are really do a wonderful job Ronald. These tutorials are really needed. Perhaps you can later throw this into word, keep the fixed-width on the code, and put in syntax highlighting and print it as a PDF to share for all. I look forward to read the next tutorial!
Or, print the finished version for me so I have a nice little manual.
Thank you for these tutorials! Learning how to customise WordPress is a somewhat steep learning curve, and I’m impatient - I want to create my own customised theme *now*.
After reading parts 1 and 2 of your tutorial, a lot is becoming clear. Now waiting impatiently for you to post the next bit!
Great tutorial! I have one suggestion, though. The search template works better if
action=”/”
Otherwise if someone is reading a posted entry and then decides to search the blog, they actually are only searching the post and not the full blog.
Ack ok, that didn’t work! What I meant was
Instead of
I hope that works!