I recently had a conversation with someone who had decided to come to Wordpress to take advantage of a plugin or two and wanted to know how to get an existing site into the correct theme structure as required. It took a lengthy email or two to explain but it struck me that lots of people must be asking the same questions over and over. So in this post i shall try to explain how to get a theme together, or rather where to start

So… first, a bit of logic

Logically speaking a standard layout web page can be split into four distinct areas as follows:

• Header
• Footer
• Sidebar(s)
• Content

And as such Wordpress uses different theme files to render the appropriate sections. We need to split our HTML page into those different files. There are, however, lines of code that Wordpress needs you to put into each of these files and so tbe best way todo this without missing anything is to recycle another theme. So… go to your Wordpress install and visit /wp-content/themes/ and…

1. Duplicate the directory called ‘default‘
2. Open style.css in a text editor and edit the name of the theme and any other information you feel like
3. Either remove or replace screenshot.jpg from the theme directory so it looks different in the theme menu

That’s it, you now have a skeleton to work from and it’s time to make it look like your site. Let’s assume you have a simple brochureware site and, therefore, don’t need any blog type pages. Largely these sites have a standard consistent layout on each page (often except the home page but that difference is for another tutorial) and Wordpress uses this consistency to slot in the appropriate information for each page. We do this by…

1. Choose a short yet typical page from your site and view the HTML source
2. Open 4 separate text files from the new theme directory in your favourite text editor. They are: header.php, footer.php, sidebar.php and page.php
3. From the HTML source take the top section of code (usually as far as the content and sidebar code inclusive of a menu assuming you are using a top horizontal bar navigation) and place it into header.php making sure to preserve the obvious dynamic sections of code (anything between <?php and ?> can be assumed to be dynamic)
4. Do the same with the footer into footer.php (the section below the content and sidebar that often contains SEO links and copyright notices)
5. The remaining block should contain the content and sidebar code… simply cut out the sidebar code into sidebar.php
6. Finally split the content code into the bit before the text and the bit after the text (ie: layout code stripping out the text itself). Then paste these sections around the ‘while’ loop within page.php.
7. (optional) copy your stylesheet into style.css making sure to preserve the comment at the top of the file as this is used by Wordpress to define the theme and without which will not pick up any of the code.

Step 6 will likely be the most difficult to do as there are three or four important lines of PHP code in there. Firstly the line that reads <?php get_header(); ?> is the code that calls header.php. Likewise <?php get_footer(); ?> and <?php get_sidebar(); ?> call their appropriate namesakes. Make sure that they are in the correct logical positions for the page to render in the right order.

The Loop

The hardest section is what is called ‘the loop’ by Wordpress bods. This is the section of code that shows the post(s) from the database relative to the page you are looking at. The Loop often falls into the following form:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <div id="post-<?php the_ID(); ?>">
 <h2><?php the_title(); ?></h2>
 <div>
 <?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>

 <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

 </div>
 </div>
 <?php endwhile; endif; ?>

You shouldn’t really need to change any of the code itself but you might need to edit the encapsulating HTML to make your styles fit in. For example if your page titles are not in H2 tags then you need to change it to suit etc etc…

Testing it!

This will always be a case of trial and error until you know what you are doing so don’t worry if it all goes pear shaped. That’s what the undo button is for!

To test that your theme is working properly then you need to visit your sites back end at /wp-admin and click the link on the left hand side called ‘appearance‘. The themes page will appear and to activate your theme you simply find it in the list and click ‘activate’. Then view the front end of the site and see what it looks like.

At this stage you might be confused because the home page looks different to the rest of the site. This is because, by default, Wordpress uses the index.php file from your theme directory to generate the home page. To change this visit the settings -> reading page from the left menu and use the dropdown box to choose an appropriate page to be used for the home page.

What’s next?

Ok so your theme looks like it did before you spent hours making the them for the Wordpress site… why on earth are we using Wordpress at all you ask! Well if you were to create a new page for your old site then you would have to duplicate an HTML file, trawl through code (or look at Dreamweaver or another WYSIWYG) to find the sections to replace before uploading to your site and updating the links in the various menus as appropriate. With Wordpress you just add a ‘page‘ using the nice admin system and it’s all done for you.

I always tell my clients to go and have a look at the Wordpress plugins directory for ideas and things to ad to their site. A word of warning though, some plugins conflict with others and too many plugins might slow your site down considerably. Over time you will get used to a core few you know and trust.

Feel free to ask me any questions about Wordpress, PHP or other and hopefully I will be able to help you decide what’s the best direction for your site to take. Expect a lecture about how good Wordpress is though!