Ultimate Guide to the WordPress Loop

One of my favorite parts about using WordPress for my blogs is getting to work with PHP code, which I find to be much easier to write/hack.   For those that are shy around code, it really isn’t that difficult to get ahold of the basics of PHP, so WordPress is the right place for you. 

One great area to start is learning how the WordPress loop works.  This is a basic function of blogging used to display the most recent X number of posts on your blog’s homepage (for traditional blogs).   Rather than go into to much detail here, I’d like to point you towards a new post by Themelab which is designed to be the Utlimate Guide to the WordPress loop

This post definitely lives up to its name and goes beyond just showing you how to do something.  It actually explains how and why it works, and includes screenshots with many of the examples.   If you have any interest in learning about the WordPress loop you may want to read through this post and/or bookmark it for future reference. 

  • Leave a Comment
  • How To: Display A WordPress Tag Cloud On Your Blog

    Depending on how your WordPress blog is set up, you may have an interest in displaying your WordPress tags for your readers to dig through in a nice looking cloud format. This is something that is very nice for readers to see, as long as you are responsible with your tagging and don’t use an overwhelming number of tags.

    In order to display tags on your WordPress blog, you’ll just want to add this little code snippet whenever you want the tag cloud to display (usually in the sidebar or footer somewhere depending on your blogs layout).

    Here is the code you’ll need:

    <?php wp_tag_cloud(''); ?>

    WordPress also allows you to customize your cloud to display the way you want it to. Most people like to emphasize the most used tags by making their font much larger. You can determine the size using the following code:

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

    In this example, the tags will be displayed in alphabetical order with the least used tags being 8px and the most used tags will be 36px. You can of course adjust this to meet your needs.

  • Leave a Comment
  • How To: Tell WordPress To Function Like a CMS

    So, you have an established WordPress blog, but you’ve seen the pro bloggers doing it and now you want to turn that blog into a Content Management System (CMS)? Many people probably weren’t aware of this trick (including many web developers), but one neat feature added with WordPress 2.1 was the ability to have a different home and blog page without needing to install WordPress on a completely new directory.

    In order to accomplish this, you first need to make sure that the page that you want to be your blog’s homepage is named home.php. This will be the page displayed at the root of your domain.

    Next, you’ll want to create a new file named blog.php and place the following code within the file:

    Template Name: Blog
    // Which page of the blog are we on?
    $paged = get_query_var('paged');
    // make posts print only the first part with a link to rest of the post.
    global $more;
    $more = 0;
    //load index to show blog
    load_template(TEMPLATEPATH . '/index.php');

    That is all you need for code in that file. Upload it to your theme. This code creates a loop of your index.php file in your theme (commonly used as the single post page) and displays it as a typical blog homepage. Because this page will pull from your index.php file, going forward, any changes you make to your index.php file will update on this page as well.

    Now, go into your dashboard and create a new page called Blog. Then select the Blog file you just created in the Page Template drop-down menu in the right sidebar.

    Once that is done, the last thing you need to do is go over to your permalink structure page (under Manage) and add /blog/ to your custom permalink structure. This means if you are using an optimal permalink structure, you would want to use a custom structure of /blog/%postname%/. If you are doing this to an established blog, you can easily use the Permalink Redirect plugin to redirect your old permalink structure to the new one.

    Edit: This was written for WordPress 2.1 through WordPress 2.3.3.   It appears that a slight adjustment has been made for WordPress 2.5+.   Readers have confirmed that you can find the information you for a WordPress 2.5+ install in this post.   If you are using WordPress 2.5 or newer, please keep this in mind if you try this.

  • Leave a Comment
  • How To: Using Another Stylesheet For Certain Pages

    When you think of having two stylesheets for a website or blog, you typically think of an alternate stylesheet specifically for a web browser, such as an Internet Explorer stylesheet.

    One thing we haven’t covered yet is how to add a second stylesheet that is only used for certain pages. In order to do this, you’ll want to open up your header.php file and locate your existing stylesheet. The stylesheet code should look something like this:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    Now, we need to make an adjustment so that it will only show the code in a certain situation. For example, if you want a certain category to use a different stylesheet, you’d use the following code:

    <?php if ( is_category('1') ) { ?>
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/cat-1.css"
    type="text/css" media="screen" />
    <?php } else { ?>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
    type="text/css" media="screen" />
    <?php } ?>

    In this example, we are assigning the cat-1.css to be used for category 1. Every other page will use the normal stylesheet.

    You can plugin in alternate information as needed.

  • Leave a Comment
  • WordPress 2.5+: How To Add Gravatar to Your WordPress Theme

    As we continue to gear up for WordPress 2.5, have you gotten your theme ready for Gravatars? In the past it required plugins, but now WordPress 2.5 has built-in Gravatar support. This means going forward, themes can easily be released with Gravatars built-in to the theme because no plugin will be required.

    So, you’ve got WordPress 2.5 installed and you’re ready to assign Gravatars to your comments? All you need to do is a quick code hack to the comments loop where you want the Gravatar to show up:

    <?php if(function_exists(’get_avatar’)){ echo get_avatar($comment, ‘50’);} ?>

    I encourage everyone to support WordPress by displaying Gravatars on their blogs once you’ve upgraded to WordPress 2.5.

  • Leave a Comment
  • WordPress Hack: Creating a Two-Tiered Navigation Menu

    If you’ve been following the recent trends with premium WordPress themes, you’ve probably noticed that the two-tiered navigation menu has become extremely popular. An example of this is the popular Revolution WordPress themes. This style of menu can be used in a variety of ways, but the most common seems to be to display your children pages in a menu below your blog’s parent pages.

    If you’ve wondered how to hack your existing WordPress theme to accomplish something along these lines, Darren Hoyt has taken the time to explain this in his post Creating Two-Tiered Conditional Navigation in WordPress. Here is the PHP you’ll need:

    <ul id="nav">
    <?php wp_list_pages('title_li=&depth=1'); ?>
    <?php if($post->post_parent)
    $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
    $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
    if ($children) { ?>
    <ul id="subnav">
    <?php echo $children; ?>
    <?php } else { ?>
    <?php } ?>

    Once you’ve got the code in place, you’ll want to style it to look the way you want it to.

  • Leave a Comment
  • How To: Alternating Your Post Background Colors

    Comments Off on How To: Alternating Your Post Background Colors

    One thing I’ve always loved to do is set up my blogs comments to display alternating background colors (although ironically I have not done so for this site yet). I’ve always felt that this helps give the comments a little more separation from each other and improve the overall look of the blog.

    Because WordPress is full of loops (homepage, category, tag, etc.), this same theory can truly be applied all over your blog. David of CyberCoder posted yesterday a great hack to alternate the background of your blog posts. Here are the steps you need to take:

    Create a loop counter. Right before the Loop begins set a variable to zero.

    if (have_posts()) : ?>

    At this point I would want the Background Color to change, insert code to test for an even number post, and if this is true, add an inline CSS style for the background that would override the stylesheet.

    <?php if ($odd = $x%2){?>
    <div style=”background-color:#404040;padding:10px 0px 10px 10px;”>
    <?php }?>

    Then, where the background color should return to the original state, run the same test for the even numbered post and close the div tag set by the Inline Style.

    <?php if( $odd = $x%2 ){?>
    <?php }?>

    The final step is to add 1 to the counter for each post, which is done at the end of the loop.

    endwhile; ?>

    Thanks for sharing this trick David!

  • Leave a Comment
  • How To: Hiding Your Sub-Categories in WordPress

    I recently got an e-mail from a reader wanting to know how to hide their sub-categories in WordPress. If you use WordPress 2.1 or newer, this is actually really easy to do.

    All you need to do is open your stylesheet and add the following anywhere:

    .children {

    You can also style the children accordingly this way if you’d like!

  • Leave a Comment
  • How To: Creating Sidebar Tabs In Your WordPress Theme

    As blogging continues to evolve and WordPress themes continue to become more functional, it is my belief that we will start to see more themes using tabs to help manage sidebar content. The problem with sidebar tabs is that they require Javascript to use, so very few themes seem to be using them.

    I won’t claim to be a whiz with javascript, but I found that creating tabs was not overly difficult. I’ve recently switched a section of my sidebar over to tabs to help manage my sidebar content. So far I am very happy with the results. It allows me to provide readers with a bunch of different site navigation options while not really taking up any extra room, so people that want it can use and it isn’t in the way for people that don’t want to browse archives or see my top commentators.

    If you are interested in doing something similar for your weblog, Headset Options wrote a series of posts studying the anatomy of a Magazine WordPress theme. The second post is actually dedicated to covering some types of javascript and focuses on Domtab and Tabber. You’ll find a nice examination and then a tutorial of how to add this to your WordPress blog. If you aren’t familiar with either type of javascript, I recommend you start with Tabber, as it is quite a bit easier to work with in my opinion.

    What is your opinion of sidebar tabs? Do you find it more convenient or does it make the content harder to find?

  • Leave a Comment
  • WordPress Hack: Using WordPress Conditional Tags

    Have you ever noticed how some pages on blogs behave different than on other pages? One of the most under-utilised features of WordPress is the wide variety of conditional tags available in WordPress. Through the use of conditional tags, you can instruct certain plugins, pictures, or code to only appear on designated pages.

    Recently I ran across a post by the Undersigned explaining Conditional Tags in WordPress, which appears was written in 2006 but is still valid with current versions of WordPress.

    Here is a list of the conditional tags available:

    • is_home()
    • is_single()
    • is_page()
    • is_category()
    • is_author()
    • is_date()
    • is_year()
    • is_month()
    • is_day()
    • is_time()
    • is_archive()
    • is_search()
    • is_paged()
    • is_404()

    One of my favorite places to use conditional tags is in the post meta area. For example, on most pages I want the comments button to display, but I don’t need it to appear on the single page because the comments are displayed on that page. At the same time, I like having an edit button on the single page, but I don’t need it on any other pages.

    Here is the code I use for the above example on one of my sites:

    <?php if (is_single()){ ?> <?php edit_post_link(__("*Edit*"), ''); ?> <?php } else { ?> | <?php comments_popup_link('0 comments', '1 comment', '% comments'); ?> <?php } ?>

    The bold code is the conditional tags I’ve set up.  You can see from the above code that I am telling WordPress to only display an Edit button on single pages, and on all other pages display the comments link.

    What other good uses have you found for conditional tags?

  • Leave a Comment