Currently, the main sidebar (the sidebar that's just on the right-hand side of my layout) is still just XHTML markup. Let's get it out into its own template file and included into the index.php file, and then see about making it more dynamic with WordPress template tags.
This will essentially be the same as creating the footer.php file:
1. First, create a new template file named sidebar.php in your theme's directory.
2. Now cut everything that makes up your sidebar markup into that file. In our case study design, that is the markup from the Features header:
to the XHTML comment:
3. Once everything is copied into the sidebar.php file, where your markup used to be in your index.php file, add in the following WordPress include template tag:
If you save your index.php and sidebar.php files and refresh your WordPress site, you should see no difference in your layout.
Let's now take a look at making the sidebar dynamic.
Making the sidebar dynamic
The default theme's sidebar.php file displays the following information:
• Static Page Links: This is a list of your static pages. It is the content you add via the Administration | Page navigation in the Administrator panel as opposed to the Administration | Post navigation. This list is displayed using the wp_list_pages template tag.
• Archive Links: Again, controlled by a template tag, wp_get_archives, this is set to the type=monthly default.
• Category Links (with how many posts per category): This displays your categories using the wp_list_categories template tag.
• A BlogRoll set of links: This list is controlled by the wp_list_bookmarks template tag which displays bookmarks found in the Administration | Links navigation.
• A set of "meta" links (links to information about the site): These links are hand-coded into the sidebar.php page in the default template.
Pages s- About
S- September 2007 » July 2007
Features (3) s- Office Productivity (1) Uncategorized (1)
Blogroll s- Alex Donncha Dougal » Matt s- Michel J- Mike Ryan
Meta s- Site Adnnin
Logout s- Valid XHTML » XFN
Generally the above works out great for a more "standard" blog. But, as discussed, I would like my page links to display horizontally on top of my sidebar, and I want my theme to display a vertical sidebar that looks more like the contents page of a magazine.
Let's make our sidebar.php file dynamic with the following steps:
1. To start, I'll be treating my archives as Past Issues. I only want to display the month and the year of the "issue". Under my Past Issues heading, I'll add the following code which will display my archive links wrapped in unordered list elements:
<h2 class="pastIssues">Past Issues</h2> <!--//start archive list--> <ul class='tocNav">
<?php wp_get_archives('type=monthly"); ?> </ul>
You'll see I've wrapped each bit of PHP and its template tag in <ul class="..."> (unordered list XHTML markup). WordPress will automatically return each item wrapped in <li> (list item tags). Adding the unordered list tags (or <ol> ordered list tags if you want) ensures I have a valid list that is easy for me to customize with my CSS. XHTML comments:
You'll also note that I'm wrapping most of my WordPress code in <!--//--> XHTML comment tags. I do this so that scanning the markup is easier for myself and any other developer who comes across the code (a nice idea for those of you who are looking forward to creating commercial themes to make a little money; the more clear your markup, the less time you'll spend helping purchasers troubleshoot your theme). Also, indicating where WordPress code starts and ends, as well as what kind of code it is, will also come in handy when we get ready to break the code out into template pages, reducing the chance of possible cut-and-paste errors that can occur.
2. Next, my Columns are really just a list of my categories. The default sidebar lists the title as Categories, but as I have my own special header hand-coded into the sidebar, I've removed the following:
I have changed it to this:
It gives me the code under my Columns header that looks like this:
<h2 class="columns">Columns</h2> <!--//start categories list--> <ul class='tocNav">
<?php wp_list_categories('show_count=1&title_li="); ?>
3. Next, my Features will require a little bit of finessing. I would like
WordPress to display the most recent five posts that are only in the Features category. There are a few clean template tags that will display the most recent post titles, but they don't seem to let me limit the posts to just my Features category.
Because I understand a little PHP, I'll include a small, custom loop which will use three WordPress template tags and a formatting function to call in the post information for the last five posts in category 3 (which is my Features category), then just display the perma link for each post and its title.
Again, as long as you recognize what the template tags look like and how to paste them into your theme's template pages, you don't have to understand PHP or write any special scripts yourself. You can do a whole lot with just the existing template tags.
Understanding PHP and how to craft your own bits of code and loops will enable you to have no limits on your theme's capabilities. The following script has the WordPress template tags highlighted in it, so you can see how they're used:
<h2 class="features">Features</h2> <!--//start recent features list--> <ul class='tocNav"> <?php global $post;
$myposts = get_posts("numberposts=5&category=3");
foreach($myposts as $post): setup_postdata($post);
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
Custom selecting post data:
You'll probably notice that the setup_postdata(); function isn't listed in WordPress.org's template tag reference page; it's actually a WordPress formatting function. If you're interested in PHP and would like to learn more about being able to infinitely customize WordPress content into your themes, I'll discuss this and some other formatting functions in Chapter 6. It's also worth it to check out the topic on the WordPress codex site at http://codex.wordpress. org/Displaying_Posts_Using_a_Custom_Select_Query.
4. Last, I am ready for my page navigation. At the moment, the only static pages are About and Contact. I'll place the wp_list_pages template tag into my top_navlist div tags as follows:
<!--//start page nav list--> <ul id="navlist">
<?php wp_list_pages('title_li=" ); ?> </ul>
Now, refreshing your WordPress site will show us our layout with current WordPress posts, categories, and archives, which we call: Features, Columns, and Past Issues.
Hooking it up: Plugin API hooks
The most important WordPress hook that people like to take advantage of in their sidebar is widgitizing the sidebar so that it works with WordPress widgets (widgets are essentially "light" plugins, which can work independently and sometimes work with other more robust WordPress plugins.
There's no simple single-line function for getting your sidebar widget ready. We cover widgitizing your theme in full detail in Chapter 8.
Was this article helpful?
Building effective backlinks can be instrumental in improving search engine ranking for your website and increasing quality traffic. Learn from the Pros How to Build Effective Backlinks in Order to Successfully Generate a High Volume of Quality Visitors to Your Website. Having Links Placed on Important Websites can Even Increase the Traffic of a Popular Website by More than 500.