Behind every WordPress blog is a theme that controls the look and layout of the blog. As I explain in “Make a Website, Changing the Look and Layout with a WordPress Theme,” you can change the entire look and layout of your WordPress blog by installing and activating a different theme.

Every theme contains one or more CSS (Cascading Style Sheets). Each stylesheet contains codes that tell Web browsers how to display particular elements on your blog, including text, images, sidebars, headers, and footers. CSS codes are structured something like this:

selector { property: value; }

The selector indicates the element that the style applies to (such as a heading, paragraph, or image), the property defines the aspect of the object that will be modified (such as its color or alignment), and the value defines the setting for the property (such as blue or center). Here’s an example:

h3 {color: #0033FF; font-size: 22px; font-family: Arial; padding-bottom: 20px; }

This “style” tells Web browsers to display any text formatted as a Heading 3 (using the HTML tag <h3>) as blue, 22 pixels, Arial followed by 20 pixels of blank space below it.

As you’re composing blog entries, any text you format as a Heading 3 will be formatted according to the CSS property values assigned to it. You can change the appearance of all Heading 3 items in your blog simply by editing the h3 entry in your blog’s stylesheet as explained later in this post.

Tip
For a list of CSS properties and values associated with each property, check out the W3 School’s CSS Reference.

Understanding CSS Selectors

A CSS selector indicates the type of object each property value is applied to. Common selectors include…

• p for paragraphs
• img for images
• h1, h2, h3, h4, h5… for headings
• ul for unnumbered (bulleted) lists
• ol for numbered lists
• li for items in a list

This is pretty simple stuff, but CSS complicates things by allowing for a couple different types of selectors, as described in the following sections.

Tip
You can group selectors to apply property values to two or more elements. For example, h1, h2, h3, h4, h5 {color:blue; } would make all headings numbered 1-5 blue.

Class Selectors

A class selector enables you to create multiple style rules for a given element. For example, you can create three paragraph classes – p.left {text-align: left}, p.center {text-align: center}, and p.right {text-align: right}. When composing your blog entry, you can add the class attribute to a paragraph’s opening tag to specify which class you want to apply, for example ><p class=”center”>.

You can also create a class that is not associated with any given element by omitting the element designation from the selector. For example, you can create a .center {text-align: center} class, which you can then apply to any text element, such as paragraphs, images, headings, addresses, and definitions. For example, <img class=”center” src=”http://www.mydomain.com/images/image.jpg” /> would center an image while <p class=”center”> would center a paragraph.

ID Selectors

ID selectors are similar to class selectors, but they use a pound sign (#) instead of a period and apply formatting to only a single occurrence of a specific element. For example, you can apply p#footer {font-size: small; font-style: italic} to a paragraph at the bottom of a page to display the paragraph as a footer in small, italic text.

Some theme designers use the ID selector to apply different formatting for different sections of the blog; for example, #content li to control the appearance of list items in the content area and #l_sidebar li to control the appearance of list items in the left sidebar.

CSS Comments

Most WordPress stylesheets include comments that serve no other purpose than to provide information to anyone who may want to edit the file, including you. Comment text is marked with a forward slash followed by an asterisk, like this:

/* This is a comment. */

Comments usually designate groups of CSS formatting codes. For example, the designer may include a comment before each group of codes that apply to the header, footer, and content area. You can learn a great deal about how a designer formatted particular elements by reading the comments.

Tip
It’s a good idea to insert a comment describing any changes you make to your blog’s stylesheet, so you can easily change the setting back if something goes wrong. At least make a note of any changes.

Editing Styles in WordPress

You can edit your blog’s stylesheet and other files that comprise the theme you’re using from within WordPress. Here’s what you do:

• Log in to WordPress as you normally do. The WordPress Dashboard appears.
• Click Appearance and then Editor. The contents of your blog’s stylesheet should appear. If it doesn’t, click the Stylesheet link under Styles.
• Edit the styles as desired. (Editing styles is like editing any text document.)
• Click the Update File button to save your changes.

Editing Styles in Thesis

If you’re using the Thesis theme (which I use on this blog as well as most of the blogs I manage), editing styles is a little more complicated at first, but after you learn the basics, managing your styles with Thesis is actually easier. The difference is that Thesis discourages users from editing the stylesheet directly. Instead, you leave the stylesheet as is and enter any changes in a separate Thesis custom stylesheet. This way, if you make a mistake, you know exactly where to find it – in the custom stylesheet.

Tip
The Thesis how-to manual tells you to download the file you want to edit, open it in a text editor, make your changes, and then upload the file. A better way is to install the Thesis OpenHook plugin.

With Thesis OpenHook, you can edit the custom stylesheet from WordPress rather than having to open the custom.css file in a separate editor. After installing and activating OpenHook, click Appearance in the WordPress Dashboard, click Thesis OpenHook, and then scroll down to the Custom Stylesheet box to view or edit the contents of custom.css.

If you don’t like that idea, consider using your hosting service’s file manager. In Bluehost (the hosting service I use), you can login, click File Manager, and use it to navigate to the folder that contains the custom.css file: /wp-content/themes/thesis-15/custom. You can then click the custom.css file and click the Edit button in the toolbar at the top to open the file in the Bluehost Text Editor and make your changes online. I’ve used GoDaddy, and it has its own editor, too. Other tools are available that simplify the process of editing files online.

Using the Custom Stylesheet

To use the custom stylesheet, log into WordPress and then click Appearance, Thesis Options, Custom Stylesheet, and make sure Use custom stylesheet is checked. With the custom stylesheet enabled, you can use the “custom” class selector to override any existing style for any selector.

Tip
Before editing custom.css, check the Thesis Options and Design Options settings to determine whether you can make your adjustments using the Thesis built-in control panels. You can make dozens of adjustments without having to edit the custom.css file.

Sample Edits

Here are some of the easy changes I made to my custom.css file for my personal blog at joekraynak.com/blog (above each is a comment explaining what the new CSS declaration does):

/*Remove padding above and to left of header*/
.custom #header { padding-top: 0; padding-left: 0; }

/*Indent the tagline in the header 130px*/
.custom #tagline { position: absolute; left: 130px; }

/*When images are left-aligned add no extra space to the left, top, or bottom but 1em space to the right*/
.custom img.alignleft { margin: 0 1em 0 0; }

/*Separate list items by 10px space in the content area – does not affect list items in sidebars*/
.custom #content li { padding-bottom: 10px; }

/*Reduce the space between widgets in the sidebars*/
.custom li.widget { margin-bottom: 10px; }

Tip
Before you can change the property of a selector, you need to know what the selector is, and finding out can be a real challenge. One of the best tools to use to identify selectors is an add-on program for Mozilla’s Firefox Web browser called Firebug.

You can download a free copy of Firefox and then download and install Firebug using the Firefox browser. Kristarella.com has posted an excellent video called “How to Use Firebug for CSS,” demonstrating how to use the Firefox/Firebug combo to examine and experiment with CSS selectors, properties, and values on your own blog as well as other people’s blogs.

After installing WordPress, one of the first things you should do is make sure the blog title and tagline are correct and that the author name for your posts is exactly how you want it to appear. In this post, I show you how to access and change crucial WordPress settings:

1. In your Web browser, type the address of your blog, followed by a forward slash and wp-admin and press Enter. For example, you might type yourdomain.com/blog/wp-admin and press Enter. The WordPress Dashboard appears.
2. Click Settings.



3. Make sure the blog title and tagline are as you want them to appear in your blog header and click Save Changes. (Even if you use a header image instead of text, the blog title and tagline are important for search engines.)



4. Under Settings, click Permalinks.
5. Select Custom Structure, type /%category%/%postname%.html in the text box and click Save Changes. This displays the title of the blog post in its address rather than just a number. For example, instead of displaying http://www.yourdomain.com/?p=123 in the address bar, the address may appear as http://www.yourdomain.com/wildlife/save-rain-forests.html.



6. Click Users.



7. Rest the mouse pointer on your username and click Edit.



8. In the Nickname box, highlight admin, type the name you want to appear whenever you post an entry, and click Save Changes.



9. Open the Display name publicly as drop-down list and click the new nickname you created.



10. Under Contact Info, make sure WordPress is set up to send notifications to the correct email address you want to use.



11. Click Save Changes.

In this series, I’ve been teaching the basics of making a combination website/blog using Bluehost, WordPress, and Thesis. Here’s what I’ve covered so far:

• In Part I: Starting with Bluehost, I showed you how to open a Bluehost account, register your own domain name, and install WordPress.
• In Part II: Changing the Look and Layout with a WordPress Theme, I discussed WordPress themes and showed you how to transform the look and layout of your website/blog simply by selecting a different theme.
• In Part III: Essential WordPress Plugins, I introduced you to WordPress plug-ins – small programs that add features to WordPress – and revealed my eight favorite plugins.

In this part, I finally get around to showing you how to create a static home page in WordPress, so your blog can act like a website and vice versa. When people go to your site, they’ll be greeted by whatever you choose to include on your static home page and can then click a tab to access your blog. With recent versions of WordPress, the process is pretty simple (requires WordPress 2.3.1 or later):

1. Create the page you want to appear as your home page. (Make sure it’s a page, not a post.)



2. Scroll down to the Discussion options and remove the checks next to Allow comments and Allow pings.



3. Click the Publish button to publish your new page.
4. Create and publish a blank page to use for your blog, and call it something like Blog or Nick’s Blog, whatever.



5. In the WordPress Options or Settings group (on the Administration panel), click Reading.



6. Under Front page, click the Static page option.



7. Open the Front page list and choose the page you want to use as your static home page.
8. Open the Post page list and choose the page you want to use to display your blog posts.
9. Save your changes.

If you’re using Thesis, you need to choose to have new pages displayed as tabs in the navigation bar:

1. On the WordPress Administration panel, click Appearance, Thesis Options.



2. Under Navigation Menu click the plus sign next to Select pages to include in nav menu.



3. Check the box next to the blog page you created. Do not check the box next to the new home page you created. As long as you have the option checked to show the home link in the nav menu (see the following step), a tab for the page will appear.(Optional) In the list of pages, you can drag pages up or down to rearrange the order they will appear in your navigation bar.
4. Click the plus sign next to Home Link and make sure the Show home link in nav menu option is checked. You can edit the link’s name to something different for the link than you used for the page name.



5. Click the Save button.

Your new static home page now opens whenever someone chooses to go to your site, and they can click your new Blog tab to go to your blog.

You’ll find other tutorials about this topic that recommend creating a separate template, which you can do if you want to give your home page a unique appearance, but I think most folks just want to have a static page with some unique content to greet visitors.

For more about using Thesis to design your website or blog, check out Redesigning My WordPress Blog with Thesis.

This completes my four-part series on creating a combination website/blog with Bluehost, WordPress, and Thesis, but I’m not quite finished yet. In future posts, I’ll be introducing the basics of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) and showing you how to make some additional modifications to your blog. Although you can blog without knowing anything about HTML and CSS, knowing the basics can help you troubleshoot common problems and tweak your blog design to suit your tastes.

In this series, I’ve been teaching the basics of making a combination website/blog using Bluehost, WordPress, and Thesis. In Part I, I showed you how to get started with Bluehost, register your own domain name, and install WordPress. In Part II, I discussed WordPress themes and showed you how to transform the look and layout of your website/blog simply by selecting a different theme. In this part, I introduce WordPress plug-ins – small programs that add features to WordPress.

My Top 8 WordPress Plugins

On almost every website/blog I manage, I install the following WordPress plugins:

• Askimet: Included as part of the WordPress package, Askimet helps prevent comment spam.
• Multi-level Navigation Plugin: This adds a drop-down menu to your blog. Check out JoeKraynak.com/blog to see the menu in action.
• My Page Order: Provides a tool that enables you to drag-and-drop pages to rearrange their order. (If you use the Thesis theme, this plugin is unnecessary, because the function is built right into the theme.)
• Peter’s Custom Anti-Spam: This plugin requires visitors to type a key word in order to post a comment. This cuts down considerably on comment spam.
• Secure and Accessible PHP Contact Form: This allows people to contact me while protecting my email address. A lot of people place their email address right on their site, which makes it easy pickin’s for spammers. If you want people to contact you via email, I recommend you use a form like this one.
• Simple Trackback Validation: This plugin ensures that sites linking back to your posts actually have a verifiable link back to your blog. This prevents spam trackbacks.
• Thesis OpenHook: OpenHook makes it much easier to configure Thesis. If you don’t use the WordPress Thesis theme, however, you don’t need this plugin.
• SEO Title Tag: The SEO (Search Engine Optimization) Title Tag gives you the power to change the title of a page or post to anything you want. The title tag appears in the Web browser’s title bar when the page or post is open and is used by search engines (like Google and Yahoo!) to index the pages. The Thesis theme has its own title tag feature, along with other SEO tools, so if you’re using the Thesis theme, I recommend against installing or using the SEO Title Tag plugin.

Tip: When assigning a title tag, start with a word or phrase that best describes the content of the post or page. You can then follow up with other key words and phrases, such as the title of your blog.

Finding and Installing Plugins

Recent versions of WordPress have made it very easy to find and install plugins. Here’s what you do:

1. Log in to WordPress.
2. Scroll down the Dashboard and click Plugins.



3. Scroll down the Plugins page to the Get More Plugins section.



4. Click Plugin Browser/Installer.
5. Click in the search box, type the name of the plugin you’d like to install, and click Search.



6. Click Install next to the plugin you’d like to install.



7. Click the button to install the plugin and follow the onscreen instructions to complete the installation and activate the plugin.

You can browse a large collection of plugins by visiting the WordPress Plugin Directory. You can then download and install the plugin manually. However, I prefer to find the plugin I want and then follow the steps above to find and install the plugin from the WordPress Dashboard.

Configuring and Using Plugins

No two plugins are alike. Some, you simply install and activate, and they do their thing behind the scenes. Others require some additional work. For example, if you install the Secure and Accessible PHP Contact Form, you need to create a page on which the form will reside. All plugins I’ve encountered include some instructions to get you started.

If you’re not all that into reading instructions, you can always try poking around first. In most cases, when you install a plugin, some additional options appear in the WordPress Dashboard that allow you to configure or use the plugin. Click Plugins, Appearance, Tools, Pages, or Settings to look for additional options. In some cases, the plugin adds its own group of options to the Dashboard. Where you find options or settings for the plugins, you’re also likely to find more information about those options and settings.

If you’re a WordPress user, please post the names and descriptions of your favorite WordPress plugins here along with a brief explanation of why you like each plugin.

In my next post, I’ll show you how to create a static opening page for your website/blog combination and have your blog appear on a separate tab. With recent versions of WordPress, creating a combination website/blog is not as difficult as it sounds. See “Make a Website: Creating a Static Home Page in WordPress.”

June 29, 2009 update: Since posting this entry, I have redesigned this blog and others using the Thesis Theme, because it is easier to configure and provides additional tools for improving my blog.

In creating this blog, I started with the 3-column version of the Blue Zinfandel Enhanced theme created by Brian Gardner. I like the 3-column layout he uses, because it allows me to present the main content in the middle, use one sidebar for the blogging stuff (like recent posts, categories, and the blogroll), and have an extra sidebar for whatever I want to display – in this case, cover images of books I’ve written.

CSOdessa Modification

One of the problems I ran into with the original version of the template is that to change what appeared in the right sidebar, I had to edit three separate template files. That meant putting the <img> tags for the book covers in three different template files. Brian designed the template intentionally this way, because he wanted to be able to display different content in the sidebar depending on which page the visitor chose to open.

I searched the Web for some instructions on how to make the template function more like a standard template and finally stumbled upon a modified version of the template that went far beyond what I had expected: Blue Zinfandel Enhanced modified by CSOdessa. In addition, this modified version is widget-enabled, which made it much easier to customize both the left and right sidebars.

Adding Comments to Pages

Another problem that I ran into with both Blue Zinfandel Enhanced and the modified version, was that I had trouble adding a comments box to static pages. With other WordPress Templates I’ve used, I could just open up the page.php template and add the following code:

<?php comments_template(); // Get wp-comments.php template ?>

The contents of my page.php file would then look something like this:

<?php get_header(); ?>
<?php include(TEMPLATEPATH.”/l_sidebar.php”);?>
<div id=”content”>
<div id=”contentmiddle”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(__(‘Read more’));?>
<!–
<?php trackback_rdf(); ?>
–>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p><?php endif; ?>
</div>
</div>
<?php include(TEMPLATEPATH.”/r_sidebar.php”);?>
<!– The main column ends  –>
<?php get_footer(); ?>

That sort of worked this time, but when I disabled comments for a particular page, I would get the “Comments closed” message, but the Comments form would still appear.

To fix this, I had to edit the comments.php file. I moved the following lines from near the middle to near the end, between the two closing </div> codes:

</div> 
<!– If comments are open, but there are no comments. –>
<?php else : // comments are closed ?>
<!– If comments are closed. –>
<p class=”nocomments”>Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if (‘open’ == $post-> comment_status) : ?>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>
</div>

This change seemed to do the trick.

I also changed the header from the modified version back to the original, which I prefer. I will be making additional tweaks later.

I take my hats off to people like Brian Gardner and the developers at CSOdessa. I can fiddle with these templates and make them work, but to design something from the ground up that works and is beautiful is a real art.