Add Styles to Read More Link in Your WordPress Theme

Share this on:

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.

style your wordpress read more tags

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.

turn a text read more link into a button

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.

insert read more tag
  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.

place inline read more link on it's own line

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.

more-link-1

For the remainder of this tutorial, the Twenty Twelve theme is used to demonstrate.

Remove the Right Arrow

more-link-2

The arrow is enclosed in span tags, so we can remove it using:

Add a Background Color

more-link-3

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

more-link-4

The dark blue was taken from the Twenty Twelve link hover color.

Round Corners and Add Border

more-link-5

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

more-link-6

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.

more-link-7

Or you could use Dashicons. (Note that to use Dashicons, you may need to add them to your theme first.)

Line Them Up

more-link-8

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

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

17 responses to “Add Styles to Read More Link in Your WordPress Theme”

  1. Joe Avatar

    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.

    1. Marcy Diaz Avatar

      You’re welcome, Joe! It’s great to know it helped. :)

  2. Fabienne Avatar
    Fabienne

    Thanks Marcy, great article. Worked very well for my WordPress blog.

    1. Marcy Diaz Avatar

      I’m glad it worked for you, Fabienne.

  3. marcy Avatar

    Hi Marcy,
    I can’t get the right angle quotes to show up or remove the underline on the hyperlink. Any suggestions?

    1. Marcy Diaz Avatar

      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.

  4. Lynn Avatar
    Lynn

    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.

    1. Marcy Diaz Avatar

      You’re welcome, Lynn! I’m glad the tutorial helped you with your website.

  5. Kimberly Conover Avatar

    Thank you for such clear instructions!

    1. Marcy Diaz Avatar

      You’re welcome, Kimberly. I’m glad it helped.

  6. Leela Robinson Avatar

    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.

    1. Marcy Diaz Avatar

      Thank you for stopping by Leela.
      Your theme is something like this:

      a.excerpt-more,
      a.excerpt-more:visited {
      text-decoration: none;
      }
  7. Vinsen Muliadi Avatar

    Thank you for this tutorial, I trying to create my own WP theme and this tutorial helped me a lot

  8. Cyndi Avatar

    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

    1. Marcy Diaz Avatar

      Add this to your custom CSS:
      .page a.more-link {
      display: none;
      }

      OR
      .page a.more-link {
      display: none !important;
      }

  9. Elysia Avatar

    Thanks for this tutorial! Worked like a charm! :)

    1. Marcy Diaz Avatar

      That’s great! I’m glad it helped.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.