Tweaking your WordPress Theme (Part 1)

Posted on Aug 18, 2010


WordPress is one of the most popular CMS platforms in today’s web design industry, largely because of the vast selection of available themes, free and commercial. But most often a theme is only a starting point – there is no such thing as a perfect theme – many website owners start with a great theme and tweak it to perfectly suit their needs.

Tweaking is not a privilege of those proficient in scripting or programming. There are many “customizations” you can make to your WordPress theme, even if your scripting/design knowledge and experience is limited.

Here are some of the easy customizations you can make to your WordPress theme.

  1. Edit the theme’s CSS
  2. Display post excerpts or full content
  3. Excluding/including a category
  4. Crafting page navigation
  5. Add something (anything) to the end of your blog posts
  6. Change the header image (if theme has a header image)
  7. Change the sidebar
  8. Add contact form
  9. Add Google Analytics tracking code

We will be discussing the first 3 customizations in this post.

Edit Theme CSS

You can tweak colors, fonts, layouts, backgrounds and other visual elements by editing the Cascade Stylesheet, or CSS. Most of the time, you will find the theme’s CSS style in the file style.css. You can access this file via Appearance > Editor in your WordPress admin panel.

How to:

  1. Locate the attribute you want to edit. The attributes are identified by names indicating sections, such as body, header, etc.
  2. Make the changes to the code displayed between the curly brackets { }.
  3. Save the changes

For more information: http://codex.wordpress.org/CSS

Display Post Excerpts or Full Content

By default, your theme will display the full content of your blog posts on your home page. But if you would rather display only a short excerpt from the post as a little “teaser” to click through to the full article, you can tweak your theme to display excerpts.

To do this, you will need to get familiar with two tags:

1)      The tag that displays your full post content is <?php the_content(); ?>

2)      The tag that displays your post excerpt is <?php the_excerpt(); ?>

All you need to do is replace the content tag with the excerpt tag on your index.php file. Then, when you write a new post, enter in your article summary (or teaser) in the Excerpt field.

*Note* If no excerpt is set, it will automatically display the first few sentences of your blog post.

For more information on excerpts: http://codex.wordpress.org/Excerpt and http://codex.wordpress.org/Template_Tags/the_excerpt

Excluding/Including a Category

Let’s say you want to display posts from only one category on your homepage, or you want to exclude posts from one or more categories. Here’s how you do it:

Add this code where you want the posts to be displayed:

<?php query_posts(‘cat=3’); ?>

This code will display posts only from category ID 3. Change this number to whichever category ID you’d like to include.

If you want to do the opposite, all you need to do is add a “-“ in front of the category ID number, like this:

<?php query_posts(‘cat=-3’); ?>

This will exclude all posts which have the category ID 3.

For more information on query posts: http://codex.wordpress.org/Template_Tags/query_posts

Comments

comments