Titan 1.26 has been released and includes our new logo uploader as well as WordPress 3.0 menu support! Head over to the downloads page to grab your copy.

Titan PRO child theme updated to version 1.25

The Titan PRO child theme has been upgraded to version 1.25. If you have customized your PRO child theme please read through the upgrade instructions. If you plan on using the diff file, please note the vast majority of the changes have been made in the /functions folder. I would recommend replacing that folder entirely with the new version and using the diff file to make the rest of your changes.

Titan PRO child theme 1.25 diff file

Titan 1.25 Changelog

• New PRO Feature: Added an easy to use logo uploader!
• New PRO Feature: WordPress 3.0 menu support!
• Bug Fix: Fixed various translation strings.
• Bug Fix: Replaced several deprecated functions and options.
• Miscellaneous: Code cleanup changes.

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
• Optimizing Apache Server Performance
• Performance-tuning Apache
• 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.”

Important: If you are importing an extremely large database, over 5MB, you may suffer from a timeout and failed import. If this is the case you need to manually upload your data in parts. See Podz detailed instructions for restoring if you are having this problem

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.

Note: If you want to continue using your local installation you can keep your updated wp_config.php file and add the following lines of code to your local version of the file(this will override the two option values we changed earlier in phpMyAdmin):

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

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/default/ 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 15 and notice the call for your stylesheet URL:

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

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 XHTML 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 XHTML. 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 XHTML code chopped up into 4 (or more) different sections. For example, take a look at the layout and corresponding XHTML of this page. The header comes first, followed by the sidebar, then the content, and finally the footer. Instead of keeping these 4 parts of the XHTML 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 XHTML code and place some markers in the 4 places where you plan on cutting the code into 4 separate sections.

Note: These next steps assume you have your page set up left to right: header, content, sidebar, footer. If your page is ordered differently you will have to switch a couple of these steps around, but I am sure you can figure that out.

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 default theme we looked at earlier. Notice all the PHP that is used in between the <head> tags. You will want to keep most of this code. First, remove lines 18 – 29 and copy the rest of the <head> section into your new header.php file. Now open up your original XHTML 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 XHTML 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 XHTML 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. Look in your /wp-content/themes/default/ directory and open the file index.php file. Copy everything in between <?php get_header(); ?> and <?php get_sidebar(); ?> to your clipboard. Now paste it into your new theme’s index.php file inside of whichever div you are using to hold your content. 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.