Create a WordPress reader "explore" block to promote content

Congrats. You have your own WordPress blog. Each passing day results in a handful of new unique readers. As your site continues to grow, convincing visitors to explore your site beyond your most recent posts becomes more of a challenge. Additionally, getting visitors – who happen upon older posts via search engines – to visit newer content is no small feat either. You can imagine the challenge of convincing both reader types to check out the rest of the content between your oldest and most recent posts.

Without going into detail concerning elements that your site should have, let’s look at one element that all blogs can leverage for increased page views. How do you get readers to explore content beyond their current view? By including a simple block element that introduces content before / after the current post, or articles deep within the archives. What is this simple block element comprised of?

  • Previous post – reverse chronological (if one exists)
  • Next post – chronological (if one exists)
  • Posts sharing the same categories
  • Posts with similar tags

If you browse the WordPress codex, or explore the individual files inside the default theme each installation includes, you’ll notice all of the required functions needed to create a simple "explore" – similar to what I have implemented on 5thirtyone.com. It really is just a matter of collection the functions, adding a little semantic markup, and styling to taste. The functions necessary are:

	<?php previous_post_link('%link') ?>

Codex: Used on single post permalink pages, this template tag displays a link to the previous post which exists in chronological order from the current post.

	<?php next_post_link('%link') ?>

Codex: Used on single post permalink pages, this template tag displays a link to the next post which exists in chronological order from the current post.

	<?php the_category(', ') ?>

Codex: Displays a link to the category or categories a post belongs to. This tag must be used within The Loop.

	<?php the_tags( '', ', ', ''); ?>

Codex: First available with WordPress Version 2.3, this template tag displays a link to the tag or tags a post belongs to. If no tags are associated with the current entry, the associated category is displayed instead. This tag should be used within The Loop.

Put it all together

Four simple functions placed together create an invaluable resource for readers to explore your archived content from various slices.

1
2
3
4
5
6
7
8
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<ul class="exploreThese">
		<li>Previous: <?php previous_post_link('%link') ?></li>
		<?php /* if next post exists */ next_post_link('<li>Next: %link</li>'); ?>
		<li>Category: <?php the_category(', ') ?></li>
		<li>Tag: <?php the_tags( '', ', ', ''); ?></li>
	</ul>
	<?php endwhile; else: endif; ?>

The markup above generates an unstyled unordered list which when rendered provides:

Unstyled explore links

  • Line 1 & 8: Standard WordPress loop – required if you are re-using this code outside of the standard loop in single.php.
  • Line 3: Title (link) of a previous post.
  • Line 4: Title (link) of the next post. If there are no newer posts, the entire line is ignored. Thanks Ronald.
  • Line 5: Renders assigned categories (comma separated). Links to an archive page for posts sharing the same category.
  • Line 6: Renders assigned tags (comma separated). Each tag links to an archive page for posts sharing the same tags.

Drop the block of code somewhere inside single.php so that WordPress knows to generate the proper links. Note that if you do plan on inserting the code outside of the standard loop, lines 1 & 8 are required.

Expand on the explore block

Looking for more options to offer your readers? Check out some of these functions and plugins to add to the explore block: wp_dropdown_categories, wp_get_archives, wp_tag_cloud, Related Posts, or Random Redirect. Hopefully there is enough to expand on the idea of the reader explore block on your own. Feel free to drop any questions in the comments. [Digg this]

Discuss - 15 Comments

  1. Tschai says:

    Hmmm.
    Great tips and everybody should implement it.

    Wonder whether I should implement it too, since the Unstandard theme has these already implicit scattered all over the template.
    Food for my thoughts I guess.

  2. David says:

    Thanks for publishing this information Derek.

    This is a great piece of code and I’m sure in time it will become more widely seen on WordPress sites.

    It’s a great way to encourgage uses to look at more articles on a site.

  3. Great idea Derek. It’s pretty basic but no doubt important. Related post is also a great way to do this.

  4. housne says:

    Jonathan Solichin: Great idea Derek. It’s pretty basic but no doubt important. Related post is also a great way to do this.

    great

  5. K says:

    Thanks for this additional tools. I am enjoying your Grid Focus theme and it helps me learn how to play with it.

  6. Paul says:

    Great advice :) Thanks. I added the related post plugin to my blog

    http://www.mountainbikingnewzealand.co.nz and it has gone down a treat. I’ve also focused more on tags throughout my posts and they even come up in google now.

    Cheers.

  7. Matt Wiebe says:

    Good idea. Since you’re already detecting for no next post, why not do the same for tags? (I know many people who don’t use ‘em.) You can do this by changing line 6 to:

    <?php the_tags( '<li>Tag: ', ', ', '</li>'); ?>

  8. KF says:

    Matt Wiebe: Good idea. Since you’re already detecting for no next post, why not do the same for tags? (I know many …

    one step further:

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <ul class="exploreThese">
    <?php /* if previous post exists */ previous_post_link('<li>Previous: %link</li>') ?>
    <?php /* if next post exists */ next_post_link('<li>Next: %link</li>'); ?>
    <li>Category: <?php the_category(', ') ?></li>
    <?php the_tags( '<li>Tag:', ', ', '</li>'); ?>
    </ul>
    <?php endwhile; else: endif; ?>

  9. Sheila says:

    I must be missing something because I can’t get this to work. I copied the above code, pasted it into my singlepage.php and all it did was give me an error code and not let my site be viewed.

    Right now I put the old code back on that just links to the previous/next post no matter which category it’s in. I want it to link to only ones in the same category but I’m doing something wrong somewhere.

    I’ve only been trying to find an answer to this since august. lol

  10. Derek says:

    Sheila, is it singlepage.php or single.php? I haven’t tried the parameters specifying showing posts in the same category [only] – see the Codex. Give that documentation a run through to see if you can get it working.

  11. dinu says:

    vow, I was looking for something like this :) time for some fun and play :)

  12. dinu says:

    ok, got it worked on the dummy blog :) will put it on my main blog soon :)

  13. kiko says:

    Hmmm, I am tempted to try this.

  14. Wow, it’s nice tips, features that enhance my wordpress blogs. and hopely increase page views too :)