Add Styles to Read More Link in Your WordPress Theme

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.

1. Place your cursor where you want the link to appear.
2. Click the “Insert Read More Tag” button in your post editor screen.
3. 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