How To: Adding Comment Numbers To Your WordPress Theme

I’ve noticed a lot of themes that don’t come with numbers on the blog’s comments.  This might not be such a bad thing if you don’t get very many comments, but if your blog does get comments it is probably a good idea to show off how many comments you get by numbering them.

Here are the steps you can take to easily add numbers to your WordPress theme’s comments section.

  1. First thing you will want to do is create a backup your comments.php file.
  2. Locate the comments.php file.
  3. Locate the code that starts the comment loop. It will look something like this:
    <?php if ( $comments ) : ?>
  4. Place this code immediately above the code in Step 3:
    <?php $i = 0; ?>
  5. Now locate the code that looks like this:
    <?php foreach ($comments as $comment) : ?>
  6. Placed this code immediately below the code in Step 5:
    <?php $i++; ?>
  7. Now use this code where you want to display your comment numbers:
    <span class="count">
    <?php echo $i; ?>
    </span>
  8. Click Save.
  9. Now go to your stylesheet (style.css) and place this code anywhere on the stylesheet (probably best placed in the comments section):
    .count {
    float:right;
    padding: 10px;
    font-size:18px;
    color:#000000;
    }

You can adjust the stylesheet to fit your comment numbers into the placement and appearance that you want them to have.

  • Leave a Comment
  • How To: Add WordPress 2.3 Tags to Your WordPress Theme

    A couple of weeks ago the WordPress community was blessed with the latest release from the WordPress team, now known as WordPress 2.3. One of the included features was an extremely important and extremely useful one, which adds built-in tags to WordPress.

    If you have already upgraded to WordPress 2.3 and want to take advantage of this new feature, you will probably have to manually add this tagging feature to your theme. In order to add tags, you simply need to paste the following code where you want to display the tags:

    <?php the_tags(); ?>

    This will actually add the text “Tags:” before the output of tags, so you will not need to do this manually. If you would like to proudly display your tags in a cloud somewhere (most commonly in your sidebar), you can easily do so by using the following code:

    <?php wp_tag_cloud('smallest=8&largest=36&'); ?>

    This code tells WordPress to display your tags in alphabetical order with the smallest text being 8 point font and the largest font is 36 point font. You can adjust the font sizes to your preference.

    If you would prefer to stick with the Ultimate Tagging Warrior plugin, the author has stated that the plugin will be updated to work with WordPress 2.3  Most people, though, would probably prefer to switch to the new built-in tagging system. If you’d like to make the switch from UTW to the new WordPress tagging system, WordPress has made it easy to make the conversion with their import feature. You can find the import option under the Manage tab in your Dashboard. In addition to the ability to import your UTW tags, WordPress also allows you to import tags from other plugins such as Bunny’s Technorati Tags and the Simple Tagging plugin.

    Overall, I am extremely impressed with the new tagging feature found in WordPress 2.3 and even more impressed with how easy it is to convert your old tags to the new system.

  • Leave a Comment
  • How To: Adding Edit Buttons To Your WordPress Theme

    I talked previously about how there are a lot of basic things WordPress theme authors can do to make a theme more functional and appealing to WordPress users, such as separating blog comments from trackbacks.  Another thing that theme authors often forget to do is add “edit” buttons to posts, pages, and comments.   Having access to these buttons can save blog authors a lot of time when trying to manage their blogs.  As a result, I decided to write up a quick tutorial that explains the really simple process of adding edit buttons to your WordPress theme. 

    If you’d like to add an “Edit” button on your individual posts or pages, here is the code you will want to place somewhere in your post and/or page template (usually called single.php and page.php) where you want it to display:

    <?php edit_post_link(__("**Edit**"), ''); ?>

    If you’d like to add an “Edit” button to your individual comments, here is the code you need to place somewhere in your comments loop (usually called comments.php) where you want it to display:

    <?php edit_comment_link(__("**Edit**"), ''); ?>

    A couple of quick notes about adding edit buttons to your theme:

    • These edit links will only appear if you are logged in with the appropriate priviledges (administrator, editor, etc.).  Your traffic will not see them.
    • You can wrap them in a div or whatever you would like to and then set its position in your stylesheet to appear where you want it to. 
  • Leave a Comment
  • How To: Separating Your Author Comments in WordPress

    Have you noticed while visiting some of your favorite blogs that many author comments are styled differently to help the authors comments to stand out? This is something that isn’t overly difficult to implement on your WordPress blog, so I decided to write a quick how-to post explaining how you can easily adjust your WordPress theme to display different styles for each author.

    First, you’ll need to make some adjustments to the comments.php code.   Look for something similar to the following code:

    <li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

    Replace the above code with the following code:

    <li class="<?php if ($comment->comment_author_email == "admin@yourdomain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

    You’ll want to modify admin@yourdomain.com to reflect the primary blog author’s e-mail address.  This will tell WordPress to check each comment to see if you are the author. Now go to your CSS Stylesheet (style.css) and add the commands you would like to use for your author comments. You’ll want to use .author to style your author comments. I recommend pulling your standard comment code, then adjusting the colors to look different on your comments. You can also add a logo through your stylesheet.

    How do I do this if my blog uses multiple authors? If your blog features several different authors, you’ll want to make a slightly different adjustment to the above code so that it looks like this:

    <li class="<?php if ($comment->comment_author_email == "author@yourdomain.com") echo 'author'; else if ($comment->comment_author_email == "author2@yourdomain.com") echo 'author2'; else if ($comment->comment_author_email == "author3@yourdomain.com") echo 'author3'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

    In the above example, we are assigning the primary author as .author and adding their e-mail address where it says author@yourdomain.com. When the comment includes that e-mail, it will use the .author style from the stylesheet. The second author will use .author2 for their stylesheet and replace author2@yourdomain.com with the 2nd author’s e-mail, etc. Any comments that don’t include one of the above e-mails will use the standard styles.

    Once you’ve got your code adjusted and added the author(s) commands to your stylesheet you will be ready to start commenting!

  • Leave a Comment
  • How To: Hiding Your Affiliate Links using WordPress

    With the increasing popularity of using affiliate links to generate income online, it can significantly improve your conversion rate on affiliate sign-ups by disguising your affiliate links using a URL with your domain name, then redirecting them to the appropriate affiliate. 

    The idea behind using this theory is that readers will click on it thinking it is an internal link on your site, rather than taking you to a third party site.  Another benefit is that all of your blog’s links point toward an internal address on your domain, giving you control to update the URL easily. This helps avoid dead links whenever a company changes a URL and makes it easy to update your affiliate links when the need arises.

    Redirects can be accomplished in a variety of ways, but as this blog focuses on self-hosted WordPress, I will be going over an easy way to do this using a PHP redirect.  Here are the steps I took when I hid my affiliate links for this website:

    1. Create a folder called “Go.”
    2. Create a .php document (this can easily be done with Notepad or any similar program) and name it after the appropriate affiliate link you are using.
    3. Now paste the following code into the document: <? header("Location: http://youraffiliatelinkurlhere"); ?>
    4. Hide Affiliate LinksSave it into the “Go” folder created above.
    5. Repeat steps 2-4 until you’ve created a .php file for each affiliate link.
    6. Go to your FTP and upload your “Go” folder directly to the public_html folder.
    7. Update all your affiliate links to point towards your new redirect!

    Your redirect will look something like http://www.yourdomainname.com/go/phpdocumentname.php.

    You can name the documents whatever you want, or you can use a different name than “Go” for your folder name.   The important thing is that you remember what you named it so that you can use your new affiliate link!

  • Leave a Comment
  • How To: Add Widget Support to Your WordPress Theme

    If you are planning on making a WordPress theme available to the WordPress community, it has become somewhat of a necessity for it to support widgets. This is especially true now that recent WordPress installs now come with this ability built-in, meaning you no longer need a plugin to accomplish this. This will make your theme more appealing to a larger number of WordPress users because they will not need any coding knowledge to set up their sidebar to look how they want it to.

    If you would like to set up your theme to support widgets, I recommend you check out this post by Garry Conn entitled How To Widgetize a WordPress Theme. In his post, he provides a detailed walk through of how to widgetize your sidebar for a 2-column theme.

    According to Automattic, it is also really easy to add widget support to 3-column and 4-column themes:

    Instead of register_sidebar() you should use register_sidebars(n) where n is the number of sidebars. Then place the appropriate number in the dynamic_sidebar() function, starting with 1. (There are several other ways to use these function. See the API). You can even give your sidebars names rather than numbers, which lets you maintain a different set of saved sidebars for each theme.

    My favorite part about widgets is that it provides a extra option for theme users, but isn’t required to be used.  A theme that supports widgets can still be adjusted manually if you prefer to do things the hard fun way.

  • Leave a Comment
  • How To: Separate WordPress Comments and Trackbacks

    Note: For WordPress 2.7 and newer WordPress installations, you’ll instead want to use this tutorial.

    With all the WordPress themes available to WordPress users, it always surprises me how these incredible theme authors don’t take a few extra seconds to separate their theme’s trackbacks from the comments. It doesn’t look very professional and it can make it extremely difficult to follow a conversation in the comments.

    Separating your trackbacks and comments requires a minimal amount of coding work to set up. First, you’ll want to make a backup of your comments.php file just in case something goes wrong. Next, follow these three steps:

    1 ) Access your comments.php file and locate the following code:

    <?php foreach ($comments as $comment) : ?>

    Immediately after the above code, you’ll want to place this code:

    <?php $comment_type = get_comment_type(); ?>
    <?php if($comment_type == 'comment') { ?>

    2 ) Next, you’ll want to scroll down a little bit and locate the following code:

    <?php endforeach; /* end for each comment */ ?>

    Immediately before the above code, you’ll want to place this code:

    <?php } /* End of is_comment statement */ ?>

    This will filter out all of the trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display the trackbacks and pingbacks.

    3 ) Almost immediately below the code from step 2 you should find this code:

    <?php else : // this is displayed if there are no comments so far ?>

    Immediately before the above code, you’ll want to place this code:

    <h3>Trackbacks</h3>
    <ol>
    <?php foreach ($comments as $comment) : ?>
    <?php $comment_type = get_comment_type(); ?>
    <?php if($comment_type != 'comment') { ?>
    <li><?php comment_author_link() ?></li>
    <?php } ?>
    <?php endforeach; ?>
    </ol>

    You can adjust this code to display how you want to, including using a different header if you have a specific look for your header 3.

  • Leave a Comment
  • How To: Prevent WordPress Plugins From Breaking Your Blog

    Have you ever deactivated a WordPress plugin only to find that it broke your blog won ‘t load any longer?  This is most common when you have your plugins deactivated because you are upgrading WordPress. 

    The reason this is happening is because many WordPress plugin authors provide the call to the plugin without using an “if”.  This causes the call to the plugin to break your page when the server goes to pull the plugin code and discovers it has been deactivated.  

    This actually isn’t very difficult to fix, so I figured I would write a quick post explaining how to do so.    I’ll use the popular Related Posts plugin for my example.     Once you’ve downloaded and installed the plugin, you’ll need to place some code where you want the related posts to display.    The plugin author gives you the following code to use:

    <?php related_posts(); ?>

    As you can see, there is no if/then involved, so it will cause problems if you deactivate the plugin.   Here is how the code needs to look to avoid breaking your blog:

    <?php if(function_exists('related_posts')) { related_posts(); } ?>

    You just need to take the related_posts in drop it in there twice.   This way if you deactivate the Related Posts plugin, it won’t cause any problems. 

    To avoid problems in the future, I recommend going through your plugin list and converting all your plugin calls to the above format.  

  • Leave a Comment
  • How To: Hide WordPress Pages

    Looking to hide WordPress pages? If you’ve downloaded a WordPress theme that has been made available to the general public, it is likely that, by default, it has some code that automatically inserts your WordPress pages directly into your theme without any manual coding. This is a really great feature most of the time, but sometimes there are certain pages you’d like to not display in your menu or not display at all (search results page comes to mind).

    Hide WordPress Pages

    Here is how the menu code probably looks in your theme:

    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

    If you have a individual page you’ve created, but don’t want to display it in your blog’s menu, you simply need to add an exclude command and the page number (this can be found on Manage -> Pages) to your existing code. Here is how the same code would look if I was excluding page 55:

    <?php wp_list_pages('depth=1&sort_column=menu_order&exclude=55&title_li=' . __('') . '' ); ?>

    If you’d prefer to exclude more than one page, you can do so by simply adding a comma between each page number like so:

    <?php wp_list_pages('depth=1&sort_column=menu_order&exclude=55,422&title_li=' . __('') . '' ); ?>

    This code will exclude pages 55 and page 422 from your page menu.

    Any other questions?  Feel free to post them below.

  • Leave a Comment
  • How To: Optimize Your WordPress Title

    Looking to optimize your WordPress title? While this blog will probably not get to caught up in covering search engine optimization, there are definitely a few tweaks that you can make to your existing WordPress theme that will help optimize your blog’s search engine potential. In this post I’m going to cover a quick adjustment that you can make to your title tag to show a more optimal title.

    Optimize Your WordPress Title

    By default, your WordPress theme will likely come with a pretty standard code for your blog’s title. It probably looks something like the following:

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

    Unfortunately this is not the best way to code your title for your WordPress. Ideally, you’ll want a more search engine friendly way to display a custom title for each page of your WordPress blog. In order to achieve this, here is the code I recommend using:

    <title><?php if (is_home () ) { bloginfo(‘name’); }
    elseif ( is_category() ) { single_cat_title(); echo ‘ - ‘ ; bloginfo(‘name’); }
    elseif (is_single() ) { single_post_title();}
    elseif (is_page() ) { single_post_title();}
    else { wp_title(‘’,true); } ?></title>

    This code will actually display a custom title for each different type of page on your blog automatically.

    If you’re truly ambitious, you can actually use a plugin that will do all the dirty work for you. That plugin is called WordPress SEO, and it will help automate the process for displaying completely custom meta tags for each page of your blog, including the title field.

  • Leave a Comment