WordPress as a CMS, Part 2

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>About Our Services</h2>
  <ul>
  <li>  <li class="cat-item cat-item-3"><a href="http://www.mariasguides.com/category/book-support/" title="Topics I&#039;m currently producing content about.">Current Topics</a>
<ul class='children'>
  <li class="cat-item cat-item-4"><a href="http://www.mariasguides.com/category/book-support/excel-books/" title="Support for my Excel books and other training material.">Excel</a>
</li>
  <li class="cat-item cat-item-37"><a href="http://www.mariasguides.com/category/book-support/facebook/" title="View all posts filed under Facebook">Facebook</a>
</li>
  <li class="cat-item cat-item-5"><a href="http://www.mariasguides.com/category/book-support/ipad-book-support/" title="How to information about iPad.">iPad</a>
</li>
  <li class="cat-item cat-item-113"><a href="http://www.mariasguides.com/category/book-support/mac-os/" title="Support for my Mac OS books and other training material">Mac OS</a>
</li>
  <li class="cat-item cat-item-11"><a href="http://www.mariasguides.com/category/book-support/twitter/" title="Support for my Twitter training materials.">Twitter</a>
</li>
  <li class="cat-item cat-item-12"><a href="http://www.mariasguides.com/category/book-support/word-books/" title="Support for my Word books and other training material.">Word</a>
</li>
  <li class="cat-item cat-item-13"><a href="http://www.mariasguides.com/category/book-support/wordpress-books/" title="Support for my WordPress books and videos.">WordPress</a>
</li>
</ul>
</li>
  <li class="cat-item cat-item-7"><a href="http://www.mariasguides.com/category/other/" title="Other content on this site.">Other Content</a>
<ul class='children'>
  <li class="cat-item cat-item-116"><a href="http://www.mariasguides.com/category/other/deals-and-steals/" title="Special offers and other deals that can save you money.">Deals and Steals</a>
</li>
  <li class="cat-item cat-item-15"><a href="http://www.mariasguides.com/category/other/downloads/" title="Downloadable files, including sample files and excerpts.">Downloads</a>
</li>
  <li class="cat-item cat-item-16"><a href="http://www.mariasguides.com/category/other/links-worth-following/" title="Miscellaneous links of interest.">Links Worth Following</a>
</li>
  <li class="cat-item cat-item-114"><a href="http://www.mariasguides.com/category/other/out-of-print-books/" title="Content related to out-of-print books and other training materials.">Out-of-Print Books</a>
</li>
  <li class="cat-item cat-item-9"><a href="http://www.mariasguides.com/category/other/screencasts/" title="Video screencasts of how-to information.">Screencasts</a>
</li>
  <li class="cat-item cat-item-118"><a href="http://www.mariasguides.com/category/other/site-info/" title="Information about the operation of this site, including site news and other changes.">Site Information</a>
</li>
</ul>
</li>
</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 begining 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.