Tag Archives: usability

Read more, continue reading, and how to easily fix it using WP

Yesterday I updated my grayish blog theme to a new blue and white theme, with more whitespace and less constraints.
While the new theme is isn’t perfect, I shined my website up a bit and it seems nice.

However, scrolling through my twitter list today, I read a blog post by Karan over at mardahl.dk, where she discusses the usage of “Read more” and “Click here” links on webpages. (Direct link to the blog post here).

This made me investigate what my own website was doing, and while the wording was a bit different, I had the same usability problem she describes in the blog post (you should really read it). People tend to overlook the wording, since lots and lots of advertisements use it. So when I use excerpts on my blog front page, and use the wording “Continue reading”, I’m actually scaring the user off, because my message will be misunderstood.

How I fixed it

When I made my new theme, I simply copied the twentyten theme supplied with wordpress 3, gave it a new name, fixed the style.css file to have my details in it and started to change the stylesheet to make it fit what I wanted.

Karan suggests using a different wording on the links, so it has the “Read more” wording, but includes the title of what it actually is, you are reading about.

She suggests the following:

Read more about Education
Read more about our Picture Archive
Read more about meeting the museum around town

And that’s the approach I’m going to use as well. However, I will be using the wordpress wording of “Continue reading”, since it was there to begin with and because it sounds more like a continuation instead of a whole new beginning to me.

Another thing to consider is, that my blog post’s link will be auto generated, so it’s easier to do something a bit more generic.

This means, that I will be using the following convention:

Continue reading “my blog post title”

To do this using the twentyten theme, open up the functions.php file that you copied with the theme.

If this is the first time you are altering the file, simply go to line 240, else search for the function named: “twentyten_continue_reading_link()”.

The function is defined as follows:

 * Returns a "Continue Reading" link for excerpts
 * @since Twenty Ten 1.0
 * @return string "Continue Reading" link
function twentyten_continue_reading_link() {
  return ' <a href="'. get_permalink() . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) . '</a>';

After browsing a bit of documentation in the “original” functions.php that wordpress core provides, it seems using globals is that way to go, if you want access to the current post object.

This will make the code look like this:

function twentyten_continue_reading_link() {
  global $post;
  return ' <a href="'. get_permalink() . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) . '</a>';

We now have access to the post object and can get the post title from the title from it.
This is done using the variable post_title from the $post object.

The finished code looks like this:

function twentyten_continue_reading_link() {
  global $post;
  return ' <div class="read_more"> '. __('Continue reading', 'twentyten') .' <a href="'. get_permalink() . '">"'. $post->post_title .'" &raquo;</a> </div>';

I added a div with a class of “read_more” around the link, so it would make it easier to style.

After the div there is the wording Continue reading and then the link to the blog post, using the title of the post.

What’s your approach ?

And do you agree with Karan that this will make it more usable or is it the same or even worse ?

All I can say is, that I have already changed it on my blog.