If are you proficient with Php, HTML, and CSS the possibilities of what you can achieve with WordPress are unlimited. Even if you aren’t a coding or web development guru, there are still many simple things that you can do to improve your WordPress site. There are a countless number of plugins that do just about everything, but there are many times where all you need to do is copy and paste a simple line of code to tweak your site. Here are five of my favorite simple WordPress tricks to change the look, feel and function of your WordPress template.

* A Note to Wordpress Newbies -

I strongly suggest that you create a test environment before you begin modifying any WordPress files. You can either install a second instance of WordPress through your web host –or- install it locally using software such as XAMPP (Windows, Mac, Linux) or MAMP (Mac). I’ve been using XAMPP for years and absolutely love having the ability to create, edit, modify, and test WordPress themes locally. No matter which way you decide to create a test environment, I recommend that you create a backup copy of the theme you plan to edit. It’s always nice to have an edit copy of your theme files just in case something goes wrong.

Check Out WordPress.org’s Codex

Before you decide to customize your WordPress template I strongly suggest that you visit http://codex.wordpress.org. If you take the time to understand how WordPress works, editing the code will make much more sense. Make sure to read about the loop and template tags. There are tons of simple improvements and customizations that you can make by working with template tags alone.

Change the Default Avatar

Replacing the default avatar or Gravatar with a custom one is a quick and easy way to improve the look of the comments on your blog. It can be done in two steps:

1 - Choose and upload your new default image
Once you have created a your new custom avatar, upload it to your themes default image directory: /wp-content/themes/<your themes directory>/images/.

2 - Edit comments.php
From the dashboard, find Apperance > Editor > comments.php. You will find a line of code that reads:

<?php echo get_avatar( $comment, 32 ); ?>

Once you find that line of code, replace it with:

<?php
    $urlHome = get_option('home');
    echo get_avatar( $comment, $size='32', $default = $urlHome . '/wp-content/themes/default/images/<custom-avatar-filename>' );
?>

Separate Trackbacks / Pingbacks from Comments

In my opinion, mixing trackbacks / pingbacks in with the comments area of you blog is never a good thing. Organization is key when it comes to readable, user-friendly sites and mixing links in with comments interrupts the flow of content. When I decided to separate the trackbacks from the comments on 6b Design, I stumbled across an excellent tutorial by Michael Martin from Pro Blog Design. It is wonderfully written and very easy to follow.

Multiple Widget Friendly Sidebars

Since I’ve been designing WordPress themes, I’ve come across several instances where there has been a need for multiple sidebars. Lets pretend that you would like to use a different sidebar for all of your pages than you would for your blog and the rest of the site. There are a few ways to achieve this. I use the following method:

1 - Make a second copy of sidebar.php -
Make a copy of of sidebar.php, located in /wp-content/themes/<your themes directory>/ and name it sidebar2.php.

2 - Edit sidebar2.php -
In sidebar2.php find the line:

<?php 	/* Widgetized sidebar, if you have the plugin installed. */
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

and replace it with:

<?php 	/* Widgetized sidebar, if you have the plugin installed. */
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar 2') ) : ?>

3 - Edit the functions.php -
In functions.php find the line that looks something like this:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));

and replace it with:

if ( function_exists('register_sidebar') )
    register_sidebars(2, array('name'=>'Sidebar %d',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));

4 - Edit the page.php -
Because in this instance we would like to use the new sidebar for your pages, you will need edit a few lines of code to your page template, page.php. Find the line:

<?php get_sidebar(); ?>

and replace it with:

<?php include ('sidebar2.php'); ?>

To use multiple sidebars on a single page, just include:

<?php include ('sidebar.php'); ?>
<?php include ('sidebar2.php'); ?>

Viola! Now you can position and style your sidebars to suit your needs. Both sidebars are widget friendly so you will be able to add widgets from the Dashboard.

Create a Static Front Page

There are many ways to create a static front page with dynamic content. I wanted a static front page for 6bdesign.com that displayed excerpts of my latest posts. It has some disadvantages, but if you use FeedBurner, you can take a short cut and use BuzzBoost to redisplay your post excerpts. You can also create a new page template to use for your front page that will do the same – without using a second party service.

1 – Create a front page and a posts page –

If you would like to hide your static front page from your navigation menu or page widget, please see this entry from WordPress support.

2 – Create a new page template -
The following template will display whatever page content you would like (editable through Dashboard > Pages > Edit) followed by blog post excerpts. Using a text editor, create a file and name it something like frontpage.php. Copy and paste the following code into it then upload it to your theme directory. For this tutorial I am using the default WordPress template so it would need to go in /wp-content/themes/default/.

<?php
/* Template Name: Front Page Template
*/
get_header(); ?>
<div id="content" class="narrowcolumn">
<!-- Begin Page Content -->
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post" id="post-<?php the_ID(); ?>">
      <h2><?php the_title(); ?></h2>
    <div class="entry">
      <?php the_content(); ?>
    </div>
    <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
  </div>
  <?php endwhile; ?>
<!-- End Page Content -->
<!-- Begin Post Excerpts -->
  <h2>Latest Blog Entries</h2>
  <?php $temp_query = $wp_query; ?>
  <?php query_posts('showposts=5'); ?>
  <?php while (have_posts()) : the_post(); ?>
  <div class="post" 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') ?></small>
    <div class="entry">
      <?php the_excerpt(); ?>
    </div>
<!-- End Post Excerpts -->
  </div>
  <?php endwhile; ?>
  <?php endif; ?>
</div>
php get_sidebar(); ?>
<?php get_footer(); ?>

You may display as many or as few posts as you would like by changing the number on line 20. You can also change what type of posts to display. If you would to see posts from a specific category, in this case, “Updates”, change line 20 to read:

<?php query_posts('category_name=updates&showposts=5'); ?>

If you would like to see only posts that use a specific tag, you would use:

<?php query_posts('tag=updates&showposts=5')>

Check out Codex for more information for addition information about what you do with post queries.

3 – Select the new “Front Page Template” for your front page –
From the WordPress 2.7x dashboard, go to Pages > Edit and select the front page that you just created. Under Attributes > Template, select “Front Page Template”. Now when you visit your site, you should see you see should display your page content as well as excerpts from your latest posts.

Disclaimer:
Experimenting with code is always a great way to learn. The tutorials on this site are simply examples of what has worked for me. I make no claim or guarantee that they will work for you. If anything should happen to your computer, WordPress site, databases, etc., it is understood that the responsibility is yours and not mine.

Tags: avatar, pingbacks, sidebar, static front page, trackbacks, WordPress

This entry was posted on Friday, February 20th, 2009 at 3:33 pm and is filed under Blog Design, Everyday Inspiration, Lists, Resources. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.