Pirate Cove

Welcome to the final chapter in this series. Today we are going to review the process for taking your newly created HTML/CSS files and turning them into a theme for your WordPress site. We will review what the theme system for WordPress consists of as well as some resources that are helpful in getting your project completed. By the end you should have a better understanding of how the WordPress theme system works and what it takes to get your custom layout functioning.

Hopefully if you have gotten this far in the series you already know something about the WordPress Theme system. For the sake of brevity in an already lengthy article I’ll will just say that before you go on in this article, just review this section of the Codex at the WordPress site on their theme system. After reading through that you should have a better idea of what is going on during the rest of this article.

To start things off for your new theme go ahead and make a folder in the wp-content/themes folder with the name of your new theme, no spaces. Create a folder ’style’ inside of that folder.

How you do the next part depends on you really. If you Google around you will find a few WordPress reset themes. They strip away all formatting and standardize some tags being used. They are very nice for designers who want to have a decent base to just stylize with some CSS. I used one of these originally, but during my conversion, WordPress redid their theme system. While my method worked, I really need to redo my theme already and change the ways I did a few things. If you are going to use a reset to lay your base down, make sure it is for the version of WordPress you are running.

For our case we will just start with the ‘default’ theme as our base. Just copy the contents of the default theme into your folder for your theme. Create another folder in your themes folder named ‘unfinished’ as well. You can see there are a lot of php files in this directory. They are all described in the previous link to the Codex. We want to just start working on the bare minimum to get your site working so we are going to move the ’secondary’ files to the ‘unfinished’ directory. WordPress’ theme system will default to your index.php if it doesnt find a specific one for that section of your site. So it would be best to get the base down, and then start working on specific sections of your site from there.

Here are the files that I would leave in your themes base folder, the rest of them move to your ‘unfinished’ folder.

comments.php
footer.php
functions.php
header.php
index.php
screenshot.png
sidebar.php
single.php
style.css

You will want to edit the style.css file to have the information for your theme. Just open the file and edit the comments to reflect the proper information about your style. You will also notice the other CSS files that are included. While you are converting your theme over you can start to split up your style like this or import another one with your master CSS file for the time being. Replace screenshot.png with a screenshot of your own site as well. This is the thumbnail you see on the theme selection page.

From this point on, having a slight knowledge of PHP is helpful but not needed. You are going to be cutting up your mockup into the parts that you see in that file list above. Start working on your header/footer/sidebar files. Your index file will make calls to those files and have the rest of your code in there. At that point your site should work. You can edit single.php so that you can tweak your index.php layout for looking at just one post at a time. The file comments.php controls how the comments for your site are styled.

There is some extraneous data in the files that you shouldnt feel bad about removing, particularly in the sidebar.php, especially if you know exactly the data you want and how to put it in there. Hand-holding you through customizing those files isn’t what we are going to do here as you can find that anywhere. The programming fun part of this article will be showing you how I customized the sidebar on this site.

Our side bar at the Cove contains a Twitter section, a Recent Articles section and a Delicious bookmarks section. To get all these sections to work I could have spent a few hours custom coding all the required API plugin hooks to the services and been fine. In fact I had a Twitter one done in the past. Instead of doing all that again I went to look for WordPress plugins.

I happened to find two plugins that let me be able to do what I was looking for. Twitter for Wordpress and Delicious for Wordpress by Ricardo González.

Normally you would just enable these plugins and add the widgets to the sidebar. Well that is all find and dandy for most, but I wanted to customize their output a bit more. Ricardo did a great job documenting his functions he created for these two addons so that we can pass what we want and style things up too. Here are the two lines of code that I used in my sidebar to get Twitter and Delicious working.

Twitter
<?php twitter_messages('jpwalsh1', 1, false, true, "&raquo", true, true, false); ?>

Delicious
<?php delicious_bookmarks('jpwalsh1', 10, true, false, false, false, true, false, false, false); ?>

Ricardo’s documentation goes into detail on the options but you can see what it takes to get similar data to what I have showing up in my sidebar.

That just leaves us with getting the recent posts into the sidebar. After all of my looking I could not find any plugin that did what I wanted, which was expected. The default WordPress has a ‘recent articles’ widget that people use to get this effect, but I couldnt style it the way I wanted or control it as much as I’d like. That left us needing a custom solution.

I read through some of the documentation and found this wp_get_recent_posts() function that WordPress uses. That eliminated me from trying to figure out what kind of database queries I needed to write so I was happy.

Here is my final code for my recent posts section of my sidebar.

<?php
$rposts = wp_get_recent_posts();
foreach ($rposts as $rpost) {
  if ($rpost['post_status'] == 'publish'){
  print "
" . $rpost['post_title'] . "

\n";
  }
}
?>

To dive into that a bit. The call to wp_get_recent_posts returns all the data that we need, actually too much. It even returns articles that are in draft or scheduled states. That is where the next line comes in, filtering all of those out and only grabbing my published stories. My print statement is a bit butchered by this code formatting utility I have right now. But that is just formatting the list item in the way you see on the right here.

As you continue to customize sections of your WordPress site just keep grabbing files from your ‘unfinished’ folder and customizing them to fit your site. You may not need to customize or even use all of them, but hopefully this article has given you a little better understanding of what it takes to take your HTML/CSS mockup and convert it to a WordPress theme.

Admittedly, my theme conversion is still not done and there are many things left for even me to do. So you can also expect that tweaking is par for the course for a little while. This is just like any other type of designing in that the more that you do it, the easier and faster it gets each time. Feel free to leave comments or contact me on Twitter/Facebook if you have questions.

Read the rest of this series:
Sketch to Wordpress: Part II
Sketch to Wordpress: Part I