Custom Excerpt “more” Link in BranfordMagazine

Custom Excerpt “more” Link in BranfordMagazine

29.01.2010 in BranfordMagazine 4, Tutorials 1 Comment

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. If you use BranfordMagazine version 4.2 that functionality is already included by default.

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 functions.php

Open your functions.php file inside the branfordmagazine-4 themefolder and paste this codesnippet into the file. As mentioned if you have version 4.2 or higher of BranfordMagazine you don´t need to do anything because this is already part of the theme:

<?php
// modify the excerpt "more" appearance an make it clickable
function new_excerpt_more($more) {
        return
<span class="excerpt_more"><a href="’
.get_permalink().‘">’.__(‘[continue reading...]‘,‘branfordmagazine’).‘</a></span>’;
}
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.

Here is an example of three (clickable) dots right after the last word:

<?php
// modify the excerpt "more" appearance an make it clickable
function new_excerpt_more($more) {
        return ‘<span class="excerpt_more"><a href="’.get_permalink().‘">…</a></span>’;
}
add_filter(‘excerpt_more’, ‘new_excerpt_more’);
?>

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.

,

More Stuff from Elsewhere

1 Comment

schwabensohn - 07.02.2010

Mmh .. wieder was gelernt!

Bin noch nie auf die Idee gekommen, den More Tag per functions umzuschreiben. Nun denn … mit der Zeit wird man klüger ..

Leave a Reply

Do not use this comment section for support requests. Please use the support forum for this purposes only. Comments containing support topics will be deleted without further notice!

Gravatars are enabled. Register for free!