Read More Styling

[manavecplan]

Hey,

So I'm trying to style the 'Read more' links on my teasers which currently look like this: http://avinashdsouza.me/blog/

However, the teasers(manual excerpts) aren't picking up the styling that I've saved as under:

/*POSTS: Styling teasers
--------------------------------------------- */
a.more-link {
font-size: 16px;
font-size: 1.6rem;
font-family: "Montserrat-SemiBold";
text-transform: uppercase;
padding:5px 0px 0px 0px;
letter-spacing:1px;
background:none;
display:block;
text-decoration: none;
}

I checked the page CSS via the inspector so I think I've got the selector right.

Also, this CSS works perfectly well on automatic excerpts but doesn't get picked up for manual excerpts.

What am I doing wrong for manual excerpts?

http://avinashdsouza.me/blog/

[Christoph]

Hi,

not sure what code you are using to show the read more link on the manual excerpts, but you have to add the more-link class to the <a> tag.
http://prntscr.com/bjti39

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[manavecplan]

Hey Christoph,

Your post helped me dig a bit further and helped me solve it! Works like a charm now... 🙂

All I needed to do was add a class to the PHP code that I'm using and target it accordingly.

The amended PHP would be:

//Adding a Read More for manual excerpts
function manual_excerpt_more( $excerpt ) {
	$excerpt_more = '';
	if( has_excerpt() ) {
    	$excerpt_more = '&nbsp;<a class="manual-excerpt-more-link" href="' . get_permalink() . '" rel="nofollow">READ MORE ?’</a>';
	}
	return $excerpt . $excerpt_more;
}
add_filter( 'get_the_excerpt', 'manual_excerpt_more' );

The amended CSS would be:

a.manual-excerpt-more-link {
font-size: 14px;
font-size: 1.4rem;
font-family: "Montserrat-SemiBold";
text-transform: uppercase;
padding:5px 0px 0px 0px;
letter-spacing:1px;
background:none;
display:block;
text-decoration: none;
/*text-align: center;*/
}

[Author]

Posts