• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours
Mai Lifestyle Pro Banner

By Jeff Cohan, June 15, 2020

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.

Mai Lifestyle Pro Banner
Click to enlarge

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:

Mai Lifestyle Pro Default Banner
Click to enlarge

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.

Related Posts

  1. Case Study: Emergency Notice Banner for Hybrid Web site
  2. Dynamic Linear Gradients for Background Images in Genesis
  3. Use Custom Fields to Hide Stale Posts
  4. How to Build Stunning WordPress Photo Galleries Quickly and Easily With FooGallery PRO
  5. Dive Into WordPress Custom Post Types – Part 2
  • Choose the best match.

Written by Jeff Cohan · Categorized: Snippets · Tagged: Genesis, Mai Lifestyle Pro, WordPress

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022
  • Make your Web Site the Heart & Hub of your Online Marketing Strategy March 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (37)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×