How to Make a WordPress Blog Theme Match an Existing Website

I’ve been hosting the Bandolier evidence-based medicine site for Oxford pain researcher Andrew Moore. I’d previously collaborated with him on analysing drug-trial data, but this was the first time we’d worked together on a website. One thing we thought we might want to add was a WordPress blog; and since Bandolier has a very distinctive style, I needed to make a WordPress theme that would give the blog the same style. This sort of thing is quite common in computing: you’ve got two completely different pieces of software, and you have to make one match the other, even though they’re written by different people with different tools. Luckily, I found Tania Rascia’s “Developing a WordPress Theme from Scratch”.

To appreciate the style I needed to emulate, look at the screenshot below of an existing Bandolier page. The site is about evidence-based medicine and pain, so the pages explain such things as the evidence for ways of easing back pain, safety in acupuncture, and the placebo effect. The page shown here is about clinical trials.
Screenshot of an existing static Bandolier page, one about clinical trials

Before I could style a blog, I had to set one up. This meant installing WordPress, which I did as described at WordPress Codex’s “Installing WordPress”. I put it into a subdirectory called blog under the main Bandolier site.

I then joined Tania’s page at the section headed “Creating your custom theme”, and made a subdirectory called blog/wp-content/themes/bandolier. Themes always live in .../wp-content/themes. So, for example, when I was styling AudioTheme’s Promenade theme for a customer, I had a subdirectory called promenade holding the original theme, and another called promenade-child which contained my adaptations.

The first file I had to create in blog/wp-content/themes/bandolier was a stylesheet, style.css. As the WordPress Codex explains on its “Theme Development” page, this provides not only the kind of visual styling information that you get in any CSS stylesheet, but also information about the theme. This is essential for WordPress to use the theme properly, and goes in the comments at the top:

/*
Theme Name: Bandolier
Author: Jocelyn Ireson-Paine
Description: Bandolier site templates converted to WordPress
Version: 0.0.1
*/

Actually, for these experiments, this was the only stuff in the stylesheet. I let the blog’s styling depend on default styles, e.g. for paragraph fonts, set up in other stylesheets, the existing Bandolier ones.

The next thing was to start styling, and decide what a list of blog posts should look like. On my site, for example, that’s http://www.j-paine.org/blog, and opening it in my browser gives me a complete list of posts, each with its title, date, and text. Where could I fit these on the Bandolier site? Well, there’s an obvious content area — starting at the heading “Clinical trial” in the above screenshot, and ending at a horizontal line. So I took an existing page, and played around with the page source and the Firefox Inspector, looking for the relevant HTML elements:
Screenshot of me looking for the clinical-trial page's content area in Firefox Inspector

(Continued.)

Leave a Reply

Your email address will not be published. Required fields are marked *