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.
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 a 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 helps when you are using an 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, and Enable the Display read more as button.
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 the 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 the 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.
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.
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 a problem with the guide then please feel free to comment below.
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.
The code snippet is only if you are using a custom excerpt. Only use CSS code.
Thanks
Is there any way to customize read more button in case I am not using a custom excerpt?
Yes, use CSS code only. Go to Appearance > Customize > Additional CSS and add the CSS code mentioned above in the article.
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!
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
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.
I am on the verge of publishing all kinds of tutorials related to GeneratePress and also the code used on my website. Here are some videos related to GeneratePress, please follow the link GeneratePress YouTube Tutorials
Thank You
sir thank you very very much! love from bangladesh sir ❤❤❤
Thank you, Akash for the compliment. Cheers
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
Go to Customizer > Layout > Blog > Add arrow → on Read More Label.
You can change color from Customizer > Colors settings
Do i need pro version to make these changes
because i tried both ways snipet and css.. didn’t work out for me
Yes
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?
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
Hi suraj, I have an issue with read more button 🚨.
When I click on Read More button the blog post url automatically change.
Like this.👇👇
Original Url
mydomain.com/xyz
Through Read More button
mydomain.com/xyz/#more-206
Please 🥺🥺🥺🙏 help…
Hi Koushik,
GeneratePress has the solution for this. A small code is required. You need to add to functions.php
Thanks
Read more CSS is not working for me. I am using codesnipt. I use different read more label.
It worked now, Thanks!
Brother,
I have a problem with the read more buttons and google sharp. Google not using meta desc I’m setting up in Yoast, just taking some text from the post that without my keyword. So, I set up excerpt as meta desc. But, it showing the full excerpt in the blog archive on the home page. I set the excerpt length 18 words.
Thanks,
Hi Rafin,
The case you are facing on Google is what we all are facing. Google is randomly using text from our content to show meta description. Use the excerpt option available in the sidebar. And check this code and paste into the child theme’s functions.php or use the code snippets plugin.
https://gist.github.com/wplogout/29a4be58d16e3c3266b00b4154757a82
Thanks
I added this code already, and the button is showing in the archive blog. The thing is, I kept excerpt length 18 words archive blog, but it shows full on there and looks wired.
Just mail me your website.
Thanks
i want to add hyperlink underline animation just like our blog. pls share the css code.
Hi would love to add the hyperlink underline animations as you did with your site can you help me with this, please.
Another question is it possible to create a site like the one displayed on the project cash flow link below using generate press and generate blocks/ Guttenberg plugin. I am using it to generate press premium.
diggitymarketing.com/project-cashflow-dec-2020/
Hi Anwar,
You can create a site like the above-mentioned link using GeneratePress
Thanks