Customize the Read More Text in Genesis Themes with Accessibility

Share this on:

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


photo of Marcy Diaz who owns Amethyst Website Design

Comments

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

  1. Christophe Avatar
    Christophe

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

    1. Marcy Diaz Avatar

      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 Avatar
    Zubair Amin

    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.

    1. Marcy Diaz Avatar

      This function still works great. I’m using it on this site. Just go back through the steps.

      1. Zubair Amin Avatar

        Thanks for the reply. Is it working on your Genesis child theme or you suggest to make changes directly in function file of main theme?

      2. Marcy Diaz Avatar

        You only edit or add functions to the child theme functions.php. You can’t use this on the Genesis Framework, only the child theme.

  3. Amanda Simonelli Avatar
    Amanda Simonelli

    This is perfect! Thank you so much!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.