Adding category-specific post links to the sidebar.

If you’re just tuning in, this is the fourth installment of my series of articles about using WordPress as a CMS to build an informational Web site. Throughout this series, I’m talking about a specific site I developed: Flying M Air, a helicopter tour and charter company I operate when I’m not writing and tweaking my Web sites.

Before I begin this installment, I want to take a moment to remind readers that although the topics I’m covering in this series are for Intermediate to Advanced WordPress users, WordPress 2: Visual QuickStart Guide, which I co-authored with Miraz Jordan, is for Beginning to Intermediate users. The book uses an extremely structured step-by-step approach, with lots of referenced screenshots to guide readers through the completion of hundreds of tasks. This article series uses a more conversational narrative tone and assumes that readers already know the basics.

My point? Don’t shy away from the book if the articles in this series have been too difficult for you to follow. The book will likely provide you with the basic information you need to get started with WordPress and move on to the next step. After working with WordPress (and hopefully, the book) for a while, you’ll be ready to articles like the ones in this series.

One of the drawbacks of using a blog format for sharing information that isn’t necessarily date-specific is that entries are presented in reverse chronological order. To get around that, I had to tweak the dates of the posts so the ones I wanted to appear at the bottom of a category page would have earlier dates than the ones at the top.

The other related problem is that not everyone likes to scroll down a page to see all of its contents. So, for example, if I had six tours in my Wickenburg Tours category, there was a good chance that a site visitor would never scroll down the page to see them all.

To resolve this potential problem, I decided that I wanted a list of all tours to appear near the top of the sidebar. But only the tours for the category currently being viewed. So while viewing the Wickenburg Tours category, I wanted just the entries for that category’s tours to be listed.

To do this, I had to insert some conditional statements into the sidebar.php template file. Here’s an example:

<?php if ( is_category('2') ) : ?>
<li>
<h2>All Wickenburg Tours</h2>
<ul>
<?php
$posts = get_posts('numberposts=10&category=2&orderby=post_title&order=ASC');
foreach($posts as $post) :
?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endif ; ?>

What this basically says is that if WordPress is displaying the Category 2 page, it should display a heading of “All Wickenburg Tours” followed by an unordered list of up to 10 post titles (with links) for category 2 in alphabetical order.

(Keep in mind that this code includes a lot of extra tags required by my theme for formatting lists in the sidebar; these tags must be stripped out or modified for other themes.)

I then created the same bit of code for each category that listed my tours and inserted it into the sidebar.php file, right after the search form.

I went a step further with this, however. I also wanted the appropriate list of posts to appear if a visitor was looking at a post on its own (single) page. So I copied and pasted all the conditional code to the area right above it, changed all the is_category tags in the copy to in_category tags, and inserted <?php if ( is_single() ) : ?> before the first conditional tag and <?php endif ; ?> after the last one. That set up the tags so they’d be executed properly on a single page, too.

The best way to see what I’m talking about is to just visit the site and experiment with its category and post links.

In the next installment of this series, I’ll explain how I got the images to automatically change in the left sidebar and on many of the pages.

Finding and modifying just the right theme.

One of the things I hated about the old version of Flying M Air’s Web site was its boring design. I can say that — I designed it. Lots of people complemented me on it, but I think it’s because they had low standards and didn’t expect much of a Web site. It was a good site because it was simple, was written almost entirely in HTML, and it used few images so it loaded very quickly — even for those folks who are still accessing the ‘Net with a dialup connection.

The site’s gone now — I don’t want people Googling up old pages — but here’s a thumbnail to show how it looked. I can briefly describe it. Basically, it had my company name and logo in the header. Then there were three columns: two narrow ones on the right and left and a wider one in the middle. The column on the left displayed images of the helicopter in flight or on the ground or views out the helicopter window. The column on the right displayed company news, promotions, and other information. The column on the right was only there on the Home page; it didn’t appear on any other page. The wide column was for content. Navigation was with a series of links, in two rows, at the bottom of the header. When you pointed to a link, it changed color and an underlined appeared beneath it. That was the extent of my visual effects. Even the color scheme was boring — black and red on a white background — because, as I frequently tell people, I couldn’t design my way out of a paper bag.

Recently, as I reported in my blog, I asked a designer to help me come up with a design for a tri-fold brochure. The front panel of the resulting brochure is what you see here.

To me (a nondesigner), the brochure was incredible. I couldn’t believe that my little company could have such professional looking marketing material. I learned a valuable lesson: it really does pay to hire a professional.

But I also started thinking that if brochure readers went to the Web site, they’d see this sad, obviously home-grown site. They’d realize that Flying M Air wasn’t a huge operation with a fleet of helicopters, stable of pilots, and unlimited marketing budget. My cover would be blown.

I didn’t want that to happen. So before the brochures went out, I’d have to redesign the site. And since I’ve been using WordPress for all my new work, I decided to try it out for Flying M Air.

There were elements of the brochure I wanted to include in my new site:

• The three colors: blue for header, red for footer, yellow for content. If I could get the line curves in there, great!
• The framed photos with drop shadows.

There were also elements of my old site that I wanted to incorporate in the new one:

• The small images of the helicopter and views down the left narrow column.
• My company logo.
• Calendar of upcoming events.
• Photos…and lots of them.

There were also elements that I didn’t currently have on my site that I wanted:

• Horizontal navigation of summary pages in the header with something more spiffy than plain old HTML links.
• A search form. Yes, it’s true. My old site wasn’t internally searchable.
• Contact form. I didn’t want my e-mail address anywhere on the site.
• Site statistics (beyond a simple counter).
• The ability to e-mail content from the site.
• The abilty to print specific content from the site.

In my mind, I came up with a 3-column format: two narrow columns on the left and ride side of the page and a wider column in the middle. (Sound familiar?) I’d put the small pictures on the left and use the right column for navigation, searching, calendar, and whatever else I needed to display. The format also needed to have a well-defined header and footer.

With this in mind, I began my theme search. Keep in mind that although I might be able to figure out how to create my own theme from scratch, I don’t have 20 years to get this job done. I — like most smart WordPress users — prefer to start with an existing theme and customize it for my own use.

A while back, Miraz shared a tip on our book’s Companion Web site for a new WordPress Theme Viewer. I surfed on over there and gave it a try. It enables you to search for a theme based on criteria including the number of columns, colors, fixed vs. variable width, etc. I searched for a 3-column, fixed-width layout. Among the search results was the theme I chose: a version of Andreas ported by Matteo Turchetto. The version I downloaded appears to be gone, but this version is very similar. You can go to the author’s Andreas page to see all variations of this theme.

I had to make a bunch of changes to the style.css file to fit my needs, some obvious, others not so obvious. Here are some examples:

• Modify the background-color attribute for the body, container, header, and footer elements so they would match the header, footer, and body (container) of my brochure. I also wanted to change the page (body) background to white so the black text would appear on it as the page loaded.
• Modify the color of the h1, h2, h3, and various link elements to match my brochure’s color scheme.
• Modify the font-size of various elements. I wanted body text and sidebar links to be legible and headings to be toned down a bit.

You get the idea.

I should probably take a moment to explain how I modify my CSS file. I open it with TextWrangler, a Mac OS text editing application that enables me to open and modify text files via FTP. I make a change, save it, and immediately refresh the page that is affected. If the change screws things up, I undo it, save it, and double-check to make sure the problem is gone.

Other people use a more conservative approach, especially when working on blogs that are “live” and being accessed by sitge visitors. In that approach, you modify a copy of the CSS file and upload it back to the site, being sure to maintain an untouched copy in case the revised copy makes a mess of things. This is a good technique if you have a good working knowledge of CSS.

Unfortunately, that’s not me, so I need to use the trial and error approach.

With the colors in place, I attacked the content. The original theme had two sidebars, each of which included links. I didn’t want links in the left sidebar, so I modified the leftsidebar.php file to remove everything between the opening <div> tags. I would replace them with the small images I’d had on my old site, after fixing them up a bit. I’ll discuss all that in a later installment of this series.

Then I went into sidebar.php and removed all the content there that I didn’t want, which left just the search form and the categories list. The categories list used the list_cats tag, which I don’t like very much — I prefer wp_list_cats because it’s easier to configure and read. I wound up replacing that whole section with the following very simple code:

<li>
  <h2><?php _e('About Our Services'); ?></h2>
  <ul>
  <li><?php wp_list_cats('hide_empty=0') ?></li>
  </ul>
</li>

Of course, at this point, the blog didn’t have any database content other than the “Hello World” post, its comment, the uncategorized category, and the usual collection of blogroll links. I went to the administration panels for the blog and got to work.

I changed the Uncategorized category’s name to What’s New. Then I added the categories my site would need in the order I wanted them to appear. Because the wp_list_cats tag was set to show all categories — even those without posts — the categories automatically appeared in the right sidebar in the order I created them in.

I didn’t touch the links; since I wasn’t using any tags that would display them, it didn’t matter what they were. I may delete them in the future if I decide to offer links to other sites.

At this point, I had a good shell for my site’s content. I’d do that next.

But just one more appearance thing, first. My brochure has curved borders for the blue header and red footer. I wanted the same effect on my site. So I created a pair of images — one for the header and one for the footer. The header image was basically the blue curving border on a yellow background. The footer was the red curving border on a yellow background. I inserted the img tag for each image in the appropriate template file, header.php or footer.php so that the images would appear at the end of the header and the beginning of the footer. I had to fiddle around a bit with margin and padding settings in the style.css file to get it just right. I’m pleased with the results.

In the next installment of this series, I’ll cover planning the site’s content and creating the Pages.