In this two-part article by Jean-Baptiste Jung, we will see what can be done for enhancing user experience and making your WordPress blog a better place.

In this part, you will learn:

• Replacing the Next and Previous links by a paginator
• Highlighting searched text in search results
• Using the CSS sliding doors technique within WordPress

As a blogger, I read loads of blog posts every day, on many different blogs. Very often, I'm scared to see how many blogs have a non user-friendly interface.

How often does it happen that you can't click on the logo to go back to the blog homepage, or can't find what you're looking for by using the search engine? It is a well known fact that in blogging the content is king, but a nice, user friendly interface makes your blog look a lot more professional, and much easier to navigate. In this article, I'll show you what can be done for enhancing user experience and making your blog a better place.

Replacing the Next and Previous links by a paginator

When a web site, or blog, publishes lots of articles on a single page, the list can quickly become very long and hard to read. To solve this problem, paginations were created. Pagination allows displaying 10 articles (for example) on a page. If the user wants, then he or she can go to the next page, or click on a page number to directly go to the related page.

I definitely don't understand why WordPress still doesn't have a built-in pagination system. Instead, at the bottom of each page you'll find a Next link to go to the next page, and a Previous link to go back. This works fine when you're on page two and would like to go to page three, but what if you're on page one, and remember a very interesting article which was located on page eight? Are you going to browse page per page until you find your article? The answer is yes, because you don't have the choice. You can't jump from page one to page eight.

In this recipe, I'll show you how to integrate a pagination plugin in your WordPress blog theme. One very good point of this recipe is that the plugin file is embedded in your theme, so if you're a theme designer, you can distribute a theme which has a built-in pagination system.

Getting ready

To execute this recipe you need to grab a copy of the WP-PageNavi plugin, which can be found at http://wordpress.org/extend/plugins/wp-pagenavi/. I have used version 2.40 of the Wp-PageNavi plugin in this example.

Once you have downloaded it, unzip the zip file but don't install the plugin yet.

How to do it

1. Open the WP-PageNavi directory and copy the following files into your WordPress theme directory (For example, http://www.yourblog.com/wp-content/ theme/yourtheme).
   • wp-pagenavi.php
   • wp-pagenavi.css
2. Once done, edit the index.php file.

   You can do the same with other files, such as categories.php or search.php as well.

3. Find the following code (or similar) in your index.php file:

   <div class="navigation">
        <div class="alignleft"><?php next_posts_link('Previous  
            entries') ?></div>
        <div class="alignright"><?php previous_posts_link('Next  
            entries') ?></div>
   </div>
   

4. Replace that with the following code:

   <?php
        include('wp-pagenavi.php');
        if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
        ?>
   

5. Save the index.php file. If you visit your blog now, you'll see that nothing has changed. This is because we have to call a function in the wp-pagenavi.php file.
6. Open this file and find the following code (line 61):

   function wp_pagenavi($before = '', $after = '') {
   global $wpdb, $wp_query;
   

7. We have to call the pagenavi_init() function, so let's do this in the following way:

   function wp_pagenavi($before = '', $after = '') {
   global $wpdb, $wp_query;
   pagenavi_init(); //Calling the pagenavi_init() function
   

8. Now, save the file and refresh your blog. The pagination is now displayed! This is great news, but the pagination doesn't look good.
9. To solve this problem, you simply have to integrate the wp-pagenavi.css file that you copied earlier in your theme directory. To do so, open the header.php file from your theme and paste the following line between the <head> and </head> tags:

   <link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/pagenavi. 
            css';?>" type="text/css" media="screen" />
   

10. Visit your blog homepage one more time. The pagination looks a lot better. You may have to edit the wp-pagenavi.css file in order to make your pagination look and feel ft your blog style.

    

How it works

In this recipe, you have discovered a very useful technique that I often use on my blogs, or in the themes that I distribute—the integration of a WordPress plugin into a theme.

When the plugin is integrated into your theme as I have shown you in this example, there's no activation process needed. All of the work is done directly from the theme.

The WP-PageNavi plugin itself works by using two values—the number of posts to be displayed per page and the first post to be displayed. Then, it executes the relevant query to WordPress database to get the posts.

The pagination bar is calculated by using the total number of posts from your blog, and then dividing this value by the number of posts per page.

One good point of this technique is that the plugin is integrated in your blog and you can redistribute the theme if you want. The end user will not have to install or configure anything.

Highlighting searched text in search results

I must admit that I'm not a big fan of the WordPress built-in search engine. One of its weakest features is the fact that searched text aren't highlighted in the results, so the visitor is unable to see the searched text in the context of your article.

Getting ready

Luckily, there's a nice hack using regular expressions to automatically highlight searched text in search results. This code has been created by Joost de Valk who blogs at www.yoast.com.

How to do it

This useful code is definitely easy to use on your own blog:

1. Open your search.php file and find the following:

   echo $title;
   

2. Replace it with the following code:

   <?php
       $title = get_the_title();
       $keys= explode(" ",$s);
       $title = preg_replace('/('.implode('|', $keys) .')/iu', 
           '<strong class="search-excerpt"></strong>',$title);
   ?>
   

3. Save the search.php file and open the style.css file. Append the following line to it:

   strong.search-excerpt { background: yellow; }
   

4. You're done. Now, the searched text will be highlighted in your search results.

How it works

This code is using PHP regular expressions to find the searched terms in the text returned by WordPress. When an occurrence has been found, it is wrapped in a <strong> HTML element.

Then, I simply used CSS to define a yellow background to this element.

100 simple but incredibly useful recipes to take control of your WordPress blog layout, themes, widgets, plug-ins, security, and SEO Take your WordPress blog to the next level with solutions to common WordPress problems that make your blog better, smarter, faster, and more secure Enhance your SEO and make more money online by applying simple hacks Fully tested and compatible with WordPress 2.7 Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible  http://www.packtpub.com/wordpress-2-7-cookbook/book

Using the CSS sliding doors technique within WordPress

The CSS "sliding doors" technique allows you to create sophisticated tabs for your menus. Sadly, WordPress doesn't allow you to use a <span> element in the wp_list_pages() and wp_list_categories() functions.

Getting ready

In order to achieve this very cool menu, you first need to have a bit of knowledge about the CSS sliding doors technique, and the necessary images.

If you need to know more about this technique, you should consider reading this article: http://www.alistapart.com/articles/slidingdoors/

If you don't already know this awesome technique here's a quick example to get you started:

Let's start by building a typical navigation list:

<ul id="nav">
<li><a href="#">link n°1</a></li>
<li><a href="#">link n°2</a></li>
<li><a href="#">link n°3</a></li>
</ul>

If we use CSS to apply background images to our links in order to make this menu look prettier, we'll quickly come across a big problem. We must add a fixed width to the links otherwise, the image will be truncated for a very short link, or the link will overflow the image if its width is too long.

That's why sliding doors are very useful. We just have to add a span element inside the link. Then, in our CSS, assign a different background image to both the span element and the link.

<ul id="nav">
<li><a href="#"><span>link n°1</span></a></li>
<li><a href="#"><span>link n°2</span></a></li>
<li><a href="#"><span>link n°3</span></a></li>
</ul>

Our CSS should look like this:

#nav a, #nav a:visited {
    display:block;
}
#nav a:hover, #nav a:active {
    background:url(images/tab-right.jpg) no-repeat 100% 1px;
    float:left;
}
#nav a span {
    float:left;
 display:block;
}
#nav a:hover span {
    float:left;
    display:block;
    background: url(images/tab-left.jpg) no-repeat 0 1px;
}

Please note, as this is only an example, the preceding CSS isn't complete and only shows how to apply the sliding doors hack.

How to do it

I have read many WordPress users who modified their WordPress core files to achieve this technique. I have already talked about how modifying core files is a bad idea. Instead, let's use some regular expressions (as we did in the previous recipe!) to obtain the desired effect.

Applying this hack to pages

1. Open your header.php file (or any file you'd like to apply this technique).
2. Look up for the following function:

   <ul>
      wp_list_pages();
   </ul>
   

3. Replace it by the following code:

   <ul id="nav">
       <li><a href="<?php echo get_option('home'); 
            ?>/"><span>Home</span></a></li>
       <?php echo preg_replace('@<li([^>]*)><a([^>]*)>(.*?)</a>@i', 
            '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo= 
            0&orderby=name&exlude=181&title_li=&depth=1')); ?>
   </ul>
   

4. Save the header.php file and open the style.css file. Finally append the following styles:

   #nav a, #nav a:visited {
       display:block;
       }
       #nav a:hover, #nav a:active {
       background:url(images/tab-right.jpg) no-repeat 100% 1px;
       float:left;
       }
       #nav a span {
   float:left;
       display:block;
       }
       #nav a:hover span {
       float:left;
       display:block;
       background: url(images/tab-left.jpg) no-repeat 0 1px;
       }
   

You may have to style it a bit more in order to make it compatible with your blog's look and feel, but basically, you're done.

Applying this hack to categories

Of course, you can easily apply the previous hack to categories. Follow these simple steps:

1. Open your header.php or sidebar.php file, depending on where your categories are listed
2. Look up for the following function:

   <ul>
       wp_list_categories();
   </ul>
   

3. Replace it by this code:

   <ul id="nav">
       <li><a href="<?php echo get_option('home'); 
            ?>/"><span>Home</span></a></li>
       <?php echo preg_replace('@<li([^>]*)><a([^>]*)>(.*?)</a>@i', 
            '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo= 
            0&orderby=name&exlude=181&title_li=&depth=1')); ?>
   </ul>
   

4. Save the file and paste these styles to your style.css file:

   #nav a, #nav a:visited {
           display:block;
       }
       #nav a:hover, #nav a:active {
           background:url(images/tab-right.jpg) no-repeat 100% 1px;
           float:left;
       }
       #nav a span {
           float:left;
           display:block;
       }
   #nav a:hover span {
           float:left;
           display:block;
           background: url(images/tab-left.jpg) no-repeat 0 1px;
       }
   

How it works

As you can see, applying this hack to categories or pages is almost the same. Basically, you just have to change the wp_list_categories() function for categories and wp_list_pages() for pages.

To embed <span> elements in the list, this code uses the PHP preg_replace() function with the wp_list_categories() function as a second argument. In the wp_list_categories() function, the echo=0 parameter is specified, which means that the function doesn't print the result on screen but instead returns the result to be used in PHP.

Summary

In this part we learnt a few methods for enhancing user experience and making your blog a better place. We saw how to use paginator, highlight searched text in search results, and using the CSS sliding doors technique within WordPress

In the second part we will create a dropdown menu for your categories, add a breadcrumb to your theme, display related posts and tabs on your sidebar.

If you have read this article you may be interested to view :

• Enhancing User Experience with WordPress 2.7(Part 2)
• Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 1)
• Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

100 simple but incredibly useful recipes to take control of your WordPress blog layout, themes, widgets, plug-ins, security, and SEO Take your WordPress blog to the next level with solutions to common WordPress problems that make your blog better, smarter, faster, and more secure Enhance your SEO and make more money online by applying simple hacks Fully tested and compatible with WordPress 2.7 Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible  http://www.packtpub.com/wordpress-2-7-cookbook/book

About the Author

Jean-Baptiste Jung is a Web developer, Web designer, and blogger born in Paris, France and now living in Wallonia (French-speaking part of Belgium) with his wife and cat.

Jean unearthed the World Wide Web in 1998 and started creating web sites three years later. In 2006, while working as a freelance Web developer for a well known French TV channel, Jean started to work with blogs and WordPress. A few months later, he created his first blog.

He became immensely passionate about WordPress and launched a blog dedicated to WordPress hacks, http://www.wprecipes.com, which quickly managed to become one of the most popular WP-related web sites over the Internet. Meanwhile, Jean is also an author on some prestigious blogs, such as WpHacks, ProBlogDesign, and Smashing Magazine.