Top 10 Ways to Tweak Your WordPress Theme

[chotoan]

href="http://api.tweetmeme.com/share?url=http://mashable.com/2010/06/10/wordpress-tweaks/&service=bit.ly"> width="51" height="61" src="http://api.tweetmeme.com/imagebutton.gif?url=http://mashable.com/2010/06/10/wordpress-tweaks/" align="right"/> class='feedflare' href="http://www.google.com/reader/link?url=http://mashable.com/2010/06/10/wordpress-tweaks/&title=Top 10 Ways to Tweak Your WordPress Theme&srcTitle=Mashable&srcUrl=http://mashable.com"> src="http://cdn.mashable.com/wp-content/plugins/wp-digg-this/i/gbuzz-feed.png" align="right" />

src="http://cdn.mashable.com/wp-content/uploads/2010/06/WordPress-Tweaks-260.jpg" class="alignright" alt="WordPress Tools Image">Brian Casel is a web designer and owner of href="http://themejam.com/" target="_blank">ThemeJam WordPress Themes and href="http://casjam.com/" target="_blank">CasJam Media.  You can follow Brian on his blog at href="http://www.briancasel.com/" target="_blank">briancasel.com or on Twitter href="http://twitter.com/CasJam" target="_blank">@CasJam.

href="http://mashable.com/category/wordpress">WordPress is the fastest growing CMS platforms in today’s web design industry (yes, it’s a true CMS).  Much of the action in the WordPress community is largely driven by the market for WordPress themes.

The vast selection of free and commercial themes is what makes WordPress so attractive.  But the theme is often only a starting point for further customizations.  Web developers and DIY website owners like to start with a great theme and tweak it to perfectly suit their (or their client’s) needs.

Many themes, particularly commercial themes, come packaged with a robust theme options page, which lets you to configure many aspects of it.  You should check out those available options before diving into the code.  That said, all themes are different, and sometimes you need to get your hands dirty to fully customize it.

Below are some of the most common things website owners like to tweak, and of course, how to tweak them!  This article is based on the assumption that you have at least a light background in website design, code editing, and a familiarity with WordPress.

One general tip before we get into specifics:  It’s often a good idea to make your modifications by creating or editing a “Child Theme,” rather than editing the “Parent Theme” itself.  The benefit here is that if and when the theme author releases updates to the core functionality, you can easily update your theme without losing your modifications.  Check out the href="http://codex.wordpress.org/Child_Themes" target="_blank">WordPress.org Codex to learn more about Child themes.

/>

1. Edit Your Theme’s CSS

/>

src="http://cdn.mashable.com/wp-content/uploads/2010/06/firebug.jpg" alt="Firebug CSS Image">

If you’re looking to tweak colors, fonts, layout, backgrounds, spacing, and other visual elements, your best bet is to start by editing the CSS.  Most of the time, your theme’s CSS styles will be located in the file style.css.  This file is always present in a theme, as this is what defines the theme in the WordPress admin.  But sometimes there are additional stylesheets, which may be located in a sub-folder.

The best way to track down a particular style and location within the theme files is to employ a browser web development tool, such as href="http://getfirebug.com/" target="_blank">FireBug.  It’s a href="http://mashable.com/tag/firefox">FireFox extension, which allows you to inspect and tweak CSS styles on the fly, and quickly locate the stylesheet and line number you need to edit.  If you don’t already use FireBug, it’s time to start.

/>

2. Display Post Excerpts or Full Content

/>

Sometimes, by default, your theme displays the full content of your blog posts on your home page.  Let’s say you would rather display only a short excerpt from the post as a little “teaser” to click through to the full article.  Or perhaps it’s the other way around — the theme shows excerpts, but you’d rather display full blog posts.  Here are the two tags you need to swap:

This tag displays your full post content:

style="BACKGROUND-COLOR: #66FFFF"><?php the_content(); ?>

href="http://codex.wordpress.org/Template_Tags/the_content" target="_blank">More info on this tag.

This tag displays your post excerpt (in the Edit Post screen, it’s the text box just below your main body box): 

style="BACKGROUND-COLOR: #66FFFF"><?php the_excerpt(); ?>

If no excerpt is set, it will automatically display the first few sentences of your blog post. href="http://codex.wordpress.org/Template_Tags/the_excerpt" target="_blank">More info on this tag.

/>

3. Create a Custom Page Template

/>

Sometimes you have one page that requires a unique layout — something different from the others.  You’d like some flexibility in the HTML markup, but don’t want to affect all the pages on your site.  WordPress makes it really easy to create unique templates and assign them to specific pages.  Here’s how:

1. Duplicate your theme’s page.php file.  This is the file WordPress uses to display your generic pages.

2. Re-name it anything you want.  In this example, let’s call it pricing.php (we will be creating a unique “Pricing” page).

3. At the very top of the page, add this to the code:

style="BACKGROUND-COLOR: #66FFFF"><?php /> /* /> Template Name: Pricing /> */ /> ?>

4. Modify the markup and CSS for this page template however you want.

5. Create your “Pricing” page.  Using the “Template” drop-down, select “Pricing.”

6. Save your page.  It now displays using the markup you created in your unique template.

/>

4. Crafting The Loop: Excluding/Including a Category

/>

Let’s say you’d like to display posts from all categories with the exception of one.  This is a common request for a variety of reasons.  One example would be if you have a featured posts slider at the top of your home page, showing posts categorized as “Featured.”  You’d like to display the rest of your posts below the slider, but avoid displaying the same post twice on one page.  Here’s how you do it:

Add this code before your loop:

style="BACKGROUND-COLOR: #66FFFF"><?php query_posts(‘cat=-8′; ?>