Divi Hide Read More Button When Post Is Short

If you have your WordPress site setup to display posts as excerpts, chances are that a set amount of text will display followed by a link commonly known as the "Read More" link.

The purpose of this link is to offer the user a quick excerpt of the post so they can chop-chop navigate through all of your recent posts on your blog. Doing this offers more choices for your users thus providing a richer experience.

Today I volition dissect the "Read More" tag inside of WordPress and teach you lot how to customize information technology to your liking.

The Nuts

Most uses of the Read More than tag are used in conjunction with the WordPress excerpt part which displays a gear up corporeality words/characters. By default, WordPress limits this to a set amount of words, simply I'll testify y'all soon how to adapt this setting.

The extract tag in WordPress is a small line of PHP that looks like this:

<?php the_excerpt(); ?>

Information technology can be swapped out for the_content() template tag when feasible. More often than not, you will have a blog alphabetize folio that lists your virtually contempo posts. These posts tin can use excerpts by simply swapping out the_content() template tag for the_excerpt() template tag.

If you visit our blog and focus your attention on a single mail on that page, you will see what I am referring to.

This is something we are trying to achieve using the Elegant Themes blog equally an example.

The text is a small excerpt with a trailing "…" followed past a button titled View Total Post

Customizing The Read More Tag

To get started you start need to make sure to take excerpts enabled within the admin surface area of your WordPress installation.

Caput to your WordPress admin and login. Navigate to the general Settings link on the left and within that click on Reading

Alter the reading setting to summary equally opposed to full text.

You should see a handful of settings, merely the one nosotros are concerned with is the section with the label For each article in a feed, bear witness. Y'all tin also control how many posts to show on your weblog page. I'll leave that upward to you lot. For at present I will leave that setting as is.

Become ahead and select Summary instead of the full text radio button. With Summary selected, click Relieve Changes

Past default some themes will come optimized already to display an extract rather than the full text setting as indicated by the settings surface area I but outlined. Our Divi 2.0 theme is a perfect instance of this.

Below I have a simple install of the Divi theme. I generated some faux content to show how an agile blog volition look using our theme. Yours may announced a fleck different, specially if you are using a different theme.

I like the way the posts await, only I would like to include a push button at the end of each postal service similar to what you see on our own blog. This makes it clear to the user that they can view the total post only clicking the "read more than" button.

To do this we demand to dive into our site's lawmaking. Open your active theme inside a code editor. I'thousand using sublime text 2 with the Divi theme shown below:

Our Divi 2.0 theme opened in a code editor.

I have the index.php file open. Within of it is some code that outputs what you see on your web log folio. For the Divi theme there is quite a bit going on, but the nuts are still there. Where we want to focus our attention is the department that looks like this:

Change the_content() tag

If y'all have never touched the lawmaking within of Divi, then you can refer to the line numbers when looking inside your ownalphabetize.php file. This volition only pertain to those of you lot using Divi. Line numbers 50-57 will be what we modify.

Let'south change the lawmaking to be the_excerpt() instead of the_content(), along with the custom function.

Hither is the code block updated. For legibility and safety sake I take just commented out the code nosotros aren't using.

Here we alter our code to just include the_excerpt()tag

If you lot save your changes and head back to your site you probably won't see any difference. Nosotros still need to modify the default functionality of the_excerpt().

We need to add together the link text at the end of each excerpt. To do this we need to piece of work inside a unlike file chosen functions.php. Find it and open information technology within your lawmaking editor.

Roll to the very bottom and add together this block of PHP lawmaking:

/* Alter the read more than link on the_excerpt() */  function et_excerpt_length($length) {     render 220; } add_filter('excerpt_length', 'et_excerpt_length');  /* Add together a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/  function et_excerpt_more($more) {     global $post;     return '<div class="view-full-mail service"><a href="'. get_permalink($post->ID) . '" form="view-total-post-btn">View Full Mail service</a></div>;'; } add_filter('excerpt_more', 'et_excerpt_more');        

The first 4 lines above form a custom function to control the amount of words that appear inside each excerpt on a blog post. A part is defined and and then a filter is added to gear up(execute) the function. Equally role of the WordPress API, we target the excerpt_length function to optimize our post to be no more than than 220 characters.

The second office customizes the read more link by overriding the WordPress default. Here I have added a link independent within a div so we can style it. I'll get to the styling in a scrap, but with this code in place and saved y'all can caput to your site and hopefully see something similar to what I have.

Our excerpts of each blog post have been modified by our function.

The default CSS styling of a link and post is represent automatically with our Divi 2.0 theme, and then there'south only a niggling work left to be washed to brand the link a button.

We gave the anchor link within our functions.php file a grade of view-full-post-btn. With this I'll add some CSS to target the link. Add the CSS below to the style.css file within your theme to customize our link. Where y'all add information technology doesn't matter, but calculation it in a memorable surface area you can reference in the time to come is always wise.

          .view-full-postal service-btn{     display:inline-block;     /*border-radius*/     -webkit-border-radius:10px;        -moz-edge-radius:10px;             border-radius:10px;     padding:8px 16px;     margin-pinnacle:10px;     color:#454545;     border:1px solid #d8dcdc;     font-family:Georgia,serif;     font-way:italic;     font-size:16px;   }   .view-total-post-btn:hover{     background:#454545;     /*transition*/     -webkit-transition:all .3s ease;     -moz-transition:all .3s ease;     -o-transition:all .3s ease;             transition:all .3s ease;     border:1px solid #000000;     colour:#FFFFFF;   }        

Subsequently adding the styles I now have a pretty prissy looking button with a inverted hover state.

The default state of our View Total Mail service button.

The hover or active land of our View Full Post button.

Rather than having our button left aligned, lets get a step further and float it to the right side of the container. We as well need to alter some margins within each of our posts. Add the code below to your style.css file.

.et_pb_post {     margin-lesser: 100px;     edge-peak: 1px solid #e1e1e1; } .et_pb_post:first-of-blazon {     edge-top: none; } .view-full-postal service { bladder: correct; }        

With all of these styles in place, you should at present see a fully functioning end result. Each button will click through to your blog mail allowing your users to read the unabridged post.

Our read more tag has been successfully implemented.

Conclusion

Adding enhancements such every bit the WordPress read more than tag helps your users to more hands navigate your web log. Keeping information organized and summarized where applicative will help your weblog be more legible than ever before. Using the excerpt functionality built in to WordPress is a great way to make your content more digestible. With a little effort and some styling, yous tin reach what I have covered in this tutorial in near no time at all.

Feature image via shutterstock author jesadaphorn

cortescrourt.blogspot.com

Source: https://www.elegantthemes.com/blog/tips-tricks/how-to-customize-the-wordpress-read-more-link-text