Enable custom excerpt on WordPress and Add “Read More…” link [Hueman Theme]
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”
- Unfold the “Screen Options” menu
- Tick the checkbox Except.
After Enable Except, you have a new field on the bottom, when you creating or editing a post.
Now you can write a nice and understandable excerpt for all of your articles.
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 :
<?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>
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)
The hueman pro theme allow custom css update from the customizer gui.
Be a little bit patient ;).
IV – The result
The result is simple but clean, It perfectly meets my initial need.