Custom Excerpt “more” Link

Recently I have written about individual excerpt lenghts in BranfordMagazine. Today I will show you how to customize the excert “more” textstring and make it a real clickable link for a better user experience.

Better user experience with clickable excerpt “more”

By default the excerpt of WordPress displays an un-clickable […] at the end of the default 55 words. Well of course this makes the user somehow aware of the fact that there is more to read but he cannot click on the […] string which causes irritations with less experienced users. Wouldn´t it be great if WordPress would add a real link at the end of an excerpt? Sure it would and here is how to do it.

The Function

Open your tools/various-functions.php file inside the branfordmagazine-pro themefolder and edit this (or similar) codesnippet:

'.__('[continue reading...]','branfordmagazine').'';
}
add_filter('excerpt_more', 'new_excerpt_more');
?>

In this example a link [continue reading…] will appear at the end of the excerpt after a linebreak. It is also prepared for localization. If you want something different just change the “[continue reading…]” string to e.g. “read on” or whatever you like. If you want the link to appear right behind the last word of the excerpt remove the < br / > tag.

A little styling

As you can see there is a CSS class called .excerpt_more. You can now style this class to meet your requirements. it can be found in the style.css file.

/* "more" Links in the excerpts */
.excerpt_more a { 
	color:#840000!important;
	}

.excerpt_more a:hover {
	text-decoration:none;
	}

Works everywhere

This little trick is not just for BranfordMagazine. You can use it with any theme as long as you run WordPress 2.9 or higher.