Tutorial: Create A Dynamic Overlay Header with Background

The Total theme has a cool function that you can enable on any page called “Overlay Header” this will set the header in a fixed position so any content added below the header will display under the header. In most cases this would only be enabled for the homepage or a couple pages, however, if you are going to use the functionality on A LOT of pages than making the function “dynamic” may be a better solution and the guide below will show you how to use the Total theme hooks & filters to do so.

Step 1: Remove The Header Overlay Settings

Lets first remove the header overlay settings from the “Page Settings” metabox to prevent any confusion to the end client since we are going to make the functionality dynamic. This is done by using the meta filter as shown in this snippet. So copy the following code to your child theme’s functions.php file.

add_filter( 'wpex_metabox_array', function( $array ) {

	// Remove all overlay settings from the header tab
	foreach ( $array['header']['settings'] as $k => $v ) {
		if ( false !== stripos( $k, 'overlay' ) ) {
			unset( $array['header']['settings'][$k] );
		}
	}

	// Return array
	return $array;

}, 40 );

Step 2: Add New Setting for Dynamic Overlay Header Background

Now that we've removed the overlay settings we'll want to add a new setting for our dynamic overlay header and we'll do that in the same function from step 1. So modified it would look something like this:

add_filter( 'wpex_metabox_array', function( $array ) {

	// Remove all overlay settings
	foreach ( $array['header']['settings'] as $k => $v ) {
		if ( false !== stripos( $k, 'overlay' ) ) {
			unset( $array['header']['settings'][$k] );
		}
	}

	// Add new Overlay Header Background Setting
	$meta_key = 'myprefix_overlay_header_bg'; // Change this to whatever you want but prefix it to prevent conflicts
	$array['header']['settings'][$meta_key] = array(
		'title' => esc_html__( 'Overlay Header Image', 'total' ),
		'description' => esc_html__( 'Select your overlay header image.', 'total' ),
		'id' => $meta_key,
		'type' => 'media',
	);

	// Return array
	return $array;

}, 40 );

Now that will add a new setting like this:

Step 3: Conditionally Enable the Overlay Header Based on New Setting

Now that we have our new setting added we can conditionally enable the Overlay header based on this setting using the theme filters. Here is the next piece of code to add to your functions.php file:

// Conditionally enable Overlay Header
add_filter( 'wpex_has_overlay_header', function( $return ) {

    // Enable if your new Overlay Header Image is not empty and is a valid image
    $thumb = intval( get_post_meta( wpex_get_current_post_id(), 'myprefix_overlay_header_bg', true ) );
    if ( $thumb && wp_get_attachment_url( $thumb ) ) {
        $return = true;
    }

    // Return bool
    return $return;
    
} );

Step 4: Disable Main page Title if Overlay Header is Enabled

For most cases you would probably want to disable the main page header title is your overlay header is enabled so lets do that, here is the next piece of code:

// Disable the page title if your Overlay Header is enabled
add_filter( 'wpex_display_page_header', function( $return ) {
    if ( wpex_has_overlay_header() ) {
        $return = false;
    }
    return $return;
} );

Step 5: Add Dynamic Overlay Header Content

So we've got everything setup now so when we add an image the Overlay Header is automatically enabled and the main page header is disabled. Now lets add some content under our header to make things look nice. We'll be using hooks for this.

// Add a full-screen row with a background and page title
// to all overlay header pages
add_action( 'wpex_hook_header_after', function() {

	// Not needed if overlay header is disabled
	if ( ! wpex_has_overlay_header() ) {
		return;
	}

	// Your custom overlay header under the header output below
	// This is a basic example but you could do anything...

	// Get our background image
	$thumb     = intval( get_post_meta( wpex_get_current_post_id(), 'myprefix_overlay_header_bg', true ) );
	$thumb_url = esc_url( wp_get_attachment_url( $thumb ) );

	// Lets create some attributes for our row
	// These will be added with the Total helper function "wpex_parse_attrs"
	$attributes = array(
		'class' => 'my-custom-overlay-header-under-content',
		'style' => 'background: url(' . $thumb_url . ')',
	);

	// Add extra class to offset the header
	// This makes sure your content will display after the header
	$attributes['class'] .= ' add-overlay-header-offset'; ?>

	<div <?php echo wpex_parse_attrs( $attributes ); ?>>
		<div class="container wpex-clr">
			<h1><?php the_title(); ?></h1>
			<?php
			// Display subheading if desired
			if ( $subheading = wpex_page_header_subheading_content() ) { ?>
				<p><?php echo wp_kses_post( $subheading ); ?></p>
			<?php } ?>
		</div>
	</div>

<?php } );

So in this code we are checking if the overlay header is enabled if so we will insert content below the header that contains our title and subheading. The image defined in our page settings is added as a background to the row via inline CSS. Check out the result so far below:

Step 6: Add Custom CSS to get the look you want

So we've got our dynamic Overlay Header setup but it doesn't look that great, the last step is just to add a little CSS to make things look a bit nicer.

.my-custom-overlay-header-under-content {
    text-align: center;
    color: #fff;
    padding: 40px 0;
    position: relative;
}
.my-custom-overlay-header-under-content h1 {
    color: #fff;
    font-size: 42px;
    margin: 0 0 10px;
}

.my-custom-overlay-header-under-content p {
    font-size: 16px;
    font-style: italic;
}

Check out the result below:

Of course this is just a basic example showing how to center the header, change the color and tweak the font sizes a bit. You'll want to modify things to fit your needs. Also you probably will want to rename the classes used in the example such as "my-custom-overlay-header-under-content" to something slimmer (but unique to prevent conflicts).

Some Other Ideas....

This is just an example of what you can do, but the sky is the limit! Here are some other ideas to consider:

  • Instead of adding a new option for the overlay header image you can just use the page featured image instead and check for that
  • You can add extra checks for archives using the Total category post thumbnail functionality
  • You could create image sliders and use the Total image slider shortcode meta field and show those under the overlay header instead for fancier/animated overlay headers