How to style or change the "Read More" link

Hey there Nino25,

This can be done with adding some custom code. Please add this code to one of the theme .js files (example customscript.js located in /wp-content/themes/ready-review/js/):

jQuery( document ).ready( function( $ ) {
   $( 'a:contains("Read More")' ).css( 'color', 'red' );
   $( 'a:contains("Read More")' ).text( 'New Text' );
} );

Replace color with the color of your choice and New Text with the text of your choice.

Note that after theme update these changes will be gone so make sure to save this code somewhere in case you need to update the theme.

Best regards,
Bojan

Bojan. I’m going to assume da si sa Balkana? :p

Okay.

Well, I gotta say, I was hoping I would be able to do this using just CSS or adding something in the Editor. I hate accessing the cPanel and adding code like that.

But, I’ll give it a shot. I’ll let you know how it goes…

One thing I wanted to ask, isn’t there a more permanent solution? So that I don’t have to add the code again every time I update the theme?

Thanks Bojan

Hey Nino25,

Yeah I am from Balkan ?? Lets keep this on English for the sake of other members ??

This can’t be done with CSS since the read more link doesn’t have any ID of its own or a separate class which I could target. Changing “a” class there with CSS would mean that all links withing the post would be affected by this which means if you add a link inside the post it will be affected by the same CSS.

Unfortunately there is no plugins similar to Simple Custom CSS for adding jquery, or at least one that I am aware of.

Hope this helps.

Best regards,
Bojan

Okay, thank for the info Bojan.

The code you gave me works. The color has changed.

Then I didn’t know how to add more CSS in this code you gave me, so I Googled around a bit. I used this, it works.

{"background-color":"#BDBDBD","font-size":"150%","color":"blue","display":"block","border":"3px solid rgb(104, 0, 0)","width":" 150px"}

I actually added Much more CSS there, but this is basically what I used to get it to work…

I’ll also try to use hover CSS to add a different background to it when hovered. I’m basically making a button out of that link using CSS…

So I’ll report back if I manage to do it, and if I don’t, let me know if you know how to insert hover CSS in the code you gave me?

Hey there Nino25,

For changing the hover CSS add this:

jQuery( document ).ready( function( $ ) {
   $( 'a:contains("Read More")' ).css( 'color', 'red' );
   $( 'a:contains("Read More")' ).hover(function(){
   $(this).css('color', 'yellow');
} );
   $( 'a:contains("Read More")' ).text( 'New Text' );
} );

I pasted the whole code because it’s important to put the hover part before the text change in order for this to work.

Best regards,
Bojan

Gotcha, clear as rain brother ??

Worked perfectly. You’re the man.

Thanks a lot for your help…

Although, for some reason the hover CSS remains in effect after the text has been hovered.

So, my “Read More” link is blue, I set the Hover for the link to yellow, when hovered the link does turn yellow, but then it remains yellow for some reason. It goes back to blue only after the page is refreshed.

I’d like to have it go back to blue after it’s not being hovered anymore.

Do you have any idea how to fix it?

Hey Nino25,

Please replace the code with this one:

jQuery( document ).ready( function( $ ) {
   $( 'a:contains("Read More")' ).css( 'color', 'red' );
   $( 'a:contains("Read More")' ).hover(function(){
   $(this).css('color', 'yellow');
}, function(){
$(this).css('color', 'red');
} );
   $( 'a:contains("Read More")' ).text( 'New Text' );
} );

The second function after the hover is to display original link color when not hovered https://screencast.com/t/U6lmEsqS.

Hope this makes sense.

Best regards,
Bojan

That’s beautiful.

Thank you Bojan, I’ve learned much.

I guess we’re done here. Solved.

Couldn’t have done it without you Bojan, not in a million years :p