Customizing the Excerpts Meta Box

Create and style the Excerpt in the Block Editor (Gutenberg).

Go to a post and in the right sidebar settings area of the document (Post). Notice the Excerpt area.
Here I have filled in some text. Added a Heading 2, paragraph and a link.

Creating and Styling the excerpt seen in the right sidebar settings area of the post. I added HTML to style the excerpt.
Creating and Styling the excerpt seen in the right sidebar settings area of the post. I added HTML to style the excerpt.

The frontend this is seen. I am using the theme Blocksy.

Creating and Styling the excerpt seen in the right sidebar settings area of the post. I added HTML to style the excerpt. Frontend
Frontend view. I have styled the excerpt. There is also a featured image seen above the text and below the title.

Create and style the Excerpt in the Classic Editor (TinyMCE).

(The following is part of an Tinymce excerpt code snippet tutorial from 24 February 2015. The tutorial was recreated and updated.)

Install the Classic Editor plugin to get back the TinyMCE / Classic environment. Then go to a post. Be sure to go to Screen Options and activate the Excerpt field (if it is not already seen below the main post content area.)

Next we will add richtext TinyMCE visual editor tools to the Excerpt field. Add the following TinyMCE excerpt code snippet to the child theme functions.php file or add a plugin for adding code snippets.

/*******  https://github.com/cosmic/cosmic-tinymce-excerpt
  * Plugin Name: Cosmic TinyMCE Excerpt
  * Description: TinyMCE pour les extraits
  * Author: Agence Cosmic
  * Author URI: http://agencecosmic.com/
  * Version: 1.0
  ****************************/
 
 function cosmic_activate_page_excerpt() {
   add_post_type_support('page', array('excerpt'));
 }
 add_action('init', 'cosmic_activate_page_excerpt');
 
 # Removes default extracts and replaces them with new blocks
 function cosmic_replace_post_excerpt() {
   foreach (array("post", "page") as $type) {
     remove_meta_box('postexcerpt', $type, 'normal');
     add_meta_box('postexcerpt', __('Excerpt'), 'cosmic_create_excerpt_box', $type, 'normal');
   }
 }
 add_action('admin_init', 'cosmic_replace_post_excerpt');
 
 function cosmic_create_excerpt_box() {
   global $post;
   $id = 'excerpt';
   $excerpt = cosmic_get_excerpt($post->ID);
 
   wp_editor($excerpt, $id);
 }
 
 function cosmic_get_excerpt($id) {
   global $wpdb;
   $row = $wpdb->get_row("SELECT post_excerpt FROM $wpdb->posts WHERE id = $id");
   return $row->post_excerpt;
 }

The Excerpt area should now look like this:

TinyMCE visual editor rich text section in WordPress using the Classic Editor plugin.
TinyMCE visual editor rich text section in WordPress using the Classic Editor plugin.

The frontend looks similar to what was seen when using the Gutenberg plugin.

Customizations

These are older codes meant for TinyMCE.

Code is added into the child theme functions.php file or even better a code snippet plugin.

First lets add the excerpt meta box to the single pages screen:

add_post_type_support( 'page', 'excerpt' );

Allowing shortcodes in the excerpt field:

// Allow Shortcodes in the Excerpt field
 add_filter('the_excerpt', 'do_shortcode');

Limit the length of the words used in the excerpt:

// Limit the amount of words shown in the excerpt. Default is 55. Change XX to the amount of words you want to use.
 function custom_excerpt_length( $length ) {
 return XX; // Replace XX with a number.
 }
 add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

Or use this:

add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($len) {
   return 75;
}

Add “Read More” permalink to the end of the_excerpt
Adding this snippet below into the functions.php file of your WordPress theme will add a “read more” permalink at the end of the_excerpt.

function excerpt_readmore($more) {
    return '... <a href="'. get_permalink($post->ID) . '" class="readmore">' . 'Read More' . '</a>';
}
add_filter('excerpt_more', 'excerpt_readmore');

Change excerpt length depending of the category
Change the category ID on line 3. Use ID or ‘category name’.

add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($length) {
 if(in_category(14)) // use a number or the name 'category name '
{
 return 13;
 } else {
 return 60;
 }
}

Here is the code to display the excerpt of the current requested page in WordPress.
NB! This code needs more exploring…

if(is_single() || is_page())
 {
 global $wp_query;
 $id = $wp_query->post->ID;
 $the_post = get_post($id);
 $the_excerpt = $the_post->post_content;
 $shortcode_pattern = get_shortcode_regex();
 $the_excerpt = preg_replace('/' . $shortcode_pattern . '/', '', $the_excerpt);
 $the_excerpt = strip_tags($the_excerpt); 
 echo esc_attr(substr( $the_excerpt, 0, 200));
 }
 else if(is_home() || is_front_page())
 {
 echo "QNimate provides tutorials on WordPress, Hybrid Mobile Development, Web Development and Much More";
 } 
 else if(is_category())
 {
 $name = single_cat_title('', false);
 echo "Learn about " . $name;
 }
 else if(is_tag())
 {
 $name = single_tag_title('', false);
 echo "Learn about " . $name; 
 }
 else if(is_date())
 {
 $date = single_month_title(' ', false);
 echo "Displaying posts of ". $date;
 }

For posts and pages the excerpt is retrieved from the content.

Excerpt counter code I found at:

function excerpt_count_js(){

if ('page' != get_post_type()) {

echo '<script>jQuery(document).ready(function(){
jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:12px;right:34px;color:#666;\"><small>Excerpt length: </small><span id=\"excerpt_counter\"></span><span style=\"font-weight:bold; padding-left:7px;\">/ 500</span><small><span style=\"font-weight:bold; padding-left:7px;\">character(s).</span></small></div>");
 jQuery("span#excerpt_counter").text(jQuery("#excerpt").val().length);
 jQuery("#excerpt").keyup( function() {
 if(jQuery(this).val().length > 500){
 jQuery(this).val(jQuery(this).val().substr(0, 500));
 }
 jQuery("span#excerpt_counter").text(jQuery("#excerpt").val().length);
 });
});</script>';
}
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');

This tutorial is based on a “TinyMCE excerpt code snippet” and Customizing the “excerpts meta box” tutorials. Now placed into one common tutorial. Last updated: 4 February 2019. Now this tutorial contains some tips on using Excerpts in Gutenberg.

Resources:
https://www.hongkiat.com/blog/wordpress-tweaks-for-post-management/
https://wpmudev.com/blog/character-counter-excerpt-box/
https://marcgratch.com/add-tinymce-to-excerpt/
https://wordpress.stackexchange.com/questions/58261/adding-a-rich-text-editor-to-excerpt
https://wpartisan.me/tutorials/wordpress-how-to-move-the-excerpt-meta-box-above-the-editor

Share the article:

Leave a Reply

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