How to Create a 'Read More' Button for Excerpts in Genesis

Requirements for user interface will depend on every individual and can be differed from person to person. With the vast diversity of user base that WordPress enjoys the user interface requirements also tend to deviate drastically. While there might be a certain user base that might like one aspect of UI the same doesn’t hold true for everyone. In such a scenario, WordPress theme developers are finding it increasingly difficult to accommodate all types of requirements.

In such a scenario people often need theme customizations and that is where developers like me come into the picture.

In today’s post, I am going to explain how to Create a ‘Read More’ Button for Excerpts in Genesis.

My code here is specific to the Genesis Framework. However, a similar logic can be applied on any WordPress theme or plugin.

1. Display Excerpt

By default, the short summary that is displayed on the blog page for every blog post is extracted  from the blog post’s content. Which means a few words from the introduction of the post are taken and displayed as a  summary.However, if what you need is to display some custom content as summary, often known as excerpt then the following tweak would be required.

However, if what you need is to display some custom content as summary, often known as excerpt then the following tweak would be required.

    /**
     * Remove the post content and display post excerpt.
     */
    remove_action('genesis_entry_content',       'genesis_do_post_content');
    add_action('genesis_entry_content', 'the_excerpt');

The above lines of code will serve to display the excerpt instead of the post content. The excerpt content displayed will be without a read more button and will look something as below.

At this point, the ellipsis ([…]) will not be displayed for  manual excerpts but will be displayed for automatic excerpts.

[space]

2. Remove Ellipsis From Automatic Excerpt

If you do not want to display the ellipsis on automatic excerpts then we the following codes can be used.

    /**
     * Override the default string for automatic excerpts
     * 
     * @param type $more
     * @return string
    */
    function custom_excerpt_more($more) {
        return '';// return empty string
    }
    add_filter('excerpt_more', 'custom_excerpt_more');

[space]

3. Display Read More Button

The next portion of code will allow you to add the ‘Read More’ button just below the excerpt. The purpose of this code is to lead the user to the blog post from the blog index page.

    /**
     * Append ellipses to excerpts and then show "Read More"  button for manual & automatic excerpts.
     * 
     * @param type $text
     * @return string
     */
     function custom_excerpt($text) {
    //    $text= substr_replace($text,"...",strpos($text, "</p>"),0);
    $excerpt = $text . '<a href="' . get_permalink() . '"><button class="read-more-btn" type="button" value="read_more">Read More</button></a>';
    return $excerpt;
    }

    add_filter('the_excerpt', 'custom_excerpt');

[space]

[space]

4. Append Ellipsis to Excerpts

The number of words or characters that can be displayed in an excerpt are limited. Due to this there is a possibility that the words or sentences might get cut midway rendering them incomprehensible to the reader. In order to avoid this, the ellipsis can be appended to all excerpts, manual as well as automatic.

To fulfill this requirement, the following code will have to be uncommented in the ‘custom_excerpt’ function.

    //$text= substr_replace($text,"...",strpos($text, "</p>"),0);

[space]

5. Specify Length for Automatic Excerpts

The following code will allow you to define the maximum length of automatic excerpts.

   /**
   * User defined excerpt length.
   * 
   * @param type $length
   * @return int
   */
   function custom_excerpt_length($length) {
     return 20;
   }
   add_filter('excerpt_length', 'custom_excerpt_length');

With that piece of code, we are done with creating a ‘Read More’ button for all blog posts on the blog page. All the above code can be added to the functions.php file of the theme. An alternative method would be to to create a template and the code to the template.

So that was about how to create a ‘Read More’ button for excerpts in Genesis. Like I said earlier the same logic can be used for any other WordPress theme.

I hope this post was useful to you. Do let me know your thoughts on the post.