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!
7 responses to “Customize the Read More Text in Genesis Themes with Accessibility”
Hi Marcy ! Great post, what have i to do to “disable” accessibility features (i’m using Infinity pro + genesis) ?
Thanks a lot
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.
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.
This function still works great. I’m using it on this site. Just go back through the steps.
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?
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.
This is perfect! Thank you so much!