Creating Your Own WordPress Theme Part 2

By Darryl

In Creating Your Own WordPress Theme Part 1 we talked about writing down what you would like your theme to include and then drawing some pictures of your website to get an idea of what it would look like. Today we’ll use those ideas and drawings and get into the actual coding of the theme.

The first thing we need to realize is there is no need to recreate a theme from scratch. The default theme (Kubrick) contains just about everything we’ll need, so we’re going to use it as a base for creating our new theme. Even though we’ll be making a few changes to the default .php files, the vast majority of our time will be spent creating and editing style.css.

Ok, so let’s get started. Go ahead and make a copy of the default directory under yourdomain/wp-content/themes.

Rename it to whatever you want your theme name to be.

Change to the directory you just renamed and open style.css in your favorite text editor. I prefer using either EditPad Pro or UltraEdit. You can use whatever you like.

Select the first few lines of the style.css file and copy them, then close the file. Rename style.css to style_old.css. We won’t be using it again.

Open a new file and paste the lines in the new file and change the information to reflect your new theme. Save the new file as style.css.

Now open the following files and delete class=”narrowcolumn” and class=”widecolumn” at the top of the file. Also verify that each file has get_sidebar(); at the bottom of the file above get_footer();. Don’t forget to add the php tags.

  • 404.php
  • archive.php
  • archives.php
  • attachment.php
  • index.php
  • links.php
  • page.php
  • search.php
  • single.php

Open functions.php and replace everything with this:

Make sure that there are no extra lines or spaces at the beginning or end of the file. This will give our theme the ability to have two widget areas.

To give you an idea of what you can do with widget areas, take a look at one of my other sites, DarrylD.com. There are 5 different widget areas on the home page so that information can be adjusted or changed with no editing of theme files.

Now let’s open header.php and remove < style type="text/css" media="screen" > and < /style > and everything between them. Remove the < hr > tag at the bottom of the file. You can also delete the < div id="headerimg" > and < /div > tags that are located in the < div id="header" > element.

Open footer.php and delete the < hr > at the top of the file and both lines that say: Gorgeous design by… and What do you think you are doing Dave?

Upload everything to your server (if you haven’t already), and select your new theme. Since there is no styling, it should look something like this:

Congratulations! You’ve just created a fully functioning theme. It may be ugly right now, but we’ll fix that next time.

Until then…

Tags: , , ,