How To Make Header Image Responsive (Thesis Theme WordPress)

July 8, 2017

I’m about to save your life.

(And hundreds of hours of aggravation searching google for solutions that don’t work.)

This is for Thesis 1.8+

What NOT to do:
Working solely with custom.css will not work. Those images you insert there using “background image” will not shrink down.

Uploading a header image thru thesis and editing it later also didn’t work for me.

What TO do:
1. Upload your header image into wordpress media & have the url handy.

2. Open custom_functions.php in thesis “custom file editor” and work with this code:

function custom_header() { ?> <p id="logo"><a href="http://YOURSITE.COM"><img src="HEADER IMAGE URL HERE"></a></p> <h1 id="tagline"><?php bloginfo('description'); ?></h1> <?php } remove_action('thesis_hook_header', 'thesis_default_header'); add_action('thesis_hook_header', 'custom_header');

(Original Header Hook Code)

3. Open custom.css and add this code:

.custom #logo img {
max-width: 100%;
height: auto;
}

4. That’s it. Name your next baby after me in appreciation!

5. If you’re using wpcache and cdn, be sure to upload/update theme files there. Clear caches also.