Responsive headers on all themes

I wanted to implement responsive headers on my custom theme so here’s what I did:
On my functions.php file, I added the following:

<?php
function custom_responsive_header(){

	// Calculate header image dimentions
	$height      = get_custom_header()->height;
	$width       = get_custom_header()->width;
	$ratio       = number_format(($width / $height), 2, '.', '');
	$height_1170 = number_format((1170 / $ratio), 0, '', '');
	$height_940  = number_format((940 / $ratio), 0, '', '');
	$height_724  = number_format((724 / $ratio), 0, '', '');
	?>
	<style>
	@media (min-width: 768px) and (max-width: 979px){
		.header-branding{min-height: <?php echo $height_724; ?>px;}
	}
	@media (min-width: 980px) and (max-width: 1199px){
		.header-branding{min-height: <?php echo $height_940; ?>px;}
	}
	@media (min-width: 1200px){
		.header-branding{min-height: <?php echo $height_1170; ?>px;}
	}
	</style?>
<?php } ?>

Analysing this a bit:
$height = get_custom_header()->height; gets the header image height.
$width = get_custom_header()->width; gets the header image width.
$ratio = number_format(($width / $height), 2, '.', ''); calculates the image dimentions ratio.
After we’ve calculated all those things, we can go ahead and calculate what the appropriate height will be for our custom header image.
My theme is a responsive theme and the main region width has 3 “modes” depending on the user’s screen:
1170px, 970px, 724px.
So I’m calculating the height for all 3 “modes using the below lines:

<style>
@media (min-width: 768px) and (max-width: 979px){
	.header-branding{min-height: <?php echo $height_724; ?>px;}
}
@media (min-width: 980px) and (max-width: 1199px){
	.header-branding{min-height: <?php echo $height_940; ?>px;}
}
@media (min-width: 1200px){
	.header-branding{min-height: <?php echo $height_1170; ?>px;}
}
</style?>

Then, on my header.php I added this:

<div class="header-branding container-fluid" style="clear: both; background: url(<?php header_image(); ?>); background-size: contain;">
<?php custom_responsive_header(); ?>
</div>

The width of the image is automatically calculated since we've set it to background-size: contain; and the height is echoed below it, when we're calling the <?php custom_responsive_header(); ?> function.

Important note: The custom_responsive_header function must be echoed below the header_image else you'll get php errors "divide by zero".

  • aristath
    • Recruit

    Just a correction on my original post... I mis-pasted something in my explenations. So to make things clear:
    These 3 lines below are the ones that calculate the height of the header region depending on the screen width:

    $height_1170 = number_format((1170 / $ratio), 0, '', '');
    $height_940  = number_format((940 / $ratio), 0, '', '');
    $height_724  = number_format((724 / $ratio), 0, '', '');

    The below lines are to apply the styles to the "header-branding" div, based on media queries.

    <style>
    @media (min-width: 768px) and (max-width: 979px){
    	.header-branding{min-height: <?php echo $height_724; ?>px;}
    }
    @media (min-width: 980px) and (max-width: 1199px){
    	.header-branding{min-height: <?php echo $height_940; ?>px;}
    }
    @media (min-width: 1200px){
    	.header-branding{min-height: <?php echo $height_1170; ?>px;}
    }
    </style?>

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.