Sridhar Katakam

Genesis and WordPress Tutorials

How to add a Read More button below content/excerpts in Genesis

by 19 Comments

A user asked in Genesis Slack:

Can you give me a hint on how could I add a “Read More” button to the post excerpt?

Adding a Read more button below excerpts/content/content limit for every post in archives (Posts page, category archives etc.) of Genesis is as simple as adding

add_action( 'genesis_entry_content', 'custom_add_read_more' );
/**
 * Add Read More button below post excerpts/content on archives.
 */
function custom_add_read_more() {
    // if this is a singular page, abort.
    if ( is_singular() ) {
        return;
    }

    printf( '<a href="%s" class="more-link button">%s</a>', get_permalink(), esc_html__( 'Continue Reading' ) );
}

in child theme’s functions.php.

Replace Continue Reading with your desired read more text.

Depending on the active theme, you may want to add a bit of CSS to add some space below the button.

.more-link {
    margin-bottom: 30px;
}

  • HI, thanks for the tip. It worked perfectly. I just wanted to ask if you could tell me how to chenge the color of the button as well as the color when I point my cursor over the button.
    Thanks in advance

    Reply

  • Worked great… is there any way to align the button to the center OR right side instead of left? And is there a way to modify its sizing?

    Reply

    • You can float it right by adding this in your CSS:

      .more-link.button {
    float: right;
}

      Mofiying its size is also done via CSS. Ex.:

      .more-link.button {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 8px 16px;
}
      Reply

  • Perfect. However it does not seem to change the links on the featured posts. Do I need to add something? I have tried with no success. Thanks in advance.

    Reply

  • Hi Sridhar,
    I was able to use this code & get the continue reading link. What I need now is how can I get the title of thee post to append to this continue reading link? For example it should be like continue reading sample post. This is important for accessibility to avoid lot of continue reading links for screen reader users.

    Reply

  • Worked simple and easy, thanks! But now how can I remove the 3 little dots that show up at the end of the excerpt? They look like this: […] I’m trying to make the excerpts end at a specific point where they end after a few lines but only after a period or the end of a sentence.

    Reply

    • It is possible via code to remove the three dots.

      But based on what you wrote, it looks like a better suggestion would be to use manual excerpts. That way you have exact control of what appears in the excerpts.

      If the Excerpt meta box is not visible in the post editor screen, click on Screen Options near the top right, enable it and fill up the excerpt.

      Reply

    • Not sure. I do not use it.

      You could give it a try.

      In the text area for genesis_entry_content hook, paste

      // if this is a singular page, abort.
      if ( is_singular() ) {
      return;
      }

      printf( '<a href="%s" class="more-link button">%s</a>', get_permalink(), esc_html__( 'Continue Reading' ) );

      Reply
    • >