When working with WordPress development couple of days ago, I’ve manage a few quick Q&A with some of my colleague with user experience when dealing with WordPress posts. One of most sought out or talked topic was the_content() vs the_excerpt() features in WordPress post formatting.

Using the_excerpt() is great for user to shortened their long posts into 30-50 short text. However it doesn’t let you control where the post length should stop when converting to shorter text. The usual code used when using featured thumbnail with short text were like this:

the_post_thumbnail('thumbnail', array('class' => 'alignleft'));

This will end result with:

But this is not what user want sometime, they want to add their own ‘read more’ and want to control where to stop the long post and most important part is to preserve the HTML format. So we try this code instead:

the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
the_content(' more');

This will end result with:
This may seem good enough but what if you do not want any images to show from the_content(). Notice the ‘red’ mark i added. This image from the post are not something user want to show in their short text.

In this WordPress Tutorial, I’ll show you how to remove images from the_content() but still preserve the HTML formatting in post. First insert below code into your theme functions.php

if( !function_exists('get_the_content_with_format') ):
function get_the_content_with_format ($more_link_text = '', $stripteaser = 0, $more_file = '') {
$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters('the_content', $content);

// remove captions
$content = preg_replace('`\[[^\]]*\]`','',$content);  
$content = strip_tags($content, '<p><a>');
return $content;

Notice i only allow HTML tag ‘p’ and ‘a’ when the $content return as the_content().

Now instead of using the_excerpt() and the_content(), we used this code instead:

the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
echo get_the_content_with_format($more_link_text = '...Read More'); 

Final result will be like this:

That’s about it folks, hope you find this tutorial useful and can help you in your next WordPress development project. Please enjoy and share this tutorial if you like it.

Photo credits to alex barth

Related Articles:

WordPress News
6 Important Things To Consider in Choosing a WordPress Theme For Your Site
WordPress Plugins
3 New Plugins for Your Growing Website
Website Development
How to Make Your Web Content Print Friendly
WordPress Tutorials
How to Detect Mobile or Tablet Condition in WordPress