With the release of Photography 1.2 the Gallery post type now includes built-in support for categories. Why is this useful? By default Photography shows all your galleries on one “Gallery Page”. With category support you may now create new gallery pages that only show galleries associated with a specific category. Our newest forum moderator, Mike Fields, wrote up an awesome tutorial on how to do just that. Thanks Mike! Before you get started, be sure to read through this tutorial: Customizing your theme → Editing a template file.

1. Create a new category and give it a name representative of the collection of galleries that you would like to create. I’ll be using “Nature Shots” as an example, but the name you use can be anything you like.
2. Assign all galleries that you wish to appear on your custom page to this category.
3. Now you will need to create a custom page template to display all galleries in this category on one page. Copy the file named gallery.php from the photography_pro theme folder into your PRO child theme folder. You will want to rename it as well. If the category you created has the title “Nature Shots”, I would suggest naming the template gallery-nature-shots.php. It’s a good practice to use only lowercase letters and the dash character (-) when naming files. Never use spaces.
4. Next you will need to change the name of the page template you just created. The template name is located at the top of the file and looks like this:

   /*
   Template Name: Gallery
   */
   

   You will want to give it a name that is similar to the name of the category you created in the first step. If the category was “Nature Shots”, I would suggest something like this:

   /*
   Template Name: Nature Shots Gallery
   */
   

   It’s a good practice not to use any punctuation here. Just use letters and spaces for best results.

5. Now you will need to adjust the query. The original query is located on line 8 and looks like this:

   <?php query_posts( 'post_type=gallery&orderby=menu_order&nopaging=true&order=ASC' ); ?>

   you will want to replace this line with the following code:

   <?php
   query_posts( array(
   'post_type'     => 'gallery',
   'orderby'       => 'menu_order',
   'nopaging'      => 'true',
   'order'         => 'ASC',
   'category_name' => 'Nature Shots'
   ) );
   ?>
   

6. Save your changes and upload the new page template to your server (if it isn’t already there). If you’re confused about uploading a file be sure to watch the video tutorial on how to use an FTP client.
7. Create a new page in WordPress by expanding the “Pages” tab in the admin menu and clicking the “Add New” link. Be sure to give the page a title similar to the category name. I used “Nature Shots”.
8. On the right-hand side of the screen, you should see a meta box with the heading “Page Attributes”. You will want to select the page template we just created from the “Template” dropdown. If you do not see this box, you will want to click the “Screen Options” tab (located in the upper right of the screen) and make sure that the “Page Attributes” option is checked.
9. Publish your page! Now add the new page to your menu via Appearance → Menus. When you visit the page you should see only the galleries that have been associated with the “Nature Shots” category.

Enjoyed this tutorial? Let us know in the comments. If you have any questions or problems please head over to the support forums and we’ll be happy to help you out.

We have had several requests in the Photography theme support forum for instructions on how to add captions to the main gallery page. By default, Photography shows a “featured thumbnail” image of a chosen photo from your gallery with no text. In this tutorial I am going to walk you through adding two different caption styles to your gallery page. Let’s get started!

Edit the gallery template

We need to add the gallery title to our gallery template by editing the /photography_pro/gallery.php file. Be sure to read through the editing a template file tutorial before jumping in. Open up your freshly copied gallery.php file and find the code below (starts on line 23).

      </a>
    </li>
  <?php endwhile; ?>
</ul>

Add the post title template tag just above the closing </li> and wrap it in an <h5> (shown below).

      </a>
      <h5><?php echo the_title(); ?></h5>
    </li>
  <?php endwhile; ?>
</ul>

Add basic styling

The gallery title will now show up on your gallery page underneath each thumbnail, but it doesn’t have any styling. We need to add some CSS to clean things up a bit. Be sure to read through the adding custom CSS styles tutorial before you make any changes.

Open up your /photography_pro_child/style.css file and scroll all the way to the bottom.

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
/* Example: Change the sidebar background to blue:
#sidebar {
    background: blue;
}
*/

Add some styling to the new <h5> element by replacing that code with the code below, which adds margin above the text, centers it, and makes it a bit larger.

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
li.g-thumb h5 {
    margin: 10px 0 0 0;
    text-align: center;
    font-size: 1.3em;
}

Add fancy hover styling

If you prefer a fancier “hover only” caption use this code instead.

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
#gallery ul li {
   height: 195px;
}
li.g-thumb h5 {
    display: none;
}
li.g-thumb:hover h5 {
    display: block;
    margin-top: -97.5px;
    font-size: 2em;
    line-height: 0;
    text-align: center;
    color: #fff;
}
#gallery ul li a:hover img {
    opacity: .25;
}

Here is a summary of each CSS property / value pair listed above.

1. Hide the <h5> tag by default.
2. Show the <h5> tag when hovering over the thumbnail.
3. Add a negative margin to center the text vertically on the thumbnail.
4. Increase the font size to 20px.
5. Zero out the line height so the negative margin we specified above works properly.
6. Center the text.
7. Set the color to white.
8. Turn down the opacity on hover so the text is more noticable.

Enjoy your captions!

These captions have been tested and are working in the latest versions of Firefox, Safari, Opera, and Chrome. The second hover method doesn’t look as great in Internet Explorer because it doesn’t support the opacity property (unless you are using the IE9 Beta).

A few months ago I re-designed all of the buttons here on The Theme Foundry website. In this tutorial I am going to walk through the button design process step-by-step.

Quick Overview

• Application: Photoshop CS4 (CS5 should work fine as well)
• Difficulty: Beginner – Intermediate
• Estimated completion time: 15 – 20 minutes

Step 1: Input your button text and adjust the canvas size

Create a new Photoshop document (set the background contents to Transparent) and enter some text for your new button. The font used in this example is Archer Bold. If you want a free alternative check out Museo Sans 700. Position the text in the center of the canvas by dragging it with the select tool and adjust the canvas size proportionately (Image → Canvas Size) to the size of your text.

Step 2: Create your button

Find the rounded rectangle tool and select it. Once the rounded rectangle tool is selected you will see some options in the toolbar at the top of the Photoshop window. Change the Radius to 6px and set the rounded rectangle to a Fixed Size that matches your canvas size exactly. To create the button simply click the middle of the canvas and re-position the rounded rectangle so it is centered (it should snap into place).

Step 3: Add a Gradient Overlay

You should now have a very plain looking rounded rectangle on top of your text. Re-arrange your layers so the text is on top of the rectangle (see image). Select the new shape from your layers panel and choose Gradient Overlay from the effects menu at the bottom of the layers panel. Now add a green gradient overlay by double clicking the left and right color stops one at a time (the two house shaped icons underneath the gradient bar). Set the left color stop to 2f9514 and the right color stop to 5bbf40. The button should now have a nice gradient green overlay and is starting to take shape!

Step 4: Add an Inner Glow

Without leaving the layer style panel check the Inner Glow box in the left column. In the Structure section set the Blend Mode to Overlay, drop the Opacity to 21%, and change the color to black (000000). From within the Elements section increase the Choke to 100% and reduce the Size to 1px. Click OK!

Step 5: Duplicate, re-style, resize

Duplicate the shape layer we just worked on by right clicking it in the layers panel and selecting Duplicate Layer. Select the new shape from the layers panel (should be called Shape 1 copy) and double click the Inner Glow style from the layers panel underneath the new Shape 1 copy layer. Set the color to white (ffffff) and increase the Opacity to 38%.

Click on the select arrow and then check the Show Transform Controls checkbox inside the toolbar at the top of the window. Now hold down Command (Control on Windows) + Spacebar to show the zoom tool. Use the zoom tool to drag a small box around the top-center transform handle. This will give us a close-up view of the button. Click and drag the top-center transform handle down like a window shade, revealing the original inner glow (see image below). While zoomed in scroll around the canvas and repeat this for the center-left transform handle, center-right transform handle, and center-bottom transform handle. The transform handles may be hard to find because they are sitting on the very edge of the canvas, so be sure to look closely. When finished click the checkmark in the top toolbar to commit the changes.

Step 6: Clean up the text

Zoom back out by holding down Command (Control on Windows) + 1. Double click the text box icon (big letter T) inside the “View My Portfolio” layer in your layers panel. Use the toolbar at the top of the window to set the text color to white (ffffff) and click the checkmark to commit the changes.

Add a drop shadow by clicking the effects button at the bottom of the layers panel (the same button you clicked earlier when adding the gradient overlay) and choosing Drop Shadow from the list. Reduce the Opacity to 15% and reduce the Distance and Size to 1px.

Step 7: Add a drop shadow to the button

Select the original shape from the layers panel and and a drop shadow by clicking the effects button at the bottom of the layers panel. Set the Opacity to 15% and the Distance and Size to 2px. Increase the size of the canvas by 5px on each side to make room for the new drop shadow.

Step 8: Save and enjoy!

Save your new button for the web by choosing “Save for Web & Devices” from the File menu (I recommend saving it as a 24 bit transparent PNG) and start using it on your site. If you enjoyed this tutorial or want to share some feedback drop a line in the comments.

Download the source files

Terms of use: You may freely use these files without restriction. No attribution or backlinks are required, but you are one cool cat if you leave a link. You are not permitted to make these files available for distribution elsewhere without prior consent.

Download the slides

I presented a theme customization workshop at WordCamp Orange County earlier this year. The workshop covered 6 theme customization “best practices”. Unfortunately, the video is a bit stretched and not completely clear at times, but it still should be helpful if you are new to theme customization.

New video library coming soon!

I am currently working on a video tutorial library for our members. The new library will include screencasts detailing some of these best practices and how to use them effectively with our themes. Stay tuned!

Why lifestreaming?

Lifestreaming fosters a more direct, personal, and valuable relationship with your readers by making your blog more open and “real”. Your blog is your mothership and microblogging is a great way to keep your mothership unique and fresh.

Can I do it with WordPress?

I took a look around and there are a few plugins that provide this functionality along with a theme or two that have it built in. If you like the themes that offer this functionality then by all means go grab one of those and get microblogging! When it comes to plugins I am a big believer in home-rolling your own solution if it isn’t too hard. This has three distinct and important advantages over using a plugin:

• Speed: Your blog uses fewer resources, staying light and quick.
• Future-proof and reliable: Fewer moving parts, less likely to break.
• Worry Free: Avoid worrying about unsupported/outdated plugins.

As you can see, I think a custom solution is the clearly the best way to go. Let’s learn how to set up our lifestream inside a basic WordPress theme sans plugins.

What we need

The first step is to determine what new types of posts you want to include in your lifestream: photos, links, quotes, etc. For this example we are going to use links but you can replicate this same functionality in any of the above categories.

Here are the two important pieces we need implement to get up and running:

• Post Setup: Create a publish a post for our new links category.
• Presentation Layer: Present readers with a unique view of posts in our special links category.

Post Setup

Below are the quick and easy steps for creating your new post:

1. Log in to your WordPress admin panel and create a new post.
2. Add a new category called links and make sure the box is checked for that category.
3. Add a new custom field to the post by scrolling down to the Custom Fields section of the post editor. For the Name use link and for the Value type a test URL.

Now your post is ready, go ahead and publish it. If you were following these steps for something else, like quotes or photos, name your category and custom field appropriately (eg. quotes or photos).

Presentation Layer

For the presentation layer we need to focus on two template files: index.php and single.php. Open up your theme’s index.php template file and look for the loop.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
  <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
    <div class="entry">
      <?php the_content('Read the rest of this entry »'); ?>
    </div>
    <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
  </div>
<?php endwhile; ?>

We need to tell WordPress to display our links category posts differently on our homepage. We also want to style the post title differently to indicate it is a link, not a regular blog post. Let’s do just that by replacing line 4 (which displays the post title) with this:

<?php if ( in_category( 'links' )) : ?>
  <div class="link">Link</div>
  <h4><a href="<?php echo get_post_meta($post->ID, 'link', true); ?>" rel="bookmark"><?php the_title(); ?></a><span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">#</a></span></h4>
<?php else : ?>
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>

Below is a line-by-line breakdown of the code we just inserted.

1. If we are in the category named links.
2. Output a basic div containing the word “link” that we can style later. This is to notify readers that this post is a link and not a regular blog post.
3. Output the link we specified in the Custom Fields section of our post and a hash (#) linking to our original post. The title of our post now links to the external link instead of the blog post itself.
4. If we are not in the category named links use this code instead.
5. Output the normal post title wrapped in a link to the original post.
6. End the If statement.

We need to repeat the same process for the single.php template.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
  <h1><?php the_title()?></h1>
  <p><?php the_tags('Tags for this entry: ', ', ', '.'); ?></p>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="entry single">
      <?php the_content(); ?>
    </div>
    <p class="postmetadata">This entry was posted by <?php the_author() ?> at <?php the_time('g:i a') ?> on <?php the_time('F jS, Y') ?>.</p>
  </div>
<?php endwhile; ?>
<?php comments_template('', true); ?>
<?php else : ?>
<?php endif; ?>

Let’s replace the post tags (line 4) with a message to visit the external link.

<?php if ( in_category( 'links' )) : ?>
  <p>Visit this link:<br /><a href="<?php echo get_post_meta($post->ID, 'link', true); ?>" rel="bookmark"><?php echo get_post_meta($post->ID, 'link', true); ?></a>
<?php else : ?>
  <p><?php the_tags('Tags for this entry: ', ', ', '.'); ?></p>
<?php endif; ?>

The code we just inserted will display the external link when we are in the links category and the tags for the post when we are not.

Ready to rock!

Now use your finely tuned CSS skills to get everything looking great and you are ready to rock!

Bonus Tip: WordPress provides category specific feeds out of the box, so why not use them? Your readers will have the option to pick and choose what part of your lifestream they want to follow.

Trim Down Those Modules

Open up the httpd.conf file on your server in your favorite text editor and look for a bunch of lines starting with LoadModule. It should look something like this:

# Example:
# LoadModule foo_module modules/mod_foo.so
# LoadModule auth_basic_module modules/mod_auth_basic.so
LoadModule auth_digest_module modules/mod_auth_digest.so
LoadModule authn_file_module modules/mod_authn_file.so
LoadModule authn_alias_module modules/mod_authn_alias.so

The actual list will be much longer but you get the idea. You can disable these modules by “commenting them out”. Which essentially amounts to adding a # in front of the line like so:

# LoadModule auth_basic_module modules/mod_auth_basic.so

You are going to disable a bunch of these modules that a basic WordPress website does not require. In fact, I want you to comment out every module EXCEPT FOR the following:

LoadModule authz_host_module modules/mod_authz_host.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule expires_module modules/mod_expires.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule mime_module modules/mod_mime.so
LoadModule autoindex_module modules/mod_autoindex.so
LoadModule dir_module modules/mod_dir.so
LoadModule alias_module modules/mod_alias.so
LoadModule rewrite_module modules/mod_rewrite.so

One of the lines you probably commented out was this one:

LoadModule negotiation_module modules/mod_negotiation.so

This provides some functions for auto-completing mistyped URL’s that you don’t really need. It also is required if you are serving multilingual pages. If that is the case then DO NOT comment out the above module.

If you did in fact comment out the mod_negotiation.so module you will need to make a couple more tweaks. Find these two lines (they are in different locations) and comment them out:

LanguagePriority en ca cs da de el eo es et fr he hr it ja ko ltz nl nn no pl pt pt-BR ru sv zh-CN zh-TW

ForceLanguagePriority Prefer Fallback

You should see a significant performance boost after disabling those modules. They were eating up a good size chunk of your limited system resources.

Apache MPM Prefork Module

Another handy tweak is to make some adjustments to the Apache MPM prefork module. This is assuming you are using Apache in prefork mode, which is highly recommended and likely if you are on a small VPS.

This module controls the number of processes and spare processes Apache will start and run. This is especially important if you are running a small VPS that is handling MySQL and Apache. Unless you are getting slammed with really heavy traffic on a regular basis (in which case you should be on a dedicated server) there is no need to be running the default configuration. Find these lines in your httpd.conf file:

<IfModule prefork.c>
StartServers       8
MinSpareServers    5
MaxSpareServers   20
ServerLimit      256
MaxClients       256
MaxRequestsPerChild  4000
</IfModule>

MinSpareservers and MaxSpareServers control the number of spare processes your webserver is permitted to run and StartServers controls how many are started by default.

ServerLimit controls the maximum configured value for MaxClients. Reducing MaxClients on a webserver that is serving dynamic content (e.g. WordPress) can make a big difference. If you experience a traffic spike on your VPS and your MaxClients is set too high your server will more than likely get stuck in an endless loop of swapping pages from physical memory to virtual memory, commonly referred to as thrashing. The accepted way of calculating an appropriate MaxClients value is dividing your total available system memory by the size per Apache process. For example, if you had a 500MB left for Apache to use and each Apache process was using around 10MB you would set your MaxClients to (512-12) / 10 = 50. To check real time memory usage on your VPS use top.

MaxRequestsPerChild limits the number of requests a child server will handle during it’s life. We can safely reduce this value and realize a small gain.

So let’s go ahead and pare down those values:

<IfModule prefork.c>
StartServers       3
MinSpareServers    3
MaxSpareServers   10
ServerLimit      50
MaxClients       50
MaxRequestsPerChild  2000
</IfModule>

Remember these are not concrete “best” values, they depend on the size of your VPS and how small or large you Apache process is.

Optimize Your KeepAlive

KeepAlive allows your visitors to issue multiple requests over the same TCP connection, in theory this helps improve latency because your visitors can request your webpage, images, and javascripts all over one connection. Unfortunately, Apache must use a worker process to service each and every request. The worker process stays busy servicing each request for a full 15 seconds by default, even if your visitor is no longer using it! This means you have less worker processes available on your system at any given time. With the limited system resources you have on your small VPS we always want open worker processes to be actually working. One way of accomplishing this is turning off KeepAlive. Find this line in your httpd.conf file:

KeepAlive On

and change it to:

KeepAlive Off

If you have a site with lots of images and javascripts it is usually better leave KeepAlive turned on and make some additional tweaks.

If you decide to leave KeepAlive turned on it is important you change the default KeepAliveTimeout value. This prevents unused connections from staying open for excessive amounts of time. Find this line in your httpd.conf file:

KeepAliveTimeout 15

You want to leave this connection open for 2 seconds, just long enough for the client to request most if not all of the necessary files. So change that line to:

KeepAliveTimeout 2

If you are going to leave KeepAlive on you will want to increase MaxKeepAliveRequests. Setting this higher allows more requests per connection and increases efficiency. Find this line:

MaxKeepAliveRequests 100

and change it to:

MaxKeepAliveRequests 200

Adjust Timeout

Another minor tweak that will give you a small performance boost as well as help reduce the effects of a DOS attack is changing the TimeOut Directive. This directive tells Apache how many seconds to wait while receiving an incoming request, processing it, and sending back a response. Find this line:

Timeout 120

and change it to:

Timeout 40

Restart Apache and Enjoy!

Now restart Apache and enjoy your performance boost! Always remember to backup your httpd.conf file in case something goes wrong. Keep in mind this is just a sample configuration and we aren’t responsible if it breaks something on your server.

Additional Resources

• Tuning Lamp Systems, Part 2: Optimizing Apache and PHP
• Apache Performance Notes
• Apache Performance Tuning
• Choosing MaxClients
• Tuning the Apache MaxClients parameter

Important: You will need Vigilance 1.1 or later for the child theme to work correctly. If you are running an older version of Vigilance, upgrade now.

Step 1: Download

Download this basic child theme for Vigilance:

Vigilance Child Theme

Step 2: Unzip and Upload

Unzip and upload this theme into your wp-content/themes directory just as you would any other theme.

Note: The theme must be in it’s own directory, just like any other theme, e.g. themes/my_vigilance

Activate the Child Theme

Step 3: Activate

Log in to your WordPress installation and click Appearance then Themes. Find the child theme, it will look like the image on the right. Click on the theme and activate it.

Step 4: Customize

You can now make all of your custom CSS changes from within the child theme. Simply edit the style.css file. You can find it in your /themes/myvigilance folder. You can also add custom functions and template files. These changes will work as long as you have the child theme activated.

How It Works

Your new child theme inherits all of the templates and styles from the parent theme (Vigilance in this case), but any styles added in the style.css file in the child theme’s folder will override any default theme styles. You may also include custom functions by adding them to the included functions.php file. When WordPress 2.7 is released you will be able to use custom templates in your child theme. . You can now use custom templates in your child theme.

Here is a simple, easy to implement PHP file you can use to generate a list of recent posts in your custom “non-widgetized” sidebar.

Download this file: recent_posts.php. Now, upload it to the wp-content/themes/yourtheme directory, and insert the following code in your sidebar.php file where you want your recent posts list to appear:

<?php include (TEMPLATEPATH . "/recent_posts.php"); ?>

If you open up recent_posts.php in your favorite text editor you have the ability to change how many posts you want to display. You can also be more specific in what posts you want to display by passing different arguments to query_posts.

Export Your Database

First, we need to export your local XAMPP MySQL database. While XAMPP is running, navigate to http://localhost/phpMyAdmin/. Next, click on the database name you want to export in the menu on the left. Your database tables should be displayed and you should see some tabs running across the top. Click the export tab at the top.

Make sure you check the “save as file” box and then click the go button in the lower right. This will create an .sql file for us to import later. Remember where it is saved.

The Import

1. Log in to your hosting account or your webserver and create a new MySQL database for WordPress, call it whatever you want.
2. Once you have created your new database, find PHPMyAdmin, and open it.
3. Click the name of the database you just created from the dropdown menu.
4. At the top of the screen it should say “Server: your_server(probably localhost) Database: your_database_name”
5. Click the Import Tab.
6. Now click the Browse Button and browse to the location where you saved your *.sql file in the first part of the tutorial.
7. Click Go at the bottom.
8. You should get a message at the top stating: “Import has been successfully finished, XXX queries executed.”

A couple quick changes

Now we need to make a couple quick changes to the database. Click on the Structure tab at the top and then click the little picture in the wp-options row as seen below.

You should now see a list with a column showing all of the option_name values: siteurl, blogname, blogdescription, etc. You need to change two of them. The first is the very first option, siteurl. Click the little pen button on the left side of the siteurl table row. It is directly to the left of the big red X. You should now see something similar to this:

Type your new blog URL in the big text box. Important: Make sure you do not add a forward slash / at the end of the URL.

Click Go.

Your siteurl row should now display your new blog URL instead of localhost or whatever IP address it was showing before.

Now you must repeat this same exact operation on a different option row with the option_name of home. You may have to use the pagination to view the second page of option rows to find it. It is option_id #39 on a normal WordPress install.

Your new database is now ready to go, exit PHPMyAdmin.

Edit, Upload, and Go!

Browse to your local WordPress installation.

Open up your wp-config.php file and input the MySQL details (username, password, etc.) of the new database you created in the previous step.

Save and close wp-config.php.

Upload the ENTIRE contents of your local WordPress folder to the new location on your webserver. This new location should must be the same one you used in the first part of this tutorial when changing the siteurl and home values in phpMyAdmin. This is important. If the locations are different, it will not work.

Your done, navigate to your new “live” WordPress powered website and enjoy.

//*Set Path
define('WP_HOME', 'http://localhost' );
define('WP_SITEURL', 'http://localhost');

When I first decided to convert a static HTML design to WordPress I did some searching for a tutorial to help me get started with the basics. Surprisingly, I didn’t find anything that was very complete or easy to follow. For that reason I decided to write a very basic tutorial on how to convert a static HTML template into a WordPress Theme. If you are an absolute beginner at developing WordPress themes then this should help you get started. This tutorial assumes you already have a basic understanding of HTML and CSS. It also assumes you have a website built in HTML and CSS and have it ready for conversion.

How WordPress Works

WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your content from the database management system it stands on. For example, look in your /wp-content/themes/twentyten/ directory and open the header.php file. As you scroll through the code notice the PHP calls, they start with a <?php and end with a ?>. Look at line 37 and notice the call for your stylesheet URL:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

This line uses PHP to look-up your stylesheet’s location from the database. This basic function of retrieving or calling some kind of data from your database and using PHP to display it in your HTML is how WordPress works. Throughout this process you will be substituting PHP for different parts of your content and your code. This will make editing easier in the long run, as you will find out. Now that you understand the basics of how WordPress works, lets get started.

First Things First

The first step is to create a new folder and name it whatever you want your theme to be called. Next, create two new files, style.css and index.php and place them in the folder. Believe it or not, these are the only two files you actually need for a WordPress theme. Now copy and paste the code from your original CSS file into the style.css file you just created. At the top add the following code:

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

These comments simply help WordPress properly identify the theme. Your stylesheet is now ready to go.

Chop It Up

Now let’s start chopping up your HTML. Remember how we talked about WordPress using PHP to call data from your database? Well WordPress can also use PHP to call different files from within your template folder. Imagine your current HTML code chopped up into 4 (or more) different sections. For example, take a look at the layout and corresponding HTML of this page. The header comes first, followed by the content, then the sidebar, and finally the footer. Instead of keeping these 4 parts of the HTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.

So go ahead and sort through your HTML code and place some markers in the 4 places where you plan on cutting the code into 4 separate sections.

Now create 3 new files (header.php, sidebar.php, footer.php) and place them in your theme directory. Next take a look at the header.php file from the Twenty Ten theme we looked at earlier. Notice all the PHP that is used in between the <head> tags. Copy that code to your new header.php file. Now open up your original HTML file and copy the code you marked off for your header (1st section) into your new header.php file (underneath the <head> section). Save and close.

Now open up your new index.php file. Copy the second part of your original HTML code, the content (2nd section) into your new index.php file. Save and close.

Getting the hang of it?

Next open up your new sidebar.php file, copy the sidebar (3rd section) of your original code into the sidebar.php file. Finally, copy the original footer (4th section) of code into your new footer.php file.

Put It Back Together

Your original code should now be chopped up into 4 different files (header.php, index.php, sidebar.php, footer.php). Let's put it back together using a few lines of PHP. Open up your index.php file, it should contain the HTML from the content (2nd section) of your original code. Add this line at the very top of the file:

<?php get_header(); ?>

Now go to the absolute bottom of your index.php file and add these two lines:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is now officially put back together. Now, if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.

The Loop

Your index.php is almost finished. The final step is to insert the actual content into the code. Luckily, WordPress uses PHP for this as well. The Loop is the PHP function WordPress uses to call and display your posts from the database they are saved in. Grab this code and paste it into your new theme's index.php file (inside of whichever div you are using to hold your content).

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
        <div class="date"><?php the_time( 'M j y' ); ?></div>
        <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
        <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
        <?php the_content(); ?>
        <?php edit_post_link(); ?>
        <?php wp_link_pages(); ?>
    </div><!--end entry-->
    <div class="post-footer">
        <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
  </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
  <div class="navigation index">
    <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
    <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
  </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

You just inserted a basic version of the loop into your code! WordPress will use the loop to display your posts and comments on your website.

The End

Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme. Wasn't that easy?

This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at the WordPress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possibilities for customizing your new WordPress blog.