How To Build A WordPress CMS Theme – Part 2: Let's Get Started

Last time in Part 1: Theme Basics we learned the very basics of what WordPress themes are, what files they include and how to put them together. This time, we’ll learn how to get started with your very own themes.

Chapter 4: Adding The Theme To WordPress

The first thing you should probably do before you start coding is to get the theme set up in WordPress. If you navigate to the Appearance section in the WordPress admin left side menu, and then click on the Themes link, you’ll see a list and preview of each theme that’s currently installed. If you’re working in a fresh version of WordPress, it will just have the default Twenty Ten theme listed.

As you can see, each theme in this section includes a thumbnail, the name of the theme, a short description and the link to the author’s homepage (or site of choice). When doing professional themes, it’s important to actually fill out this information so it’s unique to each theme. This allows the client to be able to choose between themes and figure out what is what.

First thing first though, name the folder containing the theme files something relevant. Do not just edit off the default folder and files, as these will be replaced in major upgrades and your work will be lost! For example, let’s say our client’s name is Chrissy’s Cakes. Give the folder a name of something like ‘chrissy’ or ‘crissy-cakes’ or something else that’s identifiable by someone who’s not you.

Now, to edit our information in the Themes menu, open your style.css file. At the top of the file, there needs to be commented information at the top, otherwise WordPress will not recognize it as a theme:

/*
Theme Name: NAME OF THEME
Description: This theme was coded for CLIENT by YOUR NAME.
Author: YOUR NAME
Author URI: http://www.YOURURL.com/
 
*/

Once you fill in the information above, save the style.css and reload the Themes menu, and voila! Your information is now there.

Changing the thumbnail next to the theme’s information is even easier. Simply save a 300×225 png or jpg image file, name it as screenshot.png(jpg) and save it into the top directory in the theme folder (not inside of the images folder). WordPress will automatically grab it for you and update the thumbnail.

See how easy it is to get a professional looking theme already?

Chapter 5: Starter Theme or Not?

After coding up several themes, you’ll start to notice that not only is a bunch of the code the same between sites, but you’ve probably saved a ton of WordPress related snippets somewhere that you use on almost every site.

The easy way to fix this is to start with a “template” theme, or one that has the basic code in each file that you usually use. I personally use my own theme, which I made available for free, called Hijinks. While I won’t say that I recommend using mine, I do recommend making your own.

However I don’t recommend using a commercial framework such as Thesis, or a CSS framework like YUI or the others. There’s simply too much bloated, unnecessary code that will actually slow you down in development.

Chapter 6: The Header File

While the header.php can differ between developers, there’s normally a standardized set of data that’s included inside each one. Here’s the header from HIjinks:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
 
<div id="header">
		<?php wp_nav_menu( array('menu' => 'Main', 'container' => false, )); ?></div>

As you can see, it’s pretty short thanks in part to using HTML5. We can start to see some basic WordPress functions as we approach the title attribute. These functions will print out the name you gave the WordPress blog during installation, as well as what section the user is on.

Moving on, we see functions for the stylesheet, pingback and comment replies. These will never change and aren’t really important enough to explain, just know that they need to be in the header file.

Now on to the wp_header() function you see at the end of the head section. This function must also be included in the header file, especially if you plan on installing plugins. In fact, you should leave it there even if you don’t plan to use plugins, as the client probably will at some point. The wp_head is a hook, that allows plugins to input necessary code to include files and scripts to allow the plugins to actually work.

While not necessary, I also include the normal header div and a call to a WordPress Menu. The WordPress Menus are new to WordPress 3, and allow you to create custom navigations from your posts, categories, pages, or even custom taxonomies, post types and custom links.

The wp_nav_menu has several parameters you can use. Here I decided to call my menu ‘Main’, which needs to be the same name that I created under the Menu section in the admin area. By setting the container to false, I’m telling WordPress that I don’t want it to be surrounded with a container div, since it’s already surrounded with a header div, and the ul will have an ID and several classes. We don’t want any divitis here.

In order to start making Menus, you’ll also need to add a small bit of code to the functions.php file, which tells WordPress to open up the Menu section in the admin area:

<?php add_theme_support( 'menus' ); ?>

Chapter 7: The Footer File

The footer file doesn’t actually contain anything important to the theme besides one more hook for the functions file, that needs to be placed before the closing body tag, and after any script files you’ve manually included.

<?php wp_footer(); ?>

Time for a breather!

Next week, we’ll start going into more depth about the actual code and functions you’ll use to make WordPress really run! In the meantime, feel free to ask any questions below about today’s lesson. Enjoy! 🙂