Banner Area

Banner Area

The banner Area can be enabled or disabled globally via the Customizer. If enabled, it can be configured globally or per page/post by adding an image from the media library or upload.

Here are some of the many possibilities:

Create customizable and beautiful full-width banners easily with Mai Theme.

The banner area is enabled globally by default, and can be disabled globally by unchecking the Enable Banner Area box. Globally enabling banner area creates a default full-width banner area that can be customized with a color or image background with overlays and/or inner box styling with many options. Enabled, without any options, the banner uses a dark gray background and light inner styling, and displays the post title and manual excerpt by default.

Banner Area Title & Description

The Banner Area titles and descriptions can be customized a few ways, depending on the type of content you are editing.

Pages/Posts/CPTs

For single pages/posts and custom post types, the banner title uses the actual page/post title, and the description uses the Excerpt metabox.

If you don’t see the Excerpt meta box, make sure you it’s enabled (checked off) in your Screen Options tab of any Page.

Category/Tag/Taxonomy Archives

All category/tag/taxonomy archives use the term name as the banner title, but the banner content can be customized with the Genesis “Archive Headline” and “Archive Intro Text” fields available when editing a category/tag/term.

Custom Post Type Archives

Many custom post types work out of the box with Mai Theme. Their banner titles and descriptions work in identically to how category/tag/taxonomy archives work, using the same Archive Headline and Archive Intro Text fields available in the “Archive Settings”. If your CPT does not add post type support for ‘genesis-cpt-archives-settings’ then this setting will not be available. You can add support via:

// Add custom archive support for your CPT.
add_post_type_support( 'post_type_name_here', 'genesis-cpt-archives-settings' );

The banner background can be globally configured to use either a solid color using a color chooser or by entering a color hex code, or an image from the media library or uploaded.

On posts and pages, if a featured image is used, it can be set here to also be used for the banner image.

Enable overlay creates a light, dark or gradient overlay over the entire banner background (the inner styling box sits “on top” of the overlay), on both color backgrounds and image backgrounds. This can be used to create more contrast against banner content if desired.

Inner styling creates a light or dark box around the banner content – which includes the Page Title and manual excerpt (if there is any). By default, light inner styling is defined.

Use the Banner Content Width dropdown menu to choose the size of the content area within the banner area,

and the Text Alignment dropdown to align text Left, Right or Center.

When globally enabled, banners can be disabled here on specific post types or taxonomies. Banners can also be disabled on individual pages or posts in the page or post editor.

Check out our YouTube videos to see how Mai Lifestyle Theme banners can be created:

How To Add Banner Text/Excerpts To Mai Theme Genesis Child Theme

How To Customize The Banner Area Of Mai Theme Genesis Child Theme

Page/Post Settings

To configure the banner per page or post, add an image via the Banner Area or Featured Image metabox in the sidebar of the Editor by clicking the Add Image button.

Once an image is added you can remove it or hide it by checking the “Hide Image” box or the “Remove Image” link.

When the Banner Area is enabled, the Page Title and manual Excerpt are displayed in the inner styling box by default.

Video Guides

This video shows you how enable and customize the banner area:

This tutorial shows you how to add a text intro under the main banner title:

Remove content from the Banner Area

Put the following snippets on their own line in your theme’s functions.php file.

Remove all banner content

// Run before genesis display the page.
add_action( 'genesis_before', function() {

    // Remove all banner content in Mai Theme.
    remove_action( 'mai_banner_content', 'mai_do_banner_content' );

});

Remove the banner title (requires Mai Theme Engine v1.3.x)

// Remove the banner title.
remove_action( 'mai_banner_title_description', 'mai_do_banner_title', 10, 2 );

Remove the banner description (requires Mai Theme Engine v1.3.x)

// Remove the banner description.
remove_action( 'mai_banner_title_description', 'mai_do_banner_description', 12, 2 );

Run late enough

Depending where you run the code, you may need to make sure it runs late enough. For this, you can wrap the code in a function that runs on a later hook.

// Run before genesis display the page.
add_action( 'genesis_before', function() {

	// Remove the banner title.
	remove_action( 'mai_banner_title_description', 'mai_do_banner_title', 10, 2 );

	// Remove the banner description.
	remove_action( 'mai_banner_title_description', 'mai_do_banner_description', 12, 2 );

});

Remove the banner title on single Posts/Pages/CPTs and add it back to the content.

// Remove the banner title on single pages/posts/cpts.
add_action( 'genesis_before', function() {

	// Bail if not a single post/page/cpt.
	if ( ! is_singular() ) {
		return;
	}
	
	// Remove the banner title.
	remove_action( 'mai_banner_title_description', 'mai_do_banner_title', 10, 2 );
});
	
// Add the default title back on single pages/posts/cpts.
add_action( 'mai_banner_title_description', function() {
	
	// Bail if not a single post/page/cpts.
	if ( ! is_singular() ) {
		return;
	}
	
	// Add back the post title.
	add_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
	add_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
	add_action( 'genesis_entry_header', 'genesis_do_post_title' );
	
}, 30 );