• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles

Add Styles to Read More Link in Your WordPress Theme

June 17, 2014 Updated on December 2, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Joe says

    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.

    Reply
    • Marcy Diaz says

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

      Reply
  2. Fabienne says

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

    Reply
    • Marcy Diaz says

      I’m glad it worked for you, Fabienne.

      Reply
  3. marcy says

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

    Reply
    • Marcy Diaz says

      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.

      Reply
  4. Lynn says

    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.

    Reply
    • Marcy Diaz says

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

      Reply
  5. Kimberly Conover says

    Thank you for such clear instructions!

    Reply
    • Marcy Diaz says

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

      Reply
  6. Leela Robinson says

    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.

    Reply
    • Marcy Diaz says

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

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

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

    Reply
  8. Cyndi says

    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

    Reply
    • Marcy Diaz says

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

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

      Reply
  9. Elysia says

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

    Reply
    • Marcy Diaz says

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

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework