Adapting a WordPress Theme

WordPress makes it easy to set up its software on your own site. However, integrating the blog’s look into your site’s design is another matter. Although not hard to do, it does require some tricky maneuvering to get everything working properly, including a fair bit of tinkering with the source code. (There’s no room for WYSIWYG editing here …)

Note: this post is from 2008, so although it may contain useful pointers, WordPress has come a long way. At the time of writing, this site was running on WordPress. That’s not the case now, and the design has changed.

Getting Started

Firstly, it’s best that your site be CSS-based. WordPress is designed with web standards in mind, so don’t pollute it with table layouts—a decidedly backward step.

As said, installing WordPress is very easy (instructions are provided with the download) so this won’t be covered here. Suffice it to say that there are various ways to go about the installation, and I chose to download WordPress to the desktop, unzip it, save it into this site’s root folder, and then uploaded the files to the server. (Of course, you can also save the files to a sub-folder—such as /blog/—if you prefer to have your blog just as a section of your site.) The theme modifications described below were made locally (that is, on my computer) and then uploaded to the web.

The following tips assume that the default WordPress theme is installed on your site and ready to go.

Step One

The first thing to do is to look through the WordPress files until you find a folder called wp-content. Within this you’ll see a folder called themes. Inside this folder is another called classic. Duplicate this folder, and rename the copy in a way that identifies your new theme. (I just called mine pa.) Inside this new folder are the files you will need to modify in order to create your unique WordPress theme.

Now, upload this new folder, then log in to your WordPress account. (One way to do this is to view your blog online and click the login link at the bottom right. Another way to log in is to navigate to your blog’s URL and add wp-login.php, then click Enter/Return. By the way: if you haven’t already, perhaps change the default password supplied by WordPress to something else.)

Once logged in, click the Appearance tab (left column), then select your newly named theme as the default by clicking its name. (If you visit your blog page now, you’ll get a shock; but don’t worry, all will be well.)

Step Two: the Header

An important point to appreciate now is that a WordPress blog page is a kind of amalgamation of various different files. When you call on a page, such as the blog’s home page, many files are drawn together in the blink of an eye to construct that page. So to build the blog’s theme, it is necessary to modify a range of files, each of which will contain a part of the final page.

Now go back to all those WordPress files stored on your computer and open the new theme folder you created. Open the file called header.php. (No prizes for working out what part of the blog design this contains!) At the top you’ll see the DOCTYPE declaration, which includes XHTML 1.0 Transitional. Because I wanted to use XHTML 1.0 Strict, I replaced the whole DOCTYPE declaration. (This caused no validation problems down the track.) This replacement included getting rid of the little PHP bit (<?php language_attributes(); >). (I later changed the doctype to HTML 4.01 Strict, for reasons I explain here.

Next I replaced this link to the Classic theme’s CSS stylesheet …

<style type="text/css" media="screen">
    @import url( <?php bloginfo('stylesheet_url'); ?> );
</style>

… with my own CSS link:

<link href="http://www.pageaffairs.com/css/main.css" rel="stylesheet" type="text/css" />

Next, just to be smart, between <?php wp_head(); ?> and </head> I added my site description, keywords and favicon link. (View this page’s source code to view these.)

Now, the next bit was really fun, because here’s where the magic starts to happen. After </head> I removed all remaining default code and pasted the code for the whole header section of this site. A quick online check showed that my header section was now in place. (Yes, okay, there was a lot of other messy stuff as well below that—added in by the other linked files—but these were addressed next.)

Before finishing with header.php there was one more thing to do. WordPress will next call on the main content of the blog page, and the header file must end with the opening tag(s) of the next section. In my case, these were:

<div id="main">
<div id="content">

… along with a bit of extra text used as my blog’s intro, which precedes the actual WordPress posts.

The main content of the blog page is contained in the index.php file, and this final piece of code ensured that this main content would appear in the #content div.

Step Three: the main content

There are various options included in the index.php file that are a matter of taste. For example, will the blog include reader comments?

<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>

If not, these bits of PHP can be deleted.

In amongst these bits and pieces I weaved divs, headers and paragraph elements etc.—replete with id and class attributes—that reflected the rest of the site. When done with this, I closed off the #content div.

Next I made a significant change to the WordPress layout. The sidebar of this site is contained within the main section, but the WordPress classic theme includes a link to its sidebar in the footer.php file. I opened footer.php, removed <?php get_sidebar(); ?> and pasted it into the index.php file. Around this I placed <div id=“sidebar”></div> so that my own sidebar styles would apply to this section.

Finally, of course, I closed off the main div, just before the <?php get_footer(); ?> link at the bottom of the index.php page, which required no change.

Step Four: the footer

Next I opened the file footer.php. Since I had already removed the get_sidebar link, all that remained was a paragraph within a div. The paragraph contains various bits including a link to WordPress. Being stingy, I removed the whole div and its contents, and replaced them with my own default footer div.

Then I just left the final three lines in place:

<?php wp_footer(); ?>  </body>  </html>

And that’s basically it! After saving all this, the blog was laid out just like the rest of my site … well, except for some sidebar issues.

Step Five: the sidebar

The sidebar was probably the trickiest bit to get right, mainly because the default items include lists within lists, which I did not want. The sidebar on the rest of my site is made up of separate divs, each with an <h2> heading, which I wanted to preserve if possible. So rather than just re-style the lists, I got rid of a lot of them.

The default sidebar has quite a few options—such as links to pages, bookmarks and categories—some of which I did not want on this site. So I cut out the bits I didn’t want, leaving just the search facility (<?php _e('Search'); ?>), categories (wp_list_categories), bookmarks (wp_list_bookmarks) and archives (wp_list_archives). (Later I decided to remove the last two, so you won’t see them on the site now.)

Around each of these I wrapped a div, added an <h2> element and then a single <ul> element.

Whatever you do, though, don’t delete this line:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Otherwise the sidebar won’t work.

For good measure, I also added in other divs, like RSS and Book Affairs sections, which I can maintain myself.

WordPress automatically updates the contents of the categories and archives sections. To add items to the bookmarks section, go into your WordPress account and go to Links > Link Categories. (Or something like that. It keeps on changing, depending what version of WordPress you are using.)

Step Six: finalities

The last thing I did was style the posts and comments sections. The code for these is in the index.php and comments.php files. I firstly got rid of some of the default PHP items such as time of post, RSS feeds etc. I changed the date tags from <h2> to <h5>, and repositioned various bits to suit my taste.

I also restructured the Comments, changing them from list items to divs. All this gets pretty fiddly, but it was fun, and in the end I was pretty pleased with how everything looked.

It’s advisable to make a backup copy of any file before modifying it, so that if all hell breaks loose you can paste the old code back in and start again.

Hopefully this account of my blog setup has been of some use to you.