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.
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.
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.
You can do the same with other files, such as categories.php or search.php as well.
<div class="navigation">
<div class="alignleft"><?php next_posts_link('Previous
entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next
entries') ?></div>
</div>
<?php
include('wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?>
function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;
function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;
pagenavi_init(); //Calling the pagenavi_init() function
<link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/pagenavi.
css';?>" type="text/css" media="screen" />
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.
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.
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.
This useful code is definitely easy to use on your own blog:
echo $title;
<?php
$title = get_the_title();
$keys= explode(" ",$s);
$title = preg_replace('/('.implode('|', $keys) .')/iu',
'<strong class="search-excerpt"></strong>',$title);
?>
strong.search-excerpt { background: yellow; }
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.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…