This is Day 5 of “30 WordPress hacks in 30 Days”!

One of my WordPress pet peeves is not being able to find what I want quickly. I like options. Lots of options. Many blog owners are not web designers by trade, so basic “usability” techniques are not usually something they consider. While the “blog” paradigm has been around many years now, sometimes I think that some basic usability principles for web sites have been lost. Too much is taken for granted. The average web user doesn’t know WordPress from a printing press. Keep this in mind every time you tweak your blog. With that in mind, today you will learn how to hack and customize the following navigation points within your blog based on this tutorial:

  • Breadcrumbs
  • Next and Previous Links: Pagination
  • Next and Previous Links: Single Page
  • More Links and Excerpts
  • Multi-Page Navigation
  • Related Posts
  • Most Viewed Posts
  • Most Popular Posts
  • Category Images
  • Sidebar Options

So – let’s get started! Click to go to the next page below…

–~~~~~~~~~~~~–

1. Adding Breadcrumbs to WordPress Navigation

Breadcrumbs have been around since the beginning of web sites, it’s just the navigation at the top of the page telling you where you came from and how to get back. It’s named after leaving a “trail of breadcrumbs” in the forest to help find your way back.

breadcrumb example

Above is an example of a breadcrumb here on this site. The page in this example is 3 levels deep. The higher 2 levels are linked to the user can quickly and easily go back to the parent page or home page at any time. Breadcrumbs are something that all visitors are used to on all professional web sites. Unfortunately, by default WordPress doesn’t provide any function for breadcrumbs in it’s default template at all – and I don’t often see it in themes for download. Also, it seems that obtaining a working breadcrumb plugin may currently not be that easy. Possibly the most complex breadcrumb plugin, Breadcrumb Nav XT currently has a server 500 error. Both Hansel and Gretal Breadcrumb Plugin and Dan Peverill’s Breadcrumb Plugin are no longer available as well. I use the Dan Peverill Breadcrumb plugin, and it works for me in every version of WordPress up to 2.3.3. I haven’t tested it yet in version 2.5. I can’t find it anywhere else on the web (and it works for me on all my sites), so I’ll just allow you to download the version I have. Click here to download Breadcrumb 0.5.1.

Once you download and install the plugin, just place the following code outside the loop wherever you want to display a breadcrumb:


<h3><?php breadcrumb(); ?></h3>

I have my breadcrumb in an h3 heading, but you can change the heading size or style it any way you want to make it properly fit your WordPress theme. Click to go to the next hack below…

–~~~~~~~~~~~~–

2. How to Hack Ugly WordPress Next and Previous Links

Since you probably own a WordPress blog, I’m sure you already know about the default << Next and >>Previous links at the bottom of each and every WordPress powered home page. This was a great conceptual idea (allowing people browse through your posts) but not at all what they expect. If you have say, 100 posts, users expect to browse through them like browsing google. I want links to page 2, 3, 4, and 5, with options to jump to the end, the next 5, or back again. Otherwise with default WordPress next and previous links, to get to “page 5″ I have to click and actually load 5 pages. That’s either going to make me leave your blog pretty quick, and keep a lot of users from getting to a lot of your content.

Lester Chan has a plugin I’ve written about before (and use) called WP-PageNavi that does exactly what I just described. It displays a google style navigation like this:

example page navigation

I’ve been very happy with that so far, and you can style the output any way you wish using the plugin’s stylesheet. However, today I did find a plugin that is slightly better that’s called WP-Page Numbers. It’s better because it gives you 5 great style options out of the box that you can choose (so it’s prettier!) – and if you like one you don’t have to spend your time hacking WP-PageNavi’s stylesheet. Here are the options it has to choose from:

wp page numbers wordpress plugin example themes

The nice thing about this plugin is that you can choose to use one of the included themes, or point to your own theme folder with your style. There are also a lot of other miscellaneous options as well. I’ve switched to this plugin on the homepage now, but haven’t updated my other template pages just yet. You will want to update the following pages (if you have them) with this new pagination navigation: index.php, archive.php, category.php, tag.php, or any other template that gets 10 posts at a time from using the loop. Go to the next hack below…

–~~~~~~~~~~~~–

3. WordPress Next and Previous Links for Single Pages

On a single page (which uses your single.php template) “the loop” gets a single post, so you can’t use a pagination plugin like we just did. After a post on your “single.php” by default WordPress shows a linked title to your previous and next posts (if there is one). I try to spruce this up just a little to users understand what these links really are with code like this:


<div class="navigation">
 <div class="alignleft"><?php previous_post_link('&laquo; Post before this: %link') ?><br /></div>
 <div class="alignright"><?php next_post_link('%link &raquo; Post After This') ?></div>
 <div style="clear:both;"></div>
</div>

Basically all I did here was add some bolded text before and after the links. Maybe you can think of something a little more poignant for your links – or style them better than my example here. Go to the next hack below…

–~~~~~~~~~~~~–

4. WordPress More Links and Excerpts

There are two ways posts can be shown, the full posts, or an excerpt. In WordPress Hack #1: query_posts I showed you what to add to “the loop” to make posts excerpts. For your homepage, there is an easier way to do this with the Homepage Excerpts Plugin.

homepage excerpts plugin example options wordpress

This plugin (as you can see in the options above) gives the flexibility to say how many posts will be full and how many excerpted, and how many words to show. You can also choose to use “custom excerpts”, which is a field you can fill out when writing a post. It’s very important you understand how this works. When you create a post there is a field you can write you own “excerpt” into. You probably never noticed it, it’s below where you write your posts, and it looks like this:

excerpt example

If you write a “custom excerpt” in this field, and then use the homepage excerpts plugin and change “use custom excerpts” to “yes” – then the custom excerpt will show instead of the first 50 words from the post. This means that you can have original content on your homepage that’s not on single post pages. You could also use these custom excerpts for other things, like a featured block on your homepage. It’s a lot more work to write one for every post you have, but could be well worth it depending on how you’re using your blog.

Now that you know how to change your homepage to excerpts using a plugin, let’s find out how one hacks code in a theme to do this at will! Once again, you can find this information on the WordPress Codex page “Customizing the Read More”. On any wordpress theme template page that displays posts in a “10 per page” fashion, like your homepage (index.php), a category or tag page (category.php or tag.php if you have one), or an archive page (archive.php) – each of these pages has a loop containing the call “the_content”. Anytime you see “the_content” in the loop – it’s a PHP call to get “full posts”. In other words, code that looks like this gets full posts:

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

If you want to change that page to show excerpts instead of full posts, just change “the_content” to “the_excerpt” like this:

<div class="entry">
<?php the_excerpt('Read the rest of this entry &raquo;'); ?>
</div>

To learn how to customize the actual “read more” text in the link to the full post, The Read More Codex Page has all the details and sample code you need.

–~~~~~~~~~~~~–

5. How to Achieve Multi-Paged Post Navigation in WordPress

Alright – it took a day to get this hack working, but I’m glad I figured out what the problem was so I could pass it on to you. The page for this plugin has some issues copying and pasting the appropriate code for some reason (on some pc’s). I copied the code to get this working and got a single instead of double dash, and the quotes were converted to backticks sometimes too. Just follow my queues in this hack and you’ll be fine…

This is something I wish that more people used, and I have to admit that I’m a victim of not doing it myself. I tend to write very, very long descriptive posts. If you printed some of them out they might span 3-6 printed pages or more. I’m breaking a lot of rules all at once here, in addition to losing money at the same time. First, the average person learns in “chunks”. They take in bits of information at once, and too much at once is an overload. I have structured this hack in “10 Steps” because that’s easy to understand and break down by heading. It also makes it easier for users to jump to the one thing or two that interests them if they don’t want or have the time to read all 10. Nevertheless, having all 10 on one big long post page is a but cumbersome. It would be smarter (and more professional) if I could break it down into “10 pages” wouldn’t it? But I still want this to be a post, and I’d hate to have to create 10 separate WordPress pages to get what I want. Oh – and as a bonus if I find a way to do this, I will have 10 different chances to show ads to users (instead of just one), and 10 different post pages to index in the search engines as well. This post sure looks better now that it’s broken down hack by hack!

How do we achieve what we want? It’s of course (yet another) WordPress Plugin called “Multi-Page Toolkit”. This is something I had wanted to do for a loooong time, and this plugin does it well. Something that I purposely neglected to tell you in the last section was that you can separate long posts over multiple pages yourself, the wordpress code to do this is simply:

<!–nextpage–>

Take care to make sure that the code I just gave you has 2 dashes before and after nextpage. When I copied it from the plugin page I only got one dash even though the plugin author (Tarkin) confirms that there were two dashes in the content of his post. Just paste that (in code view) in any post where you want a page break, and you can break up a post into as many pages as you want. The problem with the default WordPress way of doing this is of course the navigation! This plugin fixes all that, because it gives you the abiltiy to add titles or headings to each page, displays the number of pages, and allows users to quickjump wherever they want. Is it more work? Yes. But for longer posts, and the extra money you’ll make by putting many more ads in front of users eyeballs – it’s work it. It also makes your site that much more professional and more like c|Net, hardware review sites, or some of the big boys blogs!

There are a couple different ways to use this plugin. One is to provide better navigation from your index, category, and tag pages (that use the loop for listing your posts). If you go to my homepage and find this post you’ll see that in my “meta” after the post heading it now says “(11 pages)”. If you want to add that to your post listing pages, just add this code…

<?php if(function_exists(’TA_display_pages’)) { TA_display_pages(’ <small>(’,’ pages)</small>’,”,’total’); } ?>

There are multiple options you can display like ‘page 1 of 3′ or ‘you are on page 1 now’, read the plugin page to get them.

As I said previously – to setup a long post into multiple pages it’s pretty easy. First, just find the places in your post you want to break it into individual pages and place this code tag:

<!–nextpage–>

Next, right after that you want to insert this code tag and give each page a title:


<!–pagetitle:PAGE TITLE HERE–>

Ok, now save your post. Next in your WordPress dashboard go to your “Presentation->Theme Editor” and edit your Single Page or “single.php” file. You want to put this code (that displays the navigation) “before the loop” so it appears at the top of the page:

that's the code to diplay the "default options" (as described on the plugin page). You can choose to change any of those options by adding them like this...

<div align="center">
<?php TA_content_jump('Page :',' ', 2, 2, 0, False, '«', '»'); ?>
</div>

You can see on this post I chose to use the "ordered post" or list option (number 3). If you're not used to writing code, just make sure that any content or text you want to add is in a single quote as in my last code example. Numbers and true or false don't have to be. I with that this plugin had all these formatting options from the plugin options page in the WordPress dashboard, but for now - it works just as well if you configure the options for yourself! This has to be my favorite hack out of the 10 because it does so much for usability, monetization, and SEO! Click below to go to the next hack...

--~~~~~~~~~~~~--

6. How to Add Related Posts After Content in WordPress

Let's face it, if you're a blogger, then you're a marketer - right? That's why blogging isn't just "writing" it's also a lot of "online marketing" as well. The same concepts apply to a blog that apply in everyday life. You get a receipt at the supermarket, there's an ad on the back. You're at the checkout and there's all kinds of things displayed to buy that you might have forgotten. The department store asks you if you want to apply for a credit card to get 10% off. The drug store gives you special rewards by using their "card" and prints coupons you might be interested in based on what you buy.

Inference. Relevance. Upselling.
All things you can do in a blog.

Beyond an article or a page (the content), your job is to design a blog:

  • that's easy to read...
  • that's monetized well...
  • that's easy to use...
  • that keeps them reading as long as possible...
  • and that makes them want to come back...

I can't think of a better way to keep someone reading on your blog than automatically recommending relevant content to them as soon as they are done with the current post. I've used a LOT of plugins for this, and for me (right now) the easiest to implement, easiest to style, and the most painless over time (maintaining) has been Aizatto's Related Posts. The original web site and author for this have disappeared, so that link is a zipped copy of what I'm using right now. If I come come across a better (and more supported) version, or an update on this version I'll update this article right away.

I like this Related Posts plugin because it automatically inserts the related post block after your content, and you don't have to paste any code in your template or theme files at all. It's VERY dirt simple to implement (and has worked for me up do WordPress 2.3.3). I've yet to test it in 2.5. You can choose in options how many related posts to show, how many words in the title, you can show excerpts (or not), and you can choose whether or not to show on "pages", posts, and even your RSS feed. You can turn the auto-inserting off as well, and manually place the related block if it doesn't appear in your theme where you would like it. You can style it by writing and pasting style code right in the options page - so again, no code hacking in your stylesheet or uploading a plugin stylesheet. You can see it in action on my homepage.

If you're interested in some other options, check out Customizable Post Listings, and Random Posts - both seem to be well supported up to WordPress 2.5.

--~~~~~~~~~~~~--

7. How to Display the Most Viewed Posts in WordPress

I talked about this once before, I use the Lester Chan plugin WP-PostViews to display my 10 most viewed posts (with counts) in the sidebar, and also to display my top 25 posts on my Archived Posts Sitemap. This is the same plugin I use to display the number of views next to the heading title on each post, and page within this site. Under the Usage Tab of WP-PostViews you'll find some code for "most viewed posts" as well as "most viewed posts for a category" which is very handy. The nice thing about this plugin as well is that when you download it, you get two versions. Once that you can place the code wherever you want to see post counts, and another which is a widget you can just drag and configure in your sidebar. Sometimes I wish all plugins had a "widget".

--~~~~~~~~~~~~--

8. How to Show Most Popular Posts in WordPress

The Popularity Contest Plugin by Alex King is very popular across WordPress blogs all over the world. It continues to work up to WP 2.3.3 (not sure about 2.5). It should, Alex is very active in the WordPress community and supporting his plugins and software. If you've ever seen the text "Popularity: 6% [?]" on a blog, this is the plugin doing it. It's not my favorite, but a lot of people use it.

--~~~~~~~~~~~~--

9. How to Assign and Show Category Images in WordPress

Most themes list the categories that the post was assiged to either with the header title or after the content (or both). One thing that many people want to do is to be able to assign images to the category names and display them instead of the text. I do this, and I wrote up how to do it in one of my most popular posts to date WordPress Theme Hack Show Category Images. My hack works, the code still works - but guess what? Like all things, there is now a better way to do this, and of course the Category Icons WordPress Plugin. It's a beautiful plugin only out a few months now, well documented and supported. Everything is configurable from the options menu, you can use it on your index (home) page, post pages, or even your sidebar! You can do icons only, or text and icons, and it comes with a widget for the sidebar. So, you can use my code in that previous article if you want - but if you want to assign images, graphics, or icons to WordPress categories I think you should just use this plugin instead.

--~~~~~~~~~~~~--

10. Sidebar Navigation Options in WordPress

The sidebar is where a lot of users look first when looking for what they want, or additional content of yours they may be interested in. Ordinariy what we see in the sidebar are blog network widgets (mybloglog, blogcatalog, bumpzee, entrecard), some type or archived lists (monthly archive links or a calendar), your recents posts, and in some themes recent comments. I've added my most read posts in my sidebar as I mentioned previously. There are a hundred ways to tweak that sidebar with code, but since you're probably already overwhelmed by the first 9 ways to hack your WordPress navigation I'm going to take it easy on your in the 10th way. If you really want code to hack your side bar, it's already published on the WordPress Codex page for "Customizing Your Sidebar" anyway - no sense in duplicating that.

Widgets. That's right - all the options I've going to give you for pimping out your sidebar nav will be with widgets. Just install like a plugin, enable, and then go to "Presentation -> Widgets" to drag and drop them into your sidebar. Don't forget to hit the "update" button!

First - I would recommend viewing the WordPress Widget Plugin Page to get a list of everything available. Then, take a look at the ones I recommend:

Drop down Archives Widget: Makes your achives a drop down, saving precious sidebar space. 'nuf said...oh, and there's the Dropdown blogroll links widget too.

You could use the List Author's Widget.

or the Parent Pages Widget.

Show your del.icio.us bookmarks using the del.icio.us cached++ widget.

The best widget I think (which isn't exactly navigation but greatly helps you) is the WordPress Plugin iFrame Widgets. What does it do? Well, it takes those blog network widgets and puts them in an iframe. Why is that helpful? When your blog page loads and it hangs because it has to wait for those blog network widgets to load to continue loading your page. This WordPress widget puts those widgets in an iFrame and your page will load normally (first) and those blog network widgets will appear when and if the code comes back from their network servers. If for some reason they don't load, they won't take up any space in your sidebar!

I hope you have learned all you need to know about hacking WordPress navigation today - as always please comment if you have something to add or a question!