Converting your HTML into a WordPress Theme:Part 1

WordPress This is the 3rd post in my series on Designing WordPress Blogs From Scratch.

Okay, so you’ve got your snazzy new blog designed in a webpage. You’re happy with how it looks in all the browsers. You’ve got your styles in their own CSS file and your HTML is laid out with the default WordPress DIVs like in the pretty picture below:

DIV breakdowns in the default WordPress layoutGreat!

Now you’re ready to WordPress-o-tize it.

The first thing you want to do is grab the files from the WordPress default theme because, as they say, good artists borrow, great ones steal.

Create a working directory named however you want to name your theme (e.g., “BobsBlogOPassion”) and copy all the files from WordPress’s \wp-content\themes\default directory into it*.  We’ll use these files to guide us.

* If you haven’t got a WordPress install yet, you can install it on your server (I use a web hoster, Applied Innovations, who provides a nice 1-click install for it) or even on your local computer if you want a version to play/test with (Windows, Unix). Note that the free WordPress.com does not allow installing custom themes, so you’ll need your own server/hoster for this.

CSS Files

In the working directory you created, delete the .css files from the default theme and put your own CSS file into this directory.  Name it styles.css.

Header.php

The header will be included at the top of every page and contains:

  • Opening <html> tag
  • <head>, containing some generic initialization
  • Opening <body> tag and the opening <div id=”page”> tag (all content will go into page, see picture above)
  • <div id=”header”>, containing your footer content

Keep everything above the <div id=”header”> line except remove the PHP block (lines 22-29) with the sidebar check. That gives us the generic initialization to set things up for WordPress.

Replace the insides of the <div id=”header”> with your own header DIV content. Before you do this, however, note the PHP tags provided as you may want to use them yourself (remember PHP code goes inside <?php … ?> tags):

  • echo get_option(‘home’) Use this to get the URL to your home page (e.g., if your header image or title links back to the home page, put this inside of your <a href=”…”> , as is done in the default header.php)
  • bloginfo(‘name’) Displays your blog’s name (as you specified in WordPress admin console)
  • bloginfo(‘description’) Displays your blog’s description (as you specified in WordPress admin console)

A couple of things to note:

  1. Always try to use functions like these to retrieve your blog’s info and URLs rather than hard coding them into the HTML. It’s a pain up front, but will save you much grief down the road.
  2. Some functions, like bloginfo(), automatically write their output into the webpage. Other methods, like get_option() simply return their value (e.g., so you could store it in a local variable). For the latter types of functions, you can use the PHP function echo to cause the value to be written into the HTML returned by the server.

Note: Some WordPress functions actually have 2 versions: 1 that echos its value (bloginfo() ) and another, similarly named function (get_bloginfo()), that returns it’s value.

You’ll also note as you edit the PHP files that each one has a comment block at the top with the theme’s name in a @subpackage annotation, go ahead and replace Default_Theme with your own themes name in each case.

Footer.php

The footer will be included at the bottom of each page so includes your footer DIV and your closing BODY and HTML tags.

Replace everything between the PHP comment block at the top (which provides your theme name) and the closing DIV/BODY/HTML tags with your own footer DIV.  So your footer.php should end up as:

  • PHP comment with your theme name
  • <div id=”footer”>, containing your footer content
  • Closing </div> tag for the page DIV (which you’ll note was opened in header.php)
  • Closing </body></html> tags

Sidebar.php

Generally the sidebar is included with every page (although you do have the option to omit it from some – or all – pages if you chose.  We’ll see this when we look at index.php).

There is a lot in the default sidebar. To start, I recommend replacing everything after the PHP comments block. So your sidebar.php should end up with:

  • PHP comment with your theme name
  • <div id=”sidebar”>, containing your sidebar content

And then replace any dynamic data (like tag/category/archive lists) and functions (search/login) with the appropriate WordPress functions. Here are some common ones (you’ll find many in the default sidebar.php to see their usage):

  • get_search_form() Includes a functioning search form. Edit the file search.php if you wish to customize it’s look.
  • Navigation Links: WordPress provides a number of functions to get lists of things readers might want to find:
    • wp_list_categories() – lists your blog’s categories as links to view all posts in each category
    • wp_tag_cloud() – gives you a cloud of your blog’s tags (note posts can have both category(ies) & tag(s))
    • wp_get_archives() – displays links to view your posts by year, month, week, or day
    • wp_list_pages() – lists pages (for things like “about” pages you might have added to your blog)
    • wp_list_bookmarks() – displays any links you defined for your blog in the admin console (think: blogroll)
  • echo get_permalink(post#) echos the URL for a specific post so you can link to it (you can see a post’s ID in the WordPress admin console)
  • wp_register() allows users to register for an account on your blog (e.g., so they can post comments)
  • wp_loginout() displays a login link if the user is not logged in, or a logout link if they are.

Check out the documentation for the parameters to each function, many of these are impressively customizable. Everything described here is available in WordPress 2.9. WordPress 3.0 (now in beta) will include some nifty new features that we may want to add as well to our headers, footers, and sidebars.  Take a peek at the “most important” new features.

Hopefully this gets you started. In the next post, I’ll talk about how the actual blog content (either an individual blog post or a list of posts) gets displayed with index.php and it’s offshoots. And in a later post I will get into some of the advanced sidebar/footer features you might want to include such as twitter feeds and Top Commenters (much of which will come from either plug-ins or creating your own PHP functions so I’ll try to cover both of those).

—
Photo Credit: WordPress Logo: Simple Thoughts

Do you want to push the edge on what's possible?

Abby Fichtner works with some of the world's top organizations and universities to incite creativity and spur extraordinary results.

Whether you're looking to foster innovation, create a 21st Century workplace of engaged employees, or become a change leader in your industry -- bringing in an expert who's helped hundreds of companies do the same is a brilliant way to accelerate your results. Bringing excitement and fresh perspectives to rally your entire organization in your growth and success.