Read More Button

Community Forums Forums Design Tips and Tricks Read More Button

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  Davinder Singh Kainth 3 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #802



    I want to add read more button to my posts.Currently on my site the read more button is shown but in brackets. I want my read more button to look like this : example

    My website link : i am using a corporate child theme.



    Hi prajwaldesai

    It looks like you’re using the Content Limit (as opposed to excerpts) to display content. If you view source, you’ll see a line of text, part of which reads …

    class="more-link">[Read more...]

    Now we know what CSS selector to target – it is the a.more-link

    All you need to do is add the following to the style.css file …

    a.more-link {
    your styling rules

    For instance …

    a.more-link {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #e96a2a;
    border-radius: 3px;
    color: #fff !important;
    float: right;
    font-size: 13px;
    font-weight: normal;
    padding: 8px 12px 6px;
    text-align: center;
    text-decoration: none;

    This will give you a button that has a slightly rounded border (3px), a background colour (#e96a2a), a font colour (#fff), it floats right, has a font size of 13px with a normal weight, a padding of 8px-top, 12px-sides and 6px-bottom, the text is centered and there is no text decoration.

    a.more-link:hover {
    background-color: #444;
    text-decoration: none;

    When you hover over the button the background colour will change to #444 (dark grey) and no text-decoration.

    Use your imagination and style it however you want. :)

    To get rid of the brackets add the following to your theme’s functions.php file …

    /** Modify the Genesis content limit read more link */
    add_filter( 'get_the_content_more_link', 'corporate_read_more_link' );
    function corporate_read_more_link() {
    return '... <a class="more-link" href="' . get_permalink() . '">Read More ...';

    This will give you Read More followed by 3 dots. Insert whatever you want there.

    Always make a backup of your files before editing them so you can revert if you make a mistake.

    • This reply was modified 3 years ago by  Len.
    • This reply was modified 3 years ago by  Len.

    To remove Read More… just add following code to functions.php file

    // Remove read more -
    add_filter( 'get_the_content_more_link', 'child_read_more_link' );
    function child_read_more_link() {
    return '';

    source –¬†

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.