Building a wordpress theme without the heavy lifting (Part I)

This article will cover the converting of a static web site design into WordPress without, as the title says, lifting heavy loads.

Is it possible? Well yes, if you’ve got the moves, the tools and know what you’re doing and you have Branko, Ivan and Tomislav at your side to help when you get stuck in that coding jungle :p.

This article is targeting wordpress users that are comfortable with HTML&CSS and have a need to convert their static sites into a dynamic CMS.

We’ll call our wordpress wannabe site “Adios” and you can use the these files to follow along.
The theme was of course found on Smashingmagazine and it’s valid from top to bottom.

Step 1:

  • Preparing the terrain:
    • a) In your WP folder go to: wp-content->themes-> and duplicate the Default Theme
    • b) Rename it to “adios
    • c) Stop! Have a good look at the files inside that folder:

WP theme folder.png

What’s inside a theme folder?

Note: that first file is not a part of WordPress, it belongs to “Espresso” application I’m using so ignore it. (Not the application of course just the file).

Let’s explain most but not all of the files:

  1. index.php – The main file. If your theme provides its own templates, index.php is a must.
  2. style.css – It’s the main stylesheet for our theme. This of course is obligatory too.
  3. header.php – This is where the header of the site will reside. In terms of wordpress this is the part of the site that will be included into every post and/or page just like the:
  4. footer.php – Like the header.php appears on every page and/or post
  5. single.php – As the name suggests is the single post template. This one belongs to the query templates like the “page.php” or “comments.php” etc. (If they aren’t present in the theme folder, wordpress will use the “index.php” to display the content.)
  6. comments.php – You’ve guessed it, this one displays comments and it overrides the wp-comments.php.
  7. comments-popup.php – The same case with this one. it overrides the wp-comments-popup.php
  8. page.php – The one you’re looking for, the one that turns wordpress into a CMS and you can have them as many as you like. We’ll cover that too. Also belongs to the query templates.
  9. category.php – Displays post categories. Used when a category is queried.
  10. archive.php – The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
  11. search.php – The search template. Used when a search is performed.
  12. 404.php – The 404 Not Found template. Used when WordPress cannot find a post that matches the query.

Before we start assembling our site inside the wordpress, it’s extremely important to change the following in the theme’s stylesheet (style.css) and to create a screenshot of that theme.

If you miss that part of the theme development, wordpress will hunt you down:) Actually it simply will not recognize your theme.

Open up the “style.css” file and change the following accordingly:

/*      Theme Name:  The Name of your theme
*        Theme URI: The URL where people can get more information
*        Description: Description
*        Version: 1.0
*        Author: Your Name
*        Author URI: Designers’ URL
*        Tags: red, black, widget-ready (etc)

After you’ve changed the info above, take a screenshot of your static site and resize it nicely to 240 x 180 px and then overwrite the screenshot.jpg in your theme’s folder.

This image will represent your theme in the backend alongside the info you’ve entered in the “style.css“.

Stefan Vervoort wrote a very useful article called “WordPress Theme Development Checklist” so check it out.

Here’s our theme in the backend:


That’s it. Now we can move on to the step 2.

Step 2:

This part will cover the “header.php” and “footer.php” customization:

  • Analyze the static site’s code structure
  • Decide which part of the page will be placed inside the header.php and footer.php as these will be are main files included into every page/post.

Let’s take a look at our HTML at hand:

The source code of the index.html file bare essentials:


As we see the code is very easy to assign to the wordpress templates. We have the “header“, “body” and “#header” tags which will go into the wordpress’ “header.php

Then we have the “#footer” which we’ll put inside the “footer.php” with the closing body tag.

Don’t worry, we’ll cover that in the following part of the article:

The middle part, the “#page” will be put inside the “page.php“, “index.php” or “home.php” since it includes the “header.php” and “footer.php” thus rendering the whole page in the browser. We’ll do that after we finish the “header.php” and “footer.php“.

What now? You can now open the header.php and footer.php from our newly created theme folder and have a look inside. We’ll remove some of the code in both files before we “paste” ours while leaving most of the wordpress code.

the header.php


First things first:

  1. Take a good look at the code
  2. There’s a lot that we don’t need here so let’s remove those first

We’ve removed parts of the  of the code that are not needed:


…and changed the the info about our theme within the comments at the top of the page as you can see in the code view below:

Now we can put our code in the “header.php” immediately before the beginning of the body tag.

Which part of the code?

The one that will repeat on every page, blog post etc.

It should look like this:


Now, will put the code inside the “footer.php” which will close the body and page tag which wraps all of the code.


Step 3:

The next thing we need to do is to create a “home .php” file by duplicating the “page.php” file and customize the code there.

Here’s the the “home.php” with the default content:


The next part is consisted of deciding which part of the content will be entered through the admin interface and in this case the code for the “home.php” looks like this:


Now that we’ve assembled our front page html structure and integrated the wp functionality, what’s left is to place all the images from our HTML template into themes images folder and insert the css code into the style.css minding the paths to the images.

Now when we look at our theme selection in the backend and click on our themes picture a modal window pops up and gives us a choice to select the theme to be the default look and feel of our site:


All we need to do now is to set WordPress to display our page instead of the blog posts.

Go to the SettingsSettings -> Reading and at the “Front page displays” select the “A static page (select below)” radio button and the “About” page from the drop down menu. Go visit the site and behold. Yes, the sidebar needs some styling 🙂

That’s it for now. In the second part of the article we’ll cover page templates, how to display pages content, dynamic navigation that is missing from the header  etc…

You made it all the way down here so you must have enjoyed this post! You may also like:

TWIG with wordpress part2 Darko Goles
Darko Goles, | 8

TWIG with wordpress part2

TWIG with WordPress part1 Darko Goles
Darko Goles, | 1

TWIG with WordPress part1

Our New Design is Nominated for CSS Design Awards Lyssandro Reis
Lyssandro Reis, | 7

Our New Design is Nominated for CSS Design Awards


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.