» » » You are reading »

How to Remove Images from the_content() but Preserve HTML Formating

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('...

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);
$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

How to Remove Images from the_content() but Preserve HTML Formatinghttp://cdn.dezzain.com/1/2013/11/remove-img-from-content.jpghttp://cdn.dezzain.com/1/2013/11/remove-img-from-content-300x296.jpg Richie KS WordPress Tutorialswordpress coding,WordPress Tips
in this WordPress tutorial, i will show you how to remove extra images from the_content() but preserve the HTML format for WordPress posts.

You might also like to read:

WordPress Tutorials

Designing and Protecting Your WordPress Site is Easier Than You Think

WordPress Tutorials

How to Create Schemas Breadcrumbs for Your WordPress Site

WordPress Tutorials

AIOSEO: How to fix duplicate title and description in paged comments

Like Our Posts? Subscribes Now!

Preview on Feedage: dezzaincom

Add to My Yahoo! Dezzain.com

Add to Google! Dezzain.com

Add to AOL! Dezzain.com

Add to MSN Dezzain.com

Subscribe in NewsGator Online Dezzain.com

Add to Netvibes Dezzain.com

Subscribe in Pakeflakes Dezzain.com

Add to Windows Live Dezzain.com

iPing-it Dezzain.com

Add To Fwicki Dezzain.com

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>