Enable custom excerpt on WordPress and Add “Read More…” link [Hueman Theme]

enable custom excerpt

I – Introduction

When i started to write this blog, all excerpt on my homepage was auto generated and in fine very ugly. Beyond the aesthetic aspect, this also posed a problem of readability for you, my readers, and finally, it is rather that which annoyed me the most!

I’ve done some research, and i find a way to fix this issue, easily and quickly, and i decided (again) to share it with you.

II – Enable custom except in WordPress

As of WordPress version 3.1, some screen options on the Post & Page edit Administration Panels are hidden by default. The Excerpt field is hidden by default if it has not been used before.

Connect to your wordpress, go to “Posts/Add New”

enable custom excerpt wordpress

  1. Unfold the “Screen Options” menu
  2. Tick the checkbox Except.

After Enable Except, you have a new field on the bottom, when you creating or editing a post.

enable custom excerpt wordpress

Now you can write a nice and understandable excerpt for all of your articles.

III – Add “Read More …” link

As I write this article, I use the wordpress theme Hueman (Pro version), this feature is not implemented now, so i decide to custom the Hueman theme.

This features can be add in after the code “<?php the_excerpt(); ?>”, to save time, i will use the command grep in my server, to identify quickly the different files who containing this match.

Connect to your server with ssh protocol, with an user who have sufficient permissions, and type this command :


root@web001:# cd /path_to_your_wordpress/wp-content/themes/your_theme/
root@web001:# grep -R "<?php the_excerpt(); ?>" ./

./wp-content/themes/twentyseventeen/template-parts/post/content-excerpt.php: <?php the_excerpt(); ?>

./wp-content/themes/hueman-pro/addons/pro/grids/masonry/front/tmpl/masonry-article.php: <?php the_excerpt(); ?>

./wp-content/themes/hueman-pro/content.php: <?php the_excerpt(); ?>

./wp-content/themes/hueman-pro/content-standard.php: <?php the_excerpt(); ?>

I use the grid masonry configuration on Hueman, so deduced that it was necessary to modify this file.

With FTP access or SSH, modify the file :


root@web001:#vim ./wp-content/themes/hueman-pro/addons/pro/grids/masonry/front/tmpl/masonry-article.php
<?php if (hu_get_option('excerpt-length') != '0'): ?>
<div class="entry excerpt entry-summary">
<?php the_excerpt(); ?>
/* add this line juste after */
<div class="excerpt-read-more"><a href="<?php echo get_permalink(); ?>"> Read More...</a></div>
</div><!--/.entry-->

The line <div class=”excerpt-read-more”><a href=”<?php echo get_permalink(); ?>”> Read More…</a></div>, add the text Read More… and a link to the current post.

I decided to add new div class, in order to customize the position of the text (in the right with top padding)


.excerpt-read-more {
padding-top: 10px;
text-align: right;
}

The hueman pro theme allow custom css update from the customizer gui.

Be carreful, the customization in Hueman theme will be lost in next theme update. In a upcoming article i will show you how to create a wordpress child theme, in order to store all customization outside the main theme.

Be a little bit patient ;).

IV – The result

enable custom excerpt wordpress

The result is simple but clean, It perfectly meets my initial need.

V – Sources

https://codex.wordpress.org/Excerpt#How_to_add_excerpts_to_posts

florian

Hi, I'm Florian and I'm 32 years old. I have discover IT at 17, and i had my first internet connection at 23. So i'm not going to say that i was very precocious in this domain... PS : I 'm French, so please, be lenient with my english ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.