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 1 year, 5 months ago.

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

    prajwaldesai
    Participant

    Hi,

    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 http://www.onlineteflacademy.com/

    My website link : http://prajwaldesai.com. i am using a corporate child theme.

    #1026

    Len
    Participant
    Post count: 11

    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 1 year, 5 months ago by  Len.
    • This reply was modified 1 year, 5 months ago by  Len.
    #1067

    Davinder Singh Kainth
    Participant
    Post count: 977

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


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

    source - http://www.basicwp.com/remove-read-more-link-posts-genesis/


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

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

You must be logged in to reply to this topic.