Simple Usability Tweaks for Your WordPress Theme


Published on

Presentation I gave at the WordPress London meetup on 19th June 2013. In it I cover some simple changes you can make to your theme files to improve your site visitors' experiences with Search and blog listing pages. I also mention a couple of plugins that can help with search and pagination.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Simple Usability Tweaks for Your WordPress Theme

  1. 1. Coolfields Consulting Usability Improvementsfor your WordPress ThemeGraham
  2. 2. What I‟m Going to CoverSuggested tweaks to improve usability• Helping visitors find what they‟re looking for more easily.Including• Updates to theme files for search, blog pages, archivepages, „landing‟ pages, „read more‟ links• Using plugins to improve search results and pagination.2
  3. 3. IMPROVING SEARCHRESULTS DISPLAYGiving visitors feedback about thesearch they just did3
  4. 4. Improving Search Results DisplayWhich is more informative?4TwentyElevenThemeBespoke Theme
  5. 5. Improving Search Results DisplayThe code:<h1>Search Results for: <?php the_search_query(); ?></h1><p>You searched for<strong><?php the_search_query(); ?></strong>and the search returned<?php echo $wp_query->found_posts; ?> items. Here are theresults:</p>5
  6. 6. BETTER SEARCH RESULTSBeyond the default WordPress Search6
  7. 7. Better Search ResultsWordPress Search Functionality• Powerful search capability• Built-in• DynamicBut, it does have limitations:• Search results are ordered newest first – no assessment ofpriority.• There is no indication of the use of the search terms.7
  8. 8. Better Search ResultsRelevanssi plugin• Results order based on relevance• And/or search with multiple search words• Fuzzy matching• Customised excerpts to show use of search terms• Minimum search word length• Logging searches• Compatible with custom post types• Etc8
  9. 9. Better Search ResultsRelevanssi settings9
  10. 10. Better Search ResultsRelevanssi settings10
  11. 11. Better Search ResultsCustomised excerpts highlight use of search terms11
  12. 12. CUSTOMISING POST TYPEDISPLAYBecause not all post types are the same12
  13. 13. Customising post type displayUseful for:• Archive page – by date, by category• Search results pageEspecially where you have many different post types – egEvents, Articles, Reviews, etc13
  14. 14. Customising post type display14This is anarticleThis is anevent
  15. 15. Customising post type displayLet‟s create a function…getPostTypeAtts($postType) {switch ($postType) {case page :$str = Page;break;case post :$str = News Item;break;case event :$str = Event;break;}return array($str);}15
  16. 16. Customising post type displayIn search.php, archive.php<?phpwhile (have_posts()) : the_post();$postTypeAtts = getPostTypeAtts(get_post_type());$typeName = (.$postTypeAtts[0].);?><h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); echo $typeName; ?></a></h2>16
  17. 17. Customising post type display17Client chose not to have post type forpages.
  18. 18. Customising post type displayFurther customisations:• Showing a published date, author, etc• Customising the Read More link• Etc18
  19. 19. Customising post type displaygetPostTypeAtts($postType) {switch ($postType) {case post :$str = News Item;$showDate = true;$readMore = Read the full news item;break;case job :$str = Job;$showDate = false;$readMore = Read more about the job;break;...}return array($str, $showDate, $readMore);}19
  20. 20. Customising post type displayIn search.php, archive.php<?phpwhile (have_posts()) : the_post();$postTypeAtts = getPostTypeAtts(get_post_type());$typeName = (.$postTypeAtts[0].);?><h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); echo $typeName; ?></a></h2><?php if ($postTypeAtts[1]) { ?><p>Published: <?php the_time(M jS, Y); </p> ?><?php }the_excerpt(); ?><p><a href="<?php the_permalink() ?>"><?php the_title();echo : . $postTypeAtts[2]. &raquo; ?></a></p>20
  21. 21. Customising post types21
  22. 22. PRETTY PAGINATIONHelping visitors move around lists ofposts and search results.22
  23. 23. Pretty paginationWe‟re all familiar with this:Achieved using previous_posts_link() and next_posts_link()This might be OK for site with not many posts, but what if you‟ve gotloads?23
  24. 24. Pretty paginationMight this work better?Now your visitors have a much better idea of how many posts thereare. And they can quickly re-find one later.24
  25. 25. Pretty paginationPlugins available to do this:• wp-pagenavi• wp-paginateBut you do need to edit theme files to use them.Because of customisation requirements I decided to buildmy own functionality.25
  26. 26. Pretty paginationIn WordPress, the common queries are paged by default – forexample:• Blog index page• Archive pages – categories, tags, etc• Search resultsThe number of posts shown on each page is set in adminsettings. (But can be overridden by use of thepre_get_posts hook.)Custom queries using WP_Query are not paged by default butpaging can be induced by use of posts_per_page andpaged in query arguments.26
  27. 27. Pretty paginationWithin each query there are two useful values that we canuse to help create the new style paging.get_query_var(paged)• Tells us which page of results we‟re on.$wp_query -> max_num_pages• Gives the total number of pages required to show allresults from the query.• Works with default queries and with custom queries.27
  28. 28. Pretty paginationWe‟ll need some code in the loop, and a function toactually create the HTML for the new-style paging links.Get the values at the start of the loop for use laterif (have_posts()) :$paged = (get_query_var(paged)) ?get_query_var(paged) : 1;$pageMax = $wp_query -> max_num_pages;while (have_posts()) : the_post();28Note that get_query_var(paged) is not set on first resultspage so use this ternary operator to force value of $pagedto 1 if it‟s not set.
  29. 29. Pretty paginationAt the point you want the paging links to appear call a newfunction:<?phpendwhile; // endwhile for the loop or query// If more than one page show links to othersif ($pageMax > 1) {echo <h3>Other Blog Entries</h3>;echo doPaging($wp_query, $paged);}?><?php else : ?>29
  30. 30. Pretty paginationAnd the function – part 1:function doPaging($myQuery, $paged) {$str = <ul class="paging">;// Previous link? Yes if were not on page 1if ($paged > 1) {$str .= <li><a href="?paged=.($paged-1).">&laquo;Newer Posts</a></li>;}...30
  31. 31. Pretty paginationThe doPaging function – part 2:...for($i=1; $i<=$myQuery->max_num_pages; $i++){// Check if were on that pageif ($paged==$i) {// we are, so no link$str .= <li class="this-page"><span class=“srdr">Page</span>.$i.</li>;} else {// put out the link$str .= <li><a href="?paged= . $i."><spanclass=“srdr">Page </span>.$i.</a></li>;}}...31
  32. 32. Pretty paginationThe doPaging function – part 3:...// Older posts link? Yes if were not on last pageif ($paged < $myQuery->max_num_pages) {$str .= <li><a href="?paged=.($paged+1).">OlderPosts &raquo;</a></li>;}$str .= </ul>;return $str;}32
  33. 33. Pretty paginationPossible Enhancements:• Customisation of text strings – eg “Next” and “Previous”where custom post types or custom queries are used – theresults may not all be in chronological order.• Amendments to function call to cater for paging on searchresults – the required URLs for search results pages are in adifferent format.• Catering for sites with many, many pages of posts:33
  34. 34. SummaryWe‟ve seen just a few small enhancements that can be made to oursites that can improve the visitors‟ experience.There are others:• Keeping the search query in the search box when showing results.• Secondary navigation for child and sibling pages – not just relying ondropdown menus.34
  35. 35. Thanks for listening –any (more) questions?