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
- 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
- Once done, edit the index.php file.
You can do the same with other files, such as categories.php or search.php as well.
- 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> - Replace that with the following code:
<?php
include('wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?> - 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.
- Open this file and find the following code (line 61):
function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query; - 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 - Now, save the file and refresh your blog. The pagination is now displayed! This is great news, but the pagination doesn’t look good.
- 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" /> - 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:
- Open your search.php file and find the following:
echo $title;
- 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);
?> - Save the search.php file and open the style.css file. Append the following line to it:
strong.search-excerpt { background: yellow; } - 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.
