When doing some performance testing of the new site design, I realized that the header image wasn’t being processed by Photon.

Since there’s a filter for almost everything in WordPress, I look around a bit and found the theme_mod_$name filter.

 * Filters the theme modification, or 'theme_mod', value.
 * The dynamic portion of the hook name, $name, refers to
 * the key name of the modification array. For example,
 * 'header_textcolor', 'header_image', and so on depending
 * on the theme options.
 * @since 2.2.0
 * @param string $current_mod The value of the current theme modification.
return apply_filters( "theme_mod_{$name}", $mods[$name] );

Using that filter, we can then modify the image source so that the image will be handled by Jetpack’s Photon.

add_filter( 'theme_mod_header_image', 'moh_photonize_header_image' );
function moh_photonize_header_image( $image ) {
  if ( $image && function_exists( 'jetpack_photon_url' ) ) {
    $image = jetpack_photon_url( $image );
  return $image;

At this point, if you were to reload your home page and check the source for your header image, you’ll notice that the image has something like i1.wp.com in front of it. This means that our little snippet worked.

What I haven’t yet figured out is how to properly set the width and height arguments for the image since we only have the URL and not an image attachment. ¯_(ツ)_/¯

Let’s stay in touch!

If you liked what you read, then consider filling out the form below and I'll send you an email any time I post about anything WordPress of Development related. You can even choose which lists you're interested in below!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.