[Resolved] customize read more button HTML

[Lauren]

Hi, I’d like to add a few classes to the read more button on the blog post excerpts on the blog feed page.

I’d like to add the classes “js-scroll” and “smc-button” to the paragraphic tag with the class “read-more-container”, and I’d like to add the class “button-wrap” to the link tag with the classes “read-more” and “button” – however, I can’t find that markup in the theme files.

Thanks!

[Ying]

Hi Lauren,

Try this PHP snippet:
https://docs.generatepress.com/article/generate_content_more_link_output/#usage

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Lauren]

Hi Ying,

I added this snippet to my functions.php file in my child theme, but I am not seeing the extra class appear on the blog feed page.

[David]

Hi there,

can you share a link to the blog so we can take a look?

[Lauren]

Sure: https://staging-skylineconsultingco.kinsta.cloud/marketing-insights/

I’m not sure if this matters, but the classes on the links on my site are “read-more” and “button” and not “read-more” and “content-read-more” like it is in the php snippet.

Thanks!

[Ying]

Hi Lauren,

Try this one instead:

add_filter( 'generate_excerpt_more_output', 'lh_generate_blog_read_more_button' );
add_filter( 'generate_content_more_link_output', 'lh_generate_blog_read_more_button' );

function lh_generate_blog_read_more_button( $output ) {
	$settings = wp_parse_args(
		get_option( 'generate_blog_settings', array() ),
		generate_blog_get_defaults()
	);

	if ( ! $settings[ 'read_more_button' ] ) {
		return $output;
	}

	return sprintf( '...%5$s<p class="read-more-container js-scroll smc-button"><a title="%1$s" class="read-more button button-wrap" href="%2$s">%3$s%4$s</a></p>',
		the_title_attribute( 'echo=0' ),
		esc_url( get_permalink( get_the_ID() ) . apply_filters( 'generate_more_jump','#more-' . get_the_ID() ) ),
		wp_kses_post( $settings['read_more'] ),
		'<span class="screen-reader-text">' . get_the_title() . '</span>',
		'generate_excerpt_more_output' == current_filter() ? '' : ''
	);
}

[Lauren]

That worked! Thank you Ying!

[Ying]

No problem 🙂

[Lauren]

Hi Ying,

I think that after adding the code, the blog excerpts are no longer followed by an ellipsis (…) – is there a way to add that back in?

Thanks!

[Ying]

I’ve updated the code here 🙂 Try this one:
https://generatepress.com/forums/topic/customize-read-more-button-html/#post-2070609

[Lauren]

That’s perfect! Thank you so much

[Ying]

You are welcome 🙂

[Author]

Posts