Simple Usability Tweaks for Your WordPress Theme

Coolfields Consulting www.coolfields.co.uk
@coolfields
Simple Usability Improvements
for your WordPress Theme
Graham Armfield
graham.armfield@coolfields.co.uk
@coolfields

What I‟m Going to Cover
Suggested tweaks to improve usability
• Helping visitors find what they‟re looking for more easily.
Including
• Updates to theme files for search, blog pages, archive
pages, „landing‟ pages, „read more‟ links
• Using plugins to improve search results and pagination.
2

IMPROVING SEARCH
RESULTS DISPLAY
Giving visitors feedback about the
search they just did
3

Improving Search Results Display
Which is more informative?
4
TwentyEleven
Theme
Bespoke Theme

Improving Search Results Display
The 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 the
results:</p>
5

BETTER SEARCH RESULTS
Beyond the default WordPress Search
6

Better Search Results
WordPress Search Functionality
• Powerful search capability
• Built-in
• Dynamic
But, it does have limitations:
• Search results are ordered newest first – no assessment of
priority.
• There is no indication of the use of the search terms.
7

Relevanssi plugin
http://wordpress.org/plugins/relevanssi/
• 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
• Etc
8

Relevanssi settings
9

Relevanssi settings
10

Customised excerpts highlight use of search terms
11

CUSTOMISING POST TYPE
DISPLAY
Because not all post types are the same
12

Customising post type display
Useful for:
• Archive page – by date, by category
• Search results page
Especially where you have many different post types – eg
Events, Articles, Reviews, etc
13

14
This is an
article
This is an
event

Let‟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

In search.php, archive.php
<?php
while (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
Client chose not to have post type for
pages.

Further customisations:
• Showing a published date, author, etc
• Customising the Read More link
• Etc
18

getPostTypeAtts($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

In search.php, archive.php
<?php
$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].' »' ?></a></p>
20

PRETTY PAGINATION
Helping visitors move around lists of
posts and search results.
22

Pretty pagination
We‟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 got
loads?
23

Pretty pagination
Might this work better?
Now your visitors have a much better idea of how many posts there
are. And they can quickly re-find one later.
24

Pretty pagination
Plugins available to do this:
• wp-pagenavi
• wp-paginate
But you do need to edit theme files to use them.
Because of customisation requirements I decided to build
my own functionality.
25

Pretty pagination
In WordPress, the common queries are paged by default – for
example:
• Blog index page
• Archive pages – categories, tags, etc
• Search results
The number of posts shown on each page is set in admin
settings. (But can be overridden by use of the
pre_get_posts hook.)
Custom queries using WP_Query are not paged by default but
paging can be induced by use of posts_per_page and
paged in query arguments.
26

Pretty pagination
Within each query there are two useful values that we can
use 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 all
results from the query.
• Works with default queries and with custom queries.
27

Pretty pagination
We‟ll need some code in the loop, and a function to
actually create the HTML for the new-style paging links.
Get the values at the start of the loop for use later
if (have_posts()) :
$paged = (get_query_var('paged')) ?
get_query_var('paged') : 1;
$pageMax = $wp_query -> max_num_pages;
28
Note that get_query_var('paged') is not set on first results
page so use this ternary operator to force value of $paged
to 1 if it‟s not set.

Pretty pagination
At the point you want the paging links to appear call a new
function:
<?php
endwhile; // endwhile for the loop or query
// If more than one page show links to others
if ($pageMax > 1) {
echo '<h3>Other Blog Entries</h3>';
echo doPaging($wp_query, $paged);
}
?>
<?php else : ?>
29

Pretty pagination
And the function – part 1:
function doPaging($myQuery, $paged) {
$str = '<ul class="paging">';
// Previous link? Yes if we're not on page 1
if ($paged > 1) {
$str .= '<li><a href="?paged='.($paged-1).'">«
Newer Posts</a></li>';
}
...
30

Pretty pagination
The doPaging function – part 2:
...
for($i=1; $i<=$myQuery->max_num_pages; $i++){
// Check if we're on that page
if ($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.'"><span
class=“srdr">Page </span>'.$i.'</a></li>';
}
}
...
31

Pretty pagination
The doPaging function – part 3:
...
// Older posts link? Yes if we're not on last page
if ($paged < $myQuery->max_num_pages) {
$str .= '<li><a href="?paged='.($paged+1).'">Older
Posts »</a></li>';
}
$str .= '</ul>';
return $str;
}
32

Pretty pagination
Possible Enhancements:
• Customisation of text strings – eg “Next” and “Previous”
where custom post types or custom queries are used – the
results may not all be in chronological order.
• Amendments to function call to cater for paging on search
results – the required URLs for search results pages are in a
different format.
• Catering for sites with many, many pages of posts:
33

Summary
We‟ve seen just a few small enhancements that can be made to our
sites 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 on
dropdown menus.
34

Thanks for listening –
any (more) questions?
graham.armfield@coolfields.co.uk
@coolfields
35

Simple Usability Tweaks for Your WordPress Theme

More Related Content

What's hot (20)

Similar to Simple Usability Tweaks for Your WordPress Theme (20)

More from Graham Armfield (20)

Recently uploaded (20)

Simple Usability Tweaks for Your WordPress Theme