Customizing Read More Link

Great article about improving this little do-hickey in WordPress.

We’ve always been unimpressed with the [READ MORE…]. 

Customizing Read More Link

One of the thing that’s rather plain in some of the Genesis Child Themes is the “Read More” option for posts and pages.  Although the “Read More…” link could appear in a number of different places on a website or blog, typically you’ll see it on the custom home page, category pages, tag pages, archive pages, and search pages as well some others.

The following changes are specific to the Studio Press News Child Theme, but most of the Genesis child themes can be modified in a similar fashion.

This is how the vanilla ”Read More” link looks like: –

… I wanted to make it stand out more, like: –

Two Easy Steps to Create a Custom Read More Link

You will need to modify a couple of files of your child theme.

Step 1

First, determine what you want the wording to be for the link.  It could “More…”, “Read More”, “Continue…”, “Continue Reading…”, etc.  I personally like “Continue Reading…”.   You could also add an image instead of using words.

Add following lines to the end of your Genesis child themes‘ function.php file, before the closing ?> tag if there is one.  You’ll find this file in the same folder as your child theme.

1
2
3
4
5
6
7
8
9
// Read More changed to Continue Reading...
add_filter( 'excerpt_more', 'child_read_more_link' );
add_filter( 'get_the_content_more_link', 'child_read_more_link' );
add_filter( 'the_content_more_link', 'child_read_more_link' );
function child_read_more_link() {
  return '<a href="' .
  get_permalink() .
  '" rel="nofollow">Continue Reading &#x2026;</a>';
}

This just modifies the wording (“Read More…” to “Continue Reading …” in the example above) for the following cases: –

  • Excerpt posts (without the <– more –> tag (filter in line #2).
  • Posts where content limit is used (Genesis Settings>Content Archives) and where <– more –> tag is used or where post output is customized (filters line #3 and #4, respectively).

Notice that all three filters call the same function, “child_read_more_link”.  This function simply returns an html link to the appropriate post.  It is important to note that the html link uses a class selector “more-link” which must match your CSS class definition – see CSS example below.

Step 2

Having added the filters, the read more link still needs to be positioned and adjusted to match the colors of a particular child theme.  This is accomplished by modify your stylesheet.

Below is a sample of CSS code that you can add to your child theme’s stylesheet (usually style.css)  as follows: –

1
2
3
4
5
6
7
8
9
10
11
/* Customization for Read More Link... */
.more-link {
 background: #CCCCCC;
 float: right;
 font-size: 11px;
 font-weight: bold;
 margin: 15px 0 15px 0px;
 padding: 2px 7px 2px 7px;
 text-decoration: none;
 text-transform: none;
 }

That’s all there is to it.  The links, and the page on which they reside, look more complete and professional.

 

About Nilesh Peshawaria: Software developer by trade, and more recently Entrepreneur. Proficient WordPress Genesis Framework systems architect, website strategist, and affiliate marketer.

Connect with Nilesh on Google+

Shopping Cart
Scroll to Top