Home » Internet » Blogging » WordPress » How to customize a WordPress theme

How to customize a WordPress theme



You need to customize your WordPress theme if you have downloaded one of those free themes available on thousands of websites, to have a unique look. This is primarily the greatest reason why WordPress is so popular among the blogging fraternity: little knowledge of CSS and PHP lets you create killer theme layouts in a very short span of time.

There are different ways you can customize your WordPress theme. Basic features of a WordPress theme may involve:

  • The header (logo, top navigation, etc.)
  • The side bar (containing recent posts, categories, archives and widgets, etc.)
  • The footer
  • The content area (chronologically arranged posts, single posts, category or tag wise posts, etc.)

These features are available with almost every WordPress theme. The most common files that your theme folder may contain are:

  • index.php
  • style.css
  • single.php
  • page.php
  • comments.php
  • search.php
  • header.php
  • sidebar.php
  • footer.php
  • 404.php

A typical screenshot of your theme files may look like:

List of WordPress theme files

The path to your WordPress theme files in almost all the cases is going to be:

../blog_path/wp-content/themes/current_theme

If you have installed your blog in the root folder itself the path is simply going to be:

/wp-content/themes/current_theme

The best way of customizing a WordPress theme is installing the blog first on your local computer; then you can see the changes live without affecting the blog running on the server.

Customizing the WordPress theme CSS

You can either customize your WordPress theme CSS using your favorite desktop text editor or you can straightaway edit the file on the server, using the WordPress admin interface. You can access the online theme editor through the Appearance section in your Admin area:

WordPress theme editor

Using your CSS file you can decide how your headlines, content text, side bar and various elements should look. Prior knowledge of CSS is required.

Instead of using the WordPress editor you can also use the FireBug FireFox plugin…you’ll actually need to install it and see it yourself how cool this is.

Customizing the WordPress theme content

The main page, home page, or the index page can be customized in many ways. A typical way of displaying the home page is displaying n number of — usually 15 or 10 — blog posts in a chronological order, showing the latest post at the top. You can change this number by simply clicking Reading in the Settings section.

Here you can also decide whether you want your home page to look like a convention blog (with multiple blog posts) or you want a static page as your home page [read how to create a website with WordPress].

Instead of showing entire blog posts on the home page you can also show just the headline and the excerpts. A typical WordPress home page loop goes like this:

<?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
                <h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
                <?php the_content(); ?>
        <?php endwhile; ?>

        <?php else : ?>
        <h2 class=”center”>Not Found</h2>
        <p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
        <?php get_search_form(); ?>
<?php endif; ?>

So instead of the_content() you can have the_excerpt(). You can also use the “more” button in the post editing window (in WordPress admin) to insert a tag that shows only a particular length of your post and then adds something like “Read more…” at the bottom of the post.

You can read more on how to customize your WordPress theme on this Mashable blog post.