Remove an Image, Surrounded or Not by a Hyperlink on the Home Page

- July 29, 2017

image of woman There are multiples ways to remove an image from your content. It mainly depends on where your content is located – where it is on your website. I’ll use my home page and the image on this page as an example, but first…

If you search Google for “remove image from content”, you’ll get a bunch of results but only first few really matter. The examples they give, while they work, aren’t the best ways to go about it.

Remove this Image and the Hyperlink Surrounding It

The original code looks like this:

<a href=""><img src="" alt="image of woman" width="300" height="209" class="alignright size-medium wp-image-3978" /></a>

WordPress automatically inserts more information:

<a href=""><img src="" alt="image of woman" width="300" height="209" class="alignright size-medium wp-image-3978" srcset=" 300w, 150w, 768w, 1000w" sizes="(max-width: 300px) 100vw, 300px"></a>

With WordPress, you can insert an image with or without a hyperlink. If you only need to get rid of an image, without a hyperlink, the PHP code is this simple:

$text = preg_replace("!<img.*?>!i", "", $text);

If you need to get rid of both, use this:

$text = preg_replace("!<a.*?<img.*?></a>!i", "", $text);

A WordPress Function

This is the exact function I use. If you look at the home page, you’ll see that none of the content blocks have images in them:

function remove_image_and_link($text) {
  if (!is_home()) return $text;
  $text = preg_replace("!<a.*?<img.*?></a>!i", "", $text);
  return $text;
add_filter('the_content', 'remove_image_and_link', 10);

Of course, this will only work correctly for two cases. One, if the rest of the images (if any) on the page don’t have hyperlinks surrounding them. Two, if the rest of them don’t show on the home page. I’m sure I have a one or two articles with multiple images.

The Magic of Perl Regular Expressions

The Perl Regular Expressions used with PHP are extremely powerful. Every programmer, regardless of experience, should become familiar with them.

In this instance, I’m using a period, followed by an asterisk (“star”) and a question mark. This combination means zero or more characters until the next literal character appears. The question mark converts it from greedy to lazy (or non-greedy).

I probably don’t need the “i” at the end, which means case-insensitive. But it doesn’t hurt to leave it there.


Facebook Twitter Google+


E-Mail, RSS Feed



Previous and Next Articles:

« »


Your comment will appear below the form when it's approved. When the page redisplays after hitting the send button (it can take a few seconds), your comment has been sent.

When replying to someone else's comment, please start the comment with "@" and the name so I can put it in the right place.

Please read some of my more important pages if you have the time:

Comments Policy           Privacy Policy

RTCXpression established Feb 28, 2011
Copyright © 2013-2017 RT Cunningham
Hosted at Digital Ocean