The “Read more” link is used in all WordPress website or blog themes. Some themes add some style to the Read more, and some leave them as default links. If you want to change the style of your WordPress Read more links, this tutorial provides some options, using only CSS.
Here is an example of styling for the Twenty Twelve theme. The Read more also has the same default styles for the Twenty Thirteen and Twenty Fourteen themes. The only difference is the link color.
How to Add the Read More Link to Your Blog Posts
When you’re writing your blog post, you can choose where to add the more link. Usually the tag will appear on it’s own line.
- Place your cursor where you want the link to appear.
- Click the “Insert Read More Tag” button in your post editor screen.
- The read More Tag will be added.
Adding Styles
Look in your style.css and find the a.more-link { }. This is the selector you will style. You can add any or all of the CSS in this tutorial. You can edit your style.css with a text editor, or you can add any of the following CSS to your Custom CSS Editor plugin. Some themes may use a different selector name for the excerpt more links –
a.excerpt-read-more { } or a.excerpt-more-link { }
Using actual code in this post caused my blog’s read more links to go awry, so I used images. You can copy and paste the CSS from the GetHub Gist.
Move the Read More to It’s Own Line
When you use a featured post plugin, you will have the option to add your own text for the continue reading link. Often with the plugins, and also sometimes after an excerpt, the link will be inline with the text. If you want to turn it into a button, you will need to put it on it’s own line first. This example is from a Genesis theme.
Add either of the CSS blocks below. I prefer display: table; because the link size is limited to the text size, but you can try display: block; if you want a longer button.
For the remainder of this tutorial, the Twenty Twelve theme is used to demonstrate.
Remove the Right Arrow
The arrow is enclosed in span tags, so we can remove it using:
Add a Background Color
If you want to create a button, you can add a background-color, change the text color, add some padding to make the button a bit larger, and remove the link underline (text-decoration). I used the blue link color from Twenty Twelve.
Add Hover Styles
The dark blue was taken from the Twenty Twelve link hover color.
Round Corners and Add Border
If you want slightly rounded corners on your button, you can use border-radius, and you can also add a border, if you like.
Add Right Angle Quote
Instead of the right arrow — → (\2192), you can add a right angle quote — » (\00BB) or right single angle quote — › (\203A). You can add these even if you leave the Read more as a text link.
Or you could use Dashicons. (Note that to use Dashicons, you may need to add them to your theme first.)
Line Them Up
If you need to move the angle quote a bit, you can add this. Make the 3px in bottom: 3px; larger or smaller, so that the angle quotes are where you want them. Note that they still may not line up identically in all browsers.
You’ve just changed a plain text link Read more with a right arrow into a button with angle quotes using only CSS.
Resource: More Hex Codes for arrows can be found at the links below.
HTML Codes Table
HTML Symbol Entities Reference
I have been trying to figure out how to do this forever! I came across your article and it was a lifesaver. Inserting the display table css immediately solved the problem. Thank you, Marcy! Cheers.
You’re welcome, Joe! It’s great to know it helped. :)
Thanks Marcy, great article. Worked very well for my WordPress blog.
I’m glad it worked for you, Fabienne.
Hi Marcy,
I can’t get the right angle quotes to show up or remove the underline on the hyperlink. Any suggestions?
Thanks for stopping by, Kim.
Usually the link underline happens if you have .entry-content a later on in your style.css. If you use .entry-content a, you’ll need to add below that, either all your a.more-link sections with .entry-content before them, or depending on your CSS, maybe just this will work.
.entry-content a.more-link {
text-decoration: none;
}
In the case of the angle bracket, you have a space before :after; it should be
a.more-link:after.
Thank you so much for this helpful tutorial. I added the hover style CSS code above without making the ‘read more’ link a button to better highlight this link and that worked really well.
You’re welcome, Lynn! I’m glad the tutorial helped you with your website.
Thank you for such clear instructions!
You’re welcome, Kimberly. I’m glad it helped.
Marcy, I am trying to remove the underline for the read more link in Suffusion theme. I tried
.entry-content a.more-link {
text-decoration: none;
}
as well as just a.more-link {
text-decoration: none;
}
but am still getting the underline. Any ideas? I tried to Inspect Element in Chrome, but couldn’t see my way to solution.
Thank you for stopping by Leela.
Your theme is something like this:
a.excerpt-more, a.excerpt-more:visited { text-decoration: none; }Thank you for this tutorial, I trying to create my own WP theme and this tutorial helped me a lot
Hi,
I tried changing the code in the css file, in custom code, and in the theme’s code customizer but I am having no luck. Can you help?
The photos and titles link to the pages, I don’t need or want that arrow.
Thanks so much!!
Best,
Cyndi
Add this to your custom CSS:
.page a.more-link {display: none;
}
OR
.page a.more-link {display: none !important;
}
Thanks for this tutorial! Worked like a charm! :)
That’s great! I’m glad it helped.