Customize the Read More Text in Genesis Themes with Accessibility

And Without Losing the Read More Accessibility!

Accessibility support was added to the Genesis Framework with version 2.2 (Sept. 1, 2015). One of the new accessibility features added was screen reader text on the blog post read more links, so those who use a screen reader know where the read more link takes them.

Instead of just hearing a lot of “Read more”, if the blog post has a title “New Blog Post”, they now hear “Read more about New Blog Post”. This is really helpful in navigating a website.

But this also means that if you want to customize your Genesis child theme Read More text, you have to be sure you don’t remove the accessibility. You can read more about Genesis Accessibility features

The default Genesis Sample uses [Read more…] for the Read More text. Here’s how to customize the Read More text in your Genesis theme without losing accessibility.

Step 1. Is Your Child Theme Accessible?

First you need to determine if your theme accessible. Look in your functions.php. If you find this line, then your child theme is accessible.

<!--?php // Remove this line before adding to functions.php

// Add Accessibility support.
add_theme_support( 'genesis-accessibility', array( '404-page', 'drop-down-menu', 'headings', 'rems', 'search-form', 'skip-links' ) );

The line may not have all the array items, but that’s OK; you can follow along with the next step.

Step 2. Edit functions.php

If you want to use “Continue Reading”, this is what you would add to your functions.php.
Don’t forget to add the text you want, instead of Continue Reading.

<!--?php // Remove this line before adding to functions.php

add_filter( 'excerpt_more', 'redhs_read_more_link' );
add_filter( 'get_the_content_more_link', 'redhs_read_more_link' );
add_filter( 'the_content_more_link', 'redhs_read_more_link' );
/**
 * Modify the Genesis more-link text with accessibility.
 *
 * @return void
 */
function redhs_read_more_link( $more ) {

	$new_a11y_read_more_title = sprintf( '<span class="screen-reader-text">%s %s</span>', __( 'about ', 'textdomain' ), get_the_title() );

	return sprintf( '... <a href="%s" class="more-link">%s %s</a>', get_permalink(), __( 'Continue Reading', 'textdomain' ), $new_a11y_read_more_title );
}

Step 3. Edit style.css

Now you can customize the style of your Read More. Here’s an example.

Contact me, if you need help with your Genesis child theme!