I am brand new to PHP. I've messed with wordpress on it but not really with the code behind it. I am trying to speed up the loading time of our wordpress site but I am having some trouble. PHP uses the_post_thumbnail to load the HTML code for some of the posts' images. I have this code to delay loading of the images a little so the page can load first and then the images will load:

jQuery(window).load(function() {
    var source = jQuery(this).attr('source');
    jQuery(this).attr('src', source);

This works very well on another site I work on written in coldfusion and normal html. So what I'm trying to do is change the output of the_post_thumbnail to have a 'source' attribute that has the actual source path and the initial src value will have a default loading gif.

My first thought was to build another function or I guess as PHP calls it, add a filter like this:

add_filter('post_thumbnail_html', 'thumbnail_filter');
function thumbail_filter() {
$default_attr = array(
    'src'   => $src,
    'class' => "attachment-$size",
    'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
// you can alter the resulted HTML here
$html = the_post_thumbnail($default_attr);
return $html;

This didn't actually broke the page and didn't show any images even when I haven't called the thumbnail_filter function.

My next guess as to what to do was this. Can someone who is a little more experienced in PHP and wordpress help me out? Maybe the first one is the right way to go but I'm just doing it wrong.

1 Answer 1


Filters are WordPress not PHP.

Second, you have called the thumbnail_filter function. You hooked it to post_thumbnail_html so any time a function runs that applies that filter, like the_post_thumbnail, your function runs. If you think about that, you will see that you have a bit of a Loop there. The filter calls a function (twice) that applies the filter.

Third, the_post_thumbnail will echo the image. That is not what you want. And I am a bit confused about what these two lines (not counting the comment)...

// you can alter the resulted HTML here
$html = the_post_thumbnail($default_attr);

... are meant to do.

I think you are somewhat confused about how filters work.

This particular filter passes several parameters:

return apply_filters( 'post_thumbnail_html', $html, $post_id, $post_thumbnail_id, $size, $attr );

You only need the first for what you are doing. You need to alter that input and return it, like so:

function thumbnail_filter($html) {
  $pattern = '|src="([^"]*)"|';
  $html = preg_replace($pattern,'src="/absolute/loading/gif/path.gif" source="$1"',$html);
  return $html;
add_filter('post_thumbnail_html', 'thumbnail_filter');

Please be sure to use the absolute URL for your loading gif by using a function like get_stylesheet_directory_uri, or whatever is appropriate in your case. Do not use a relative URL. It will cause trouble.

  • @JohannesPille : Thanks for fixing that. I hang my head in shame. 0_o
    – s_ha_dum
    Commented Jul 26, 2013 at 20:22
  • 1
    As far as my judgement goes, you can hold that head of yours up high, despite having made the horrendous mistake of having missed 12 whitespaces... ;) Commented Jul 26, 2013 at 20:27
  • Can I place this anywhere in functions.php or does it have a special place to go? I had it close to the end of the file but it again wouldn't load or display the pictures.
    – jkw4703
    Commented Jul 26, 2013 at 23:22
  • I had it in a mu-plugins file but it should work from functions.php. Location shouldn't matter but make sure it is inside PHP opening and closing tags.
    – s_ha_dum
    Commented Jul 26, 2013 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.