Chapter 3
[ 75 ]
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 |
Blogroll | Manage Blogroll panel.
A set of 'Meta' links (links to info about the site): These links are hand-coded
into the sidebar.php page in the default template.
Generally, the above works out great for a more 'standard' blog. But as discussed,
I would like my page links to display horizontally up top of my sidebar, and I
want my theme to display a vertical sidebar that looks more like the contents page
of a magazine.
•
•
•
Coding It Up
[ 76 ]
Time For Action:
1. To start, I'll be treating my archives as Past Issues. So showing the month
and year will be just fine. Under my Past Issues heading I'll add the
following code which will display my archive links wrapped in unordered
list elements:
<!--//start archive list-->
<ul class="tocNav">
<?php wp_get_archives('type=monthly'); ?>
</ul>
<!--//end archive list-->
Formatting tip: 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 very 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 side bar, I've removed the following:
&title_li=<h2>Categories</h2>
I have changed it to this:
&title_li=
It gives me the code under my Columns header that looks like this:
<!--//start categories list-->
<ul class="tocNav">
<?php wp_list_categories('show_count=1&title_li='); ?>
</ul>
<!--//end categories list-->
Chapter 3
[ 77 ]
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 coming from my
Features category.
Because I understand a little PHP, I'll include a small custom loop which will use
three WordPress template tags 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 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.
<!--//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>
<?php endforeach; ?>
</ul>
<!--//end recent features list-->
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 WordPress codex site from
http://codex.wordpress.org/Displaying_Posts_Using_
a_Custom_Select_Query.
Coding It Up
[ 78 ]
4. Last, I am ready for my page navigation. At the moment, my 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>
<!--//end page nav list-->
Chapter 3
[ 79 ]
Breaking It Up–Separating Your Theme Into
Template Files
As I mentioned earlier, the advantage to having your WordPress theme's parts
separated into individual template pages is that your theme will be more flexible and
able to accommodate a wider range of content. As nice as my theme currently looks,
there are some problems with it that can only be dealt with if I break the theme's
design up into multiple WordPress template pages.
To start, I only want that huge 300 pixel high header graphic to load on the home
page. It's neat to give the feel of a magazine cover, but once the reader has moved
onto a full article (a.k.a. post) or one of my static pages, I'd rather not have it there
eating up screen real estate that the reader could be using to read more content
without having to scroll. Like wise, the This Month header only needs to be on the
home page, not on any internal page.
Also, while I do want the Features, Columns, Past Issues sidebar navigation to show
up in a full article view page, I don't want that navigation sidebar on the About and
Contact static pages. I'll have them click on an additional link in the top nav called
The Zine to get back to the home page view.
Again, because WordPress is so flexible, it's super easy to add this extra link to the
top nav by just adding the list item under the template tag like so:
<ul id="navlist">
<li><a href="/">The Zine</a></li>
<?php wp_list_pages('title_li=' ); ?>
</ul>
That link The Zine will now let people go back to the home post page if they
view one of my static pages. As my CSS style is targeting list items in the
top_navigation div, the new list items automatically pick up the same styling
as the WP generated items.
Next, the loop needs slightly different formatting between my posts and static pages.
Posts are being treated like articles, so I have template tags that announce 'by Author
Name for Category Name,' but on the static pages, to have the page title About and
then 'by Author Name' is a little ridiculous.
Last, I'll need the full article pages to display comments under the article with the
'Add Comments' form underneath that, so if people click on the Add Your Thoughts
link, they'll be anchor-tagged down to the form for the post.