Join WPLogout Community on Facebook Join Now

How to Customize Read More Button in GeneratePress Theme?

In this tutorial, learn to add and customize read more button in GeneratePress Theme. It is completely easy to add read more or continue reading button in GP Theme. so, let’s follow the tutorial.

Moreover, you will also learn to

  • Why Read More Button?
  • Enable different settings in GeneratePress.
  • Style Read More Button.
  • Display Read More link in Custom Excerpt.
Customize Read More Button in GeneratePress Theme

Why Read More Button?

Basically, some bloggers avoid using Read more or Continue Reading button on their website. My personal suggestion is that you need to use read more button. Read more buttons has various impacts on your site.

If you are showing full text instead of a summary or excerpt then your blog’s CTR will be low. Read more buttons encourage users to click and check our blog posts. This directly impacts your site’s bounce rate and dwell time.

Customize Read More Button in GeneratePress Theme

Here we are basically adding read more link in custom excerpt and style the existing read more button using the CSS code.

Before that, let’s just check some WordPress and GeneratePress Settings.

Go to Settings > Reading > For each post in a feed, include > Select Summary > Save Changes. This setting basically helps when you are using RSS feed to send newsletters.

In GP Premium, Go to Appearance > GeneratePress > Enable Blog Module.

After that go to Appearance > Customize > Layout > Blog

In the Archives Section, choose Content type as Excerpt, Excerpt word count to 18 (you can change it), Read more label as Read More, Enable the Display read more as button.

GeneratePress Blog Modules Archive Settings

Also Read: GeneratePress Review

Style the Read More Button in GeneratePress

Lots of bloggers are asking me to share the CSS code used in the WPLogout blog. so, today I am sharing the code to customize read more link. Follow the process as below

  • Go to your Dashboard > Appearance > Customize.
  • Go to Additional CSS.
  • Copy and Paste the following code.
  • Hit Publish Button.
a.read-more.button {
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0);
    color: #115cfa;
    text-decoration: none;
    background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
    padding: 10px;
}

a.read-more.button:hover{
   color:#115cfa;
   background-size: 100% 6px;
   background-color: #115cfa00;
}

If you want read more button on the right side then float the button on right side using the below code.

a.read-more {
    float: right;
}

Display Read More link in WordPress Excerpt

If you are using custom Excerpt in GeneratePress Theme then you can’t find Read More button by default.

You can add read more link if you are using Excerpt in WordPress by inserting code snippet in functions.php

If you are using GeneratePress Child Theme then you can directly insert the code in functions.php.

Basically I am using Code Snippets plugin to insert code so that I don’t mess with other codes in functions.php.

  • Go to Plugins > Add New.
  • Search Code Snippets Plugin.
  • Install and Activate the plugin.
  • Now go to Code Snippets and Click on Add New.
  • Add a Snippet Title.
  • Copy and Paste the excerpt code.
  • Hit Activate Button.
Read More Buttons in WordPress Excerpt
add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
function tu_excerpt_metabox_more( $excerpt ) {
    $output = $excerpt;

    if ( has_excerpt() ) {
        $output = sprintf( '%1$s <p class="read-more-button-container"><a class="read-more button" href="%2$s">%3$s</a></p>',
            $excerpt,
            get_permalink(),
            __( 'Read More', 'generatepress' )
        );
    }
	
    return $output;
}

Source Code: GeneratePress Documentation

You can use the same CSS code posted above to style read more link in GP Theme.

Go to Appearance > Customize > Additional CSS.

Paste the above code.

Result

The customized read more button in GeneratePress Theme look like this.

Customizing Read More button with CSS Code

Bottom Line

I hope now you can customize read more button in GeneratePress theme using the above code. Moreover, you can style read more button at your own that matches your brand.

Also, follow other GeneratePress Tutorials and Optimization tips to speed up your WordPress website.

If you have problem with the guide then please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

16 thoughts on “How to Customize Read More Button in GeneratePress Theme?”

  1. Hi Suraj,

    I hope you are well.

    I am trying to add read more as text but after inserting snippets codes as mentioned by you. It is as before means Not Changing at all.

    Reply
  2. Hi suraj,

    I am looking for more tutorials like this. I want to know, How to customize Header and Footer like WPLogout. I am your daily visitor looking for daily tutorials. Please publish more posts. I am sharing your posts as well with my friends. Long live!

    Reply
    • Hi Sameer, Thank you for visiting my site. In the header section, I am using Primary Menu, Play with colors, you can do it easily. In the footer section, I am using Widget, Also you need to play with color here too which is easy.
      Thanks

      Reply
  3. Please make a complete youtube video tutorial on customizing the Generatepress theme like your website. I followed all the tutorials published here and something I am missing which is not giving the same look as WPLogout. Please sir, Please make a video.

    Reply
  4. hi suraj nice one but how to change that green colour (underline) and how to add arrow like your read more button. can you please share your code.
    thank you

    Reply
  5. Kindly share ss or tell clearly, not everyone is expert. Where to paste the CSS? There’s already CSS code available. Where to paste? after Generatepress site css?

    Reply
    • Hi Sumit, I have clearly mentioned in the article that you have to paste in under Appearance > Customize > Additional CSS. Always paste after any other CSS.
      Thanks

      Reply

Leave a Comment