Bootstrap Templates Bundle

Tuesday, September 17, 2013

How to show paragraph, image and HTML tags in wordpress excerpt

This tutorial will be very helpful for Newspaper theme, Blog theme, Magazine theme etc. Sometimes it is necessary to show images, paragraph in home page excerpt  from a wordpress post. Normally wordpress excerpt not show any paragraph, images and other HTML tags. But if you use this below code it will help you to show all types of HTML tags from a post in excerpt.

/******************************************************************************
* @Author: Boutros AbiChedid
* @Date:   June 20, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Preserves HTML formating to the automatically generated Excerpt.
* Also Code modifies the default excerpt_length and excerpt_more filters.
* @Tested: Up to WordPress version 3.1.3
*******************************************************************************/
function custom_wp_trim_excerpt($text) {
$raw_excerpt = $text;
if ( '' == $text ) {
    //Retrieve the post content.
    $text = get_the_content('');
    //Delete all shortcode tags from the content.
    $text = strip_shortcodes( $text );
    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]>', $text);
   
    $allowed_tags = ''; /*** MODIFY THIS. Add the allowed HTML tags separated by a comma.***/
    $text = strip_tags($text, $allowed_tags);
   
    $excerpt_word_count = 55; /*** MODIFY THIS. change the excerpt word count to any integer you like.***/
    $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);
   
    $excerpt_end = '[...]'; /*** MODIFY THIS. change the excerpt endind to something else.***/
    $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end);
   
    $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
        array_pop($words);
        $text = implode(' ', $words);
        $text = $text . $excerpt_more;
    } else {
        $text = implode(' ', $words);
    }
}
return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');



Changing/modification requirement according to you need:
Change-1: In the above code  where it shows "MODIFY THIS. Add the allowed HTML tags separated by a comma."
Change the code  $allowed_tags = '';

//Separate tags by commas. Add or Remove tags as you wish.
$allowed_tags = '<p>,<a>,<em>,<strong>,<img>';

It will helps you to show paragraph, link, strng, img tag of HTML from post content to post excerpt.

Change-2:
Where it shows  /*** MODIFY THIS. change the excerpt word count to any integer you like.***/

If you like to change the automatically generated excerpt length fromthe default 55 words
//Replace line 25 of the MAIN_CODE with this:
$excerpt_word_count = 65; /* Choose any number you like. */

If you want to modify the excerpt length based on one category

//Replace line 25 of the MAIN_CODE with this:
if (in_category(4)) {  //For posts belonging to category ID 4
   $excerpt_word_count = 65; //return 65-word length excerpt.
} else {
    $excerpt_word_count = 40; //for all others, return 45 words.
}

If you want to modify the excerpt length based on multiple categories

//Replace line 25 of the MAIN_CODE with this:

if(in_category(array(4,40))) {  //For posts belonging to category IDs 4 and 40

    $excerpt_word_count = 65; //return 65 words for the excerpt.

} else {

     $excerpt_word_count = 40; //for all others, return 40 words.

}


Change-3: In the above code  where it shows
/*** MODIFY THIS. change the excerpt endind to something else.***/

By default WordPress outputs an un-linked “[...]” at the end of each excerpt, which is not useful for Accessibility and SEO purposes. If you want to modify the excerpt more string with a link,  replace it with this:

//Replace line 28 of the MAIN_CODE with this:
$excerpt_end = ' <a href="'. get_permalink($post->ID) . '">' . '&raquo; Continue Reading.' . '</a>';

If you want to add the post title to your link in the excerpt,

//Replace line 28 of the MAIN_CODE with this:
$excerpt_end = ' &#8230;<br /><a href="'. get_permalink($post->ID) . '">' . '&raquo; Continue Reading: '. get_the_title() . '</a>';

All changes done. For you Here i add a sample code below that I've added to my
wordpress themes.
function custom_wp_trim_excerpt($text) {
$raw_excerpt = $text;
if ( '' == $text ) {
    $text = get_the_content('');
    $text = strip_shortcodes( $text );
    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]&gt;', $text);
   
    /***Add the allowed HTML tags separated by a comma.***/
    $allowed_tags = '<p>,<a>,<em>,<strong>,<img>';
    $text = strip_tags($text, $allowed_tags);
   
    /***Change the excerpt word count.***/
    $excerpt_word_count = 60;
    $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);
   
    /*** Change the excerpt ending.***/
    $excerpt_end = ' <a href="'. get_permalink($post->ID) . '">' . '&raquo; Continue Reading.' . '</a>';
    $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end);
   
    $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
        array_pop($words);
        $text = implode(' ', $words);
        $text = $text . $excerpt_more;
    } else {
        $text = implode(' ', $words);
    }
}
return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');


5 comments:

Wokiee React eCommerce Template