Customize the Read More Text in Genesis Themes with Accessibility

And Without Losing the Read More Accessibility!

blog excerpt with accessible Read More

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

turn a text read more link into a button

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!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

7 responses to “Customize the Read More Text in Genesis Themes with Accessibility”

  1. Christophe says:

    Hi Marcy ! Great post, what have i to do to “disable” accessibility features (i’m using Infinity pro + genesis) ?
    Thanks a lot

    • Marcy Diaz says:

      Thanks for your comment, but this post is on using/adding accessibility, not removing it. Removing accessibility is not helpful to your readers, and I can’t recommend it.

  2. Zubair Amin says:

    After latest Genesis version, this Read more function don’t work able. Can you please help us to translate read more text in child themes with latest Genesis version.

  3. Amanda Simonelli says:

    This is perfect! Thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *