How to Hide the Mai Lifestyle Pro Banner Area With Code

Mai Lifestyle Pro, a popular Genesis child theme, supports banner areas after the header. (Check out the live demo here.) Banner areas with banner images — not unlike featured images — can add interest to a post and provide subliminal context.

Here’s an example from the Mai Lifestyle Pro demo. The area bounded by the red rectangle is the banner area.

However, the defaults for the banner area might not always give you the results you want.

The Problem: Mai Lifestyle Pro Defaults

I have a site on which I want banner images to display in the banner areas of only a very few posts. For all other posts, I want the banner area to be hidden. For the sake of discussion, I’ll focus on “pages”, and let’s suppose the site has 100 pages, only 3 of which I want to display banner images.

The way the customization options for the Mai Banner Area work, you must globally enable the Banner Area for a post type if you want it to show up on ANY post. The problem is that every page will, by default, display the Banner Area. Here’s what you get for posts that don’t have a banner image assigned:

I don’t want that. I don’t want the post title taking up so much real estate. And I certainly don’t want to have to manually hide the banner area for each of 97 pages by checking the Hide banner area checkbox in the Visibility Settings box of each page.

At first, I thought I could accomplish my goal by globally DISabling the Banner Area and then selectively unchecking the Hide banner area checkbox option for the 3 pages on which I want the banner area to appear. But this doesn’t work because when the Mai Banner Area is globally disabled, the Hide banner area option in the Visibility Settings box is not available.

The Solution in English: Hiding the Mai Lifestyle Pro Banner Area

I wrote a function that will display the Mai Banner Area for a page only if:

1. a banner image is attached to the page
   AND
2. the Hide banner area option is unchecked

(You might think I’d need just the first condition, but that’s not always going to work. Sometimes a banner image will be assigned and minds will change about displaying the banner area. Since minds that change can change again, it’s safest to simply check the Hide banner area option and not delete the banner image).

Stated in the reverse (which is actually the way the function is coded), the Mai Banner Area will be removed for any page if:

1. NO banner image is attached
   OR
2. the Hide banner area option is checked

The Solution In Code: Hiding the Mai Lifestyle Pro Banner Area

function nwb_mai_banner_display() {
	global $post;
	$is_banner_attached = metadata_exists('post', $post->ID, 'banner' );
	$is_banner_hidden = 
		( metadata_exists('post', $post->ID, 'hide_banner' ) 
		&& '1' === get_post_meta($post->ID, 'hide_banner', true) );
	
	/** 
	 * Remove the banner area if either:
	 * a) no banner image is attached or 
	 * b) a banner image IS attached BUT 'Hide Banner Area' is checked
	 */
	if ( ! $is_banner_attached  
		|| ( $is_banner_attached && $is_banner_hidden ) ) {
		remove_action( 'genesis_after_header', 'mai_do_banner_area', 20 );
	}
}
add_action( 'genesis_before', 'nwb_mai_banner_display' );

Place this code in the child theme’s functions.php file.

Explanation:

• Line 3: I like to keep things readable, so I’m defining this variable so it can be used further on in the function. Let’s just see if there’s a banner image attached, shall we? When a banner image is attached to a post, WordPress adds a row to the post_meta table with the post ID of the post, a key of ‘banner’, and the URL of the banner image as the value. If no banner image is attached, this condition will evaluate to false. The metadata_exists() function does pretty much what it sounds like.
• Line 4: Again, I’m defining a variable for use further down, for readability. Let’s find out if the Hide banner area option is checked for the current post.
• Line 5: I’m not 100% sure of this, but I believe a record with the ‘hide_banner’ meta key is entered into (or modified in) the post_meta table only if you change the status of the Hide banner area option from its default at least one time. So if you never did that, there would be no such metadata, and the script would choke here. Thus the use of metadata_exists in conjunction with the get_post_meta() call on the next line.
• Line 6: Get the value of the hide_banner meta_key for the current post. The possible values are ‘0’ (false, not hidden) and ‘1’ (true, hidden’). I’m using the three equal signs for exact match.
• Lines 13 -14: Here’s the condition, using the variables defined at the top. If there is no banner image attaced, or even if there is but the Hide banner area option is checked, then remove the banner area.
• Line 15: Using the remove_action function with gnesis_after_header as the hook. The function we’re removing is mai_do_banner_area: the function that, well, “does the banner area”.
• Line 18: Finally, we need to invoke this custom function, using the genesis_before hook.

If you found this article helpful, please consider sharing. Your feedback is welcome. Either fill out the short survey below and/or comment below.

And if you’d like to receive notifications of new article in your inbox, subscribe to my newsletter.

You might also enjoy...

Case Study: Emergency Notice Banner for Hybrid Web site Dynamic Linear Gradients for Background Images in Genesis Use Custom Fields to Hide Stale Posts Dive Into WordPress Custom Post Types – Part 2 Shorten Your WordPress Slugs (Permalinks)