genesis – WP Beaches https://wpbeaches.com Websites on the Northern Beaches Wed, 20 Dec 2017 06:54:09 +0000 en-US hourly 1 https://wordpress.org/?v=5.2 https://wpbeaches.com/wp-content/uploads/2017/08/cropped-wpb-site-icon-90x90.png genesis – WP Beaches https://wpbeaches.com 32 32 No Header Footer Genesis Template https://wpbeaches.com/no-header-footer-genesis-template/ https://wpbeaches.com/no-header-footer-genesis-template/#comments Wed, 20 Dec 2017 06:54:09 +0000 http://wpbeaches.com/?p=14446 Below is the code to create a Genesis template with no default header or footer elements, perfect to slot in to a page builder page. Add it in your child theme and add any other CPT names in the Template Post Type line, the option to choose it will be under the Page attributes meta…

The post No Header Footer Genesis Template appeared first on WP Beaches.

]]>
Below is the code to create a Genesis template with no default header or footer elements, perfect to slot in to a page builder page.

Add it in your child theme and add any other CPT names in the Template Post Type line, the option to choose it will be under the Page attributes meta box under the template dropdown.

genesis-template-no-header-footer

 

<?php
/*
Template Name:No Header Footer Template
Template Post Type: post, page, portfolio, event
*/


//* Remove site header elements
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

//* Remove navigation
remove_theme_support( 'genesis-menus' );

//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Remove site footer widgets
remove_theme_support( 'genesis-footer-widgets' );

//* Remove site footer elements
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );


genesis();

The post No Header Footer Genesis Template appeared first on WP Beaches.

]]>
https://wpbeaches.com/no-header-footer-genesis-template/feed/ 1
Fixing BuddyPress Profile Page CSS on a Genesis Theme https://wpbeaches.com/fixing-buddypress-css-genesis-theme-profile-page/ https://wpbeaches.com/fixing-buddypress-css-genesis-theme-profile-page/#comments Thu, 14 Sep 2017 02:16:24 +0000 http://wpbeaches.com/?p=13214 When you look at a BuddyPress profile page on a full width page with no sidebar when using a WordPress default theme like Twenty Sixteen it looks a lot better than when viewing in a Genesis starter theme…       So out of the box the Genesis theme loses the navigation layout structure of…

The post Fixing BuddyPress Profile Page CSS on a Genesis Theme appeared first on WP Beaches.

]]>
When you look at a BuddyPress profile page on a full width page with no sidebar when using a WordPress default theme like Twenty Sixteen it looks a lot better than when viewing in a Genesis starter theme…

 

buddypress-twenty-sixteen

Twenty Sixteen Theme

 

buddypress-genesis-sample

Genesis Sample Theme

 

So out of the box the Genesis theme loses the navigation layout structure of what can be achieved, as in the Twenty Sixteen theme, which is much cleaner.

All that really is different is a CSS class when using a full width layout, Genesis uses .full-width-content whilst BuddyPress default CSS uses .no-sidebar, so you just have to override the relevant BuddyPress CSS rules in your theme’s CSS using the .full-width-content CSS Class instead…..

@media screen and (min-width:55em) {
 body.full-width-content #buddypress #item-body,body.full-width-content #buddypress #item-header {
 background:#fff
 }
 body.full-width-content #buddypress #object-nav,
 #buddypress #object-nav {
 border-right:1px solid #ddd;
 float:left;
 margin-right:-1px;
 width:200px
 }
 body.full-width-content #buddypress #object-nav ul {
 background:0 0;
 border-bottom:0;
 padding:0
 }
 body.full-width-content #buddypress #object-nav ul li {
 float:none;
 overflow:hidden
 }
 body.full-width-content #buddypress #object-nav ul li span {
 background:#fff;
 border-radius:10%;
 float:right;
 margin-right:2px
 }
 body.full-width-content #buddypress #item-body {
 border-left:1px solid #ddd;
 overflow:hidden;
 padding:0 0 0 20px;
 width:auto;
 }
 body.full-width-content #buddypress #item-body #subnav {
 margin:0 0 0 -20px
 }
 body.full-width-content #buddypress #item-body #subnav ul {
 margin-top:0
 }
}

Giving us…

buddypress-genesis-sample-fixed

 

Removing the Cover Image Background

If you don’t want the large cover image as a background you can remove that with…

// Remove BP Cover Image
 add_filter( 'bp_is_profile_cover_image_active', '__return_false' );
 add_filter( 'bp_is_groups_cover_image_active', '__return_false' );

Which you can add in your functions.php – giving us…

buddypress-genesis-no-cover

 

Using Flexbox to control the layout

The last thing I want to do is tidy up the avatar header and primary navigation so they sit in a sidebar that I can control as a flexbox container, currently the mark up is…

buddypress-genesis-item-header-nav

 

Using BuddyPress hooks you can contain the item-header and item-nav with (also in functions.php)…

add_action('bp_before_member_home_content', 'prefix_add_sidebar_opening');
 // Add in Sidebar Div
 function prefix_add_sidebar_opening() {
 echo '<div class="sidebar-buddy-nav">';
 }

add_action('bp_member_options_nav', 'prefix_add_sidebar_closing');
 // Add in Sidebar Div Closing
 function prefix_add_sidebar_closing() {
 echo '</div>';
 }

Giving mark up…

buddypress-genesis-item-header-container

 

So now you can easily control the sidebar elements in a flexbox container, as well as the sidebar itself and the main .item-body by using flexbox properties on the outer div with the ID of  buddypress. The sidebar you can flow as a column and the outer layer which is the sidebar and body you would flow as a row.

 

buddypress-flexbox-layout

Bit more detailed CSS layout

 

@media screen and (min-width:768px) {

	.profile #buddypress,
	.media #buddypress,
	.bp-user #buddypress  {
	        display: flex;
	        flex-flow: row wrap;
	        justify-content: center;
	}
	
	.sidebar-buddy-nav{
		width: 25%;
	}
	
	body.full-width-content #buddypress #item-body {
		width:75%;
	}
	
	body.full-width-content #buddypress #object-nav,
	#buddypress #object-nav  {
		border-right:1px solid #ddd;
		float:left;
		margin-right:-1px;
		width:100%
	}
	
		#buddypress div.item-list-tabs ul li {
		float: left;
	}

}

This will make layout and source order easy to control.

The post Fixing BuddyPress Profile Page CSS on a Genesis Theme appeared first on WP Beaches.

]]>
https://wpbeaches.com/fixing-buddypress-css-genesis-theme-profile-page/feed/ 2
Add WooCommerce Add to Cart Button to Menu with Offscreen content like Outfitter Pro https://wpbeaches.com/add-woocommerce-add-cart-button-menu-offscreen-content-like-outfitter-pro/ https://wpbeaches.com/add-woocommerce-add-cart-button-menu-offscreen-content-like-outfitter-pro/#comments Wed, 13 Sep 2017 10:15:27 +0000 http://wpbeaches.com/?p=14049 This is a guide to add a WooCommerce Add to Cart button icon to a main menu with a toggle effect that displays added shop items in a mini-cart in an overlay. This is offscreen content displayed and closed on click, this is how the new Outfitter Pro theme uses it, in this guide it is…

The post Add WooCommerce Add to Cart Button to Menu with Offscreen content like Outfitter Pro appeared first on WP Beaches.

]]>
This is a guide to add a WooCommerce Add to Cart button icon to a main menu with a toggle effect that displays added shop items in a mini-cart in an overlay.

This is offscreen content displayed and closed on click, this is how the new Outfitter Pro theme uses it, in this guide it is applied to Genesis Sample Theme.

woocommerce-add-to-cart-menu

 

woocommerce-add-to-cart-toggle-items

Toggle Cart Items

 

The code snippets are prefixed with ‘prefix_’ and the language text domain set to ‘your-theme’ which you’ll need to replace with your own

 

The code in functions.php calls in additional files header-icon-menu.php and woocommerce-functions.php which will need to filed appropriately to the include path. You could lump all the code in functions.php but better practice to modularise the code into relevant directories.

The woocommerce-functions.php also calls a javascript  file in your-theme-woocommerce.js 

View this code snippet on GitHub.

So in the above the 2 external files are being referenced, then the menu is repositioned and finally the icon file is called in – if you have your own icon then don’t bother using the last function just style it in the CSS.

View this code snippet on GitHub.

This header-icon-menu.php contains all the mark up around the cart icon

View this code snippet on GitHub.

This file woocommerce-functions.php calls the woocommerce needed javascript as well as adding actual cart button and mini cart in the off-screen content area.

View this code snippet on GitHub.

This javascript file your-theme-woocommerce.js is for the toggle between cart button and mini-cart in the off-screen content.

View this code snippet on GitHub.

Finally some style for the cart icon, change it to suit your theme and design.

Ajax Adding Behaviour

To add items from a woocommerce archive page and update the cart items number circle immediately ensure the ajax option is unchecked in woocommerce settings.

woocommerce-uncheck-ajax

 

Demo site

 

The post Add WooCommerce Add to Cart Button to Menu with Offscreen content like Outfitter Pro appeared first on WP Beaches.

]]>
https://wpbeaches.com/add-woocommerce-add-cart-button-menu-offscreen-content-like-outfitter-pro/feed/ 2
Remove Post Info and Post Meta from Custom Post Types in Genesis Theme in WordPress https://wpbeaches.com/remove-post-info-custom-post-types-genesis-theme-wordpress/ https://wpbeaches.com/remove-post-info-custom-post-types-genesis-theme-wordpress/#comments Wed, 07 Jun 2017 02:35:26 +0000 http://coolestguidesontheplanet.com/?p=8362 After creating custom post types in WordPress on a Genesis theme by default the post info is displayed which contains the post author, post date and comments info and the post meta is also displayed which contains the category and tag values. You may want to have these values removed for your custom post types…

The post Remove Post Info and Post Meta from Custom Post Types in Genesis Theme in WordPress appeared first on WP Beaches.

]]>
After creating custom post types in WordPress on a Genesis theme by default the post info is displayed which contains the post author, post date and comments info and the post meta is also displayed which contains the category and tag values.

custom-post-info-custom-post-type

You may want to have these values removed for your custom post types but leave them intact for regular posts. This is possible by adding an action and function in your themes functions.php file:

add_action ( 'genesis_before_loop', 'themeprefix_remove_post_info' );
// Remove Post Info, Post Meta from CPT
function themeprefix_remove_post_info() {
	if ('custom_post_type_name' == get_post_type()) {//add in your CPT name
		remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
		remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
	}
}

All you need to swap in the above code is your custom_post_type name in the if statement. Then these post info and post meta data is removed just from that custom post type.

custom-post-info-custom-post-type-no-meta

The remove action for the genesis_post_info has a priority number set (12), this is because the original action is added with this number in the post.php file in the structure directory of the Genesis framework. To remove the original action they have to be exactly the same.

Remove Post Info and Meta from all CPTs apart from Posts

I find that I typically only use post info and post meta on posts only and not any other custom post types, you could add a catch all piece of code to prevent the post info and post meta from appearing in any post type apart from posts by using the not equals operator !

	
add_action ( 'genesis_before_loop', 'themeprefix_remove_post_info' );
/**
 * Remove Post Info and Post Meta on all CPTs but leave on posts
 */
function themeprefix_remove_post_info() {
	if ( 'post' !== get_post_type() ) {//add in your CPT name
		remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
		remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
	}
}

So in the code snippet anything other then posts will not have the info and metas because of

'post' !== get_post_type()

The post Remove Post Info and Post Meta from Custom Post Types in Genesis Theme in WordPress appeared first on WP Beaches.

]]>
https://wpbeaches.com/remove-post-info-custom-post-types-genesis-theme-wordpress/feed/ 5
Adding a Sticky Footer to Genesis Theme with Flexbox https://wpbeaches.com/adding-sticky-footer-genesis-theme-flexbox/ https://wpbeaches.com/adding-sticky-footer-genesis-theme-flexbox/#comments Tue, 23 May 2017 09:30:11 +0000 http://wpbeaches.com/?p=13030 A sticky footer refers to a web page footer that sticks to the foot of the page even when there is not a lot of content on the page, without one the footer will ride up leaving the layout somewhat unsightly.   There are various methods to add a sticky footer, some javascript and others CSS, you…

The post Adding a Sticky Footer to Genesis Theme with Flexbox appeared first on WP Beaches.

]]>
A sticky footer refers to a web page footer that sticks to the foot of the page even when there is not a lot of content on the page, without one the footer will ride up leaving the layout somewhat unsightly.

Need a sticky footer here

Need a sticky footer here

 

There are various methods to add a sticky footer, some javascript and others CSS, you can add a sticky footer to a Genesis layout with some simple flexbox rules.

/* Sticky Footer */

.site-container {
 display: -ms-flexbox;
 display:-webkit-flex;
 display:-webkit-box;
 display:flex;
 -ms-flex-direction:column;
 -webkit-flex-direction:column;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 flex-direction:column;
 min-height:100vh;
}

.site-inner {
 -ms-flex:1;
 -webkit-flex:1;
 -webkit-box-flex:1;
 flex:1;
 width: 100%;
 padding: 20px 0;
 word-wrap: break-word;
}

This will push down the footer to the bottom of the viewport.

genesis-flex-box-sticky-footer-in-place

As long as the Genesis theme follows the default structure this CSS will work – so the site-container is the parent of site-inner and site-footer which are adjacent sibling elements as in the layout below.

genesis-layout-structure

Check with caniuse to add the most up to date required vendor prefixes. Flexbox is certainly the way to go in the future.

 

IE 10 & 11

*An issue arose in that this fails in IE10 & 11 and the container collapses – so the container needs to display as block in these browser versions – which you can target with…

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 
 .site-container { display: block; } /* IE10 & IE11 */

}

 

Safari

*Another issue arose with some older Safari versions, these are harder to target, you could inject a class via javascript…

View this code snippet on GitHub.

Then apply CSS

View this code snippet on GitHub.

Ref

The post Adding a Sticky Footer to Genesis Theme with Flexbox appeared first on WP Beaches.

]]>
https://wpbeaches.com/adding-sticky-footer-genesis-theme-flexbox/feed/ 3
Blank Post or Page Template in Genesis Theme Showing Title and Content Only https://wpbeaches.com/blank-title-and-content-page-template-in-genesis-theme/ https://wpbeaches.com/blank-title-and-content-page-template-in-genesis-theme/#respond Tue, 07 Mar 2017 02:00:48 +0000 http://wpbeaches.com/?p=11370 This code will output a blank barebones WordPress Genesis page/post template with just the post title and content as entered in the post editor in the WP Dashboard. No header or footer content are included but WordPress hooks have been left for scripts to be included. This may be useful when a page needs to be…

The post Blank Post or Page Template in Genesis Theme Showing Title and Content Only appeared first on WP Beaches.

]]>
This code will output a blank barebones WordPress Genesis page/post template with just the post title and content as entered in the post editor in the WP Dashboard. No header or footer content are included but WordPress hooks have been left for scripts to be included.

This may be useful when a page needs to be different from the main theme but retain some of the inner styling.

View this code snippet on GitHub.

So the regular wp_head and wp_footer are retained for plugin hooks as well as header data for SEO, Scripts and HTML declaration  in genesis_doctypegenesis_title and genesis_meta.

After this the HTML markup is maintained with just the title and content produced for output using regular WordPress functions not Genesis actions.

The core code is taken from /genesis/header.php and /genesis/footer.php

 

genesis-page-template

File the template in your child theme and select from the page/post attributes section within the page/post editor.

Single Posts

WordPress 4.7 +

Since WordPress 4.7 supports templates for post and custom post types the ability to use custom templates is already available – as in the code above make sure your post or CPT has an entry in the Template Post Type declaration.

<?php
/*
Template Name:Title and Content Page
Template Post Type: post, page, portfolio, event
*/

Pre WordPress 4.7

If you require a post template use the plugin Single Post Template to enable that functionality.  After the plugin is activated create a new post template and just change the opening PHP template declaration to be:

<?php
/*
Single Post Template: Title and Content Page
*/

Followed by the code.

 

 

This post is an example of the bare bones template.

Any styled CSS declarations for the body, .site-container, .wrap and .site-inner will apply, you can override these by just adding a unique body class and assign new CSS rules.

The code includes a body_class filter which adds an extra CSS class, in the code example it uses ‘bare-bones‘ and is conditionally set based on the post slug name, with the unique class added you can override any body class CSS styles.

The post Blank Post or Page Template in Genesis Theme Showing Title and Content Only appeared first on WP Beaches.

]]>
https://wpbeaches.com/blank-title-and-content-page-template-in-genesis-theme/feed/ 0
Force a Custom Post Type To a Certain Layout in Genesis Theme in WordPress https://wpbeaches.com/force-custom-post-type-certain-layout-genesis-theme-wordpress/ https://wpbeaches.com/force-custom-post-type-certain-layout-genesis-theme-wordpress/#comments Sun, 05 Mar 2017 19:43:41 +0000 http://coolestguidesontheplanet.com/?p=8374 You can force a certain custom post type in a Genesis WordPress theme to have a certain page layout applied to it. You can add a function and filter to your functions.php file in your WordPress theme. This will save having to manually go through and resave the layout settings in WP dashboard at the…

The post Force a Custom Post Type To a Certain Layout in Genesis Theme in WordPress appeared first on WP Beaches.

]]>
You can force a certain custom post type in a Genesis WordPress theme to have a certain page layout applied to it. You can add a function and filter to your functions.php file in your WordPress theme. This will save having to manually go through and resave the layout settings in WP dashboard at the post level, or going forward you just want to ensure a certain custom post type follows the same  page layout.

To force the custom post type to go  full width:

add_filter( 'genesis_site_layout', 'themeprefix_cpt_layout' );
// Force a layout
function themeprefix_cpt_layout() {
    if( 'your-custom-post-type-name' == get_post_type() ) {
        return 'full-width-content';
    }
}

Just swap in your custom post type name in the if statement.

If you want just blog posts to have a certain layout in Genesis just use post as the value for get_post_type()

To force the Custom Post Type to use the other Genesis layouts just swap in the one of the values below in the return value above.

icon-chevron-right content-sidebar
icon-chevron-right sidebar-content
icon-chevron-right content-sidebar-sidebar
icon-chevron-right sidebar-sidebar-content
icon-chevron-right sidebar-content-sidebar

force-layout-cpt

 

 

 

 

 

Force a Layout to an Array of Custom Post Types

You can also force a layout to an array of custom post types with is_singular() , for example…

add_filter( 'genesis_site_layout', 'themeprefix_cpt_layout' );
// Force a layout
function themeprefix_cpt_layout() {
    if ( is_singular( array( 'post', 'treatment' ) ) ) {
        return 'content-sidebar';
    }
}

Will apply the sidebar layout to all single posts of normal posts and a CPT named treatment.

The post Force a Custom Post Type To a Certain Layout in Genesis Theme in WordPress appeared first on WP Beaches.

]]>
https://wpbeaches.com/force-custom-post-type-certain-layout-genesis-theme-wordpress/feed/ 5
Changing the Genesis Header HTML Structure and MarkUp Code https://wpbeaches.com/changing-the-genesis-header-html-output/ https://wpbeaches.com/changing-the-genesis-header-html-output/#comments Thu, 23 Feb 2017 00:50:43 +0000 http://wpbeaches.com/?p=11522 In Genesis Themes you can completely change the header structure HTML  by overriding the default code from the parent Genesis theme and use your own header mark up in your Child Theme. Two types of markup can be overridden the structure and the markup. Overriding Genesis Header Structure The header structure content in Genesis is controlled by the code…

The post Changing the Genesis Header HTML Structure and MarkUp Code appeared first on WP Beaches.

]]>
In Genesis Themes you can completely change the header structure HTML  by overriding the default code from the parent Genesis theme and use your own header mark up in your Child Theme. Two types of markup can be overridden the structure and the markup.

Overriding Genesis Header Structure

The header structure content in Genesis is controlled by the code in the parent theme in the file…

genesis/lib/structure/header.php 

The three functions that control the header are:

  • genesis_header_markup_open
  • genesis_header_markup_close
  • genesis_do_header

The functions are pretty self explanatory, 2 of them contain the actual opening and closing markup and the genesis_do_header is the ‘meat in the sandwich’.

They need to be removed by the action hook that added them in

  • add_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
  • add_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 );
  • add_action( ‘genesis_header’, ‘genesis_do_header’ );

So in your functions.php you would remove the initial action by changing what you are doing by using remove_action, then you would add in your own header functions and add them in to the same hook ‘genesis_header’ using add_action.

View this code snippet on GitHub.

In the above gist there is just one extra div added for a mark up task I needed – otherwise the code is the same as the original Genesis code.

Overriding Genesis Header Markup

The markup the builds the structure and head meta info as well as the opening site container content can be found in genesis/header.php

View this code snippet on GitHub.

To override this content just make a header.php in your Genesis child theme with the same content and adjust the markup accordingly.

The post Changing the Genesis Header HTML Structure and MarkUp Code appeared first on WP Beaches.

]]>
https://wpbeaches.com/changing-the-genesis-header-html-output/feed/ 9
Remove Post Info and Meta in Learn Dash Custom Post Types https://wpbeaches.com/remove-post-info-and-meta-in-learn-dash-custom-post-types/ https://wpbeaches.com/remove-post-info-and-meta-in-learn-dash-custom-post-types/#comments Fri, 06 Jan 2017 21:45:59 +0000 http://wpbeaches.com/?p=11995 Learn Dash for WordPRess has five custom post types; courses, lessons, quiz, topic and certificates – the custom post type registration names are sfwd-courses, sfwd-lessons, sfwd-quiz, sfwd-topic and sfwd-certificates respectively. To remove the default post info and post meta data from these custom post types in a Genesis theme use the following snippet in your functions.php file…

The post Remove Post Info and Meta in Learn Dash Custom Post Types appeared first on WP Beaches.

]]>
Learn Dash for WordPRess has five custom post types; courses, lessons, quiz, topic and certificates – the custom post type registration names are sfwd-courses, sfwd-lessons, sfwd-quiz, sfwd-topic and sfwd-certificates respectively.

To remove the default post info and post meta data from these custom post types in a Genesis theme use the following snippet in your functions.php file…

View this code snippet on GitHub.

The post Remove Post Info and Meta in Learn Dash Custom Post Types appeared first on WP Beaches.

]]>
https://wpbeaches.com/remove-post-info-and-meta-in-learn-dash-custom-post-types/feed/ 2
Create a Middle Header Widget Area for a Genesis Child Theme https://wpbeaches.com/create-middle-header-widget-genesis-child-theme/ https://wpbeaches.com/create-middle-header-widget-genesis-child-theme/#comments Thu, 15 Dec 2016 03:47:16 +0000 http://coolestguidesontheplanet.com/?p=8694 Most Genesis themes including the framework/sample theme come with a ‘header right‘ widget area which solves most header layouts, however there are times when an additional header middle widget area may come in handy, in particular for 3 distinct content blocks that requires a client when handing over, have to manage the content.   In the layout above you…

The post Create a Middle Header Widget Area for a Genesis Child Theme appeared first on WP Beaches.

]]>
Most Genesis themes including the framework/sample theme come with a ‘header right‘ widget area which solves most header layouts, however there are times when an additional header middle widget area may come in handy, in particular for 3 distinct content blocks that requires a client when handing over, have to manage the content.

genesis-header-middle-widget

 

In the layout above you can use the header right widget area to get the job done but a number of CSS rules with floats need to be added and at various media query sizes, instead we could add in an additional header middle widget area to control the middle company statement. The header-right would accommodate the social media menu and contact info and the .title-area div would on the left would take care of the logo.

First thing we need to do is register the new header middle widget.

Register the Widget Area

add_action( 'widgets_init', 'genesischild_extra_widgets' );
//Register in new Widget areas
function genesischild_extra_widgets() {
	genesis_register_sidebar( array(
	'id'            => 'header-middle',
	'name'          => __( 'Header Middle', 'genesischild' ),
	'description'   => __( 'This is the Header Middle area', 'genesischild' ),
	) );
}

In your functions.php file, register the new widget area, in the above mark up I have given an id of header-middle, this will now appear in the widget area in the WordPress Dashboard>Appearance>Widgets.

genesis-header-middle-widget-dashboard

Copy Genesis Header Mark-up

To position the new widget area in the header we need to recreate the original header and slot the new header-middle area in before the header-right area. The original Genesis header mark up can be found in the framework in /Lib/Structure/header.php between lines 885-915.

function genesis_do_header() {

 global $wp_registered_sidebars;

 genesis_markup( array(
 'html5' => '<div %s>',
 'xhtml' => '<div id="title-area">',
 'context' => 'title-area',
 ) );
 do_action( 'genesis_site_title' );
 do_action( 'genesis_site_description' );
 echo '</div>';

 if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {

 genesis_markup( array(
 'html5' => '<div %s>' . genesis_sidebar_title( 'header-right' ),
 'xhtml' => '<div class="widget-area header-widget-area">',
 'context' => 'header-widget-area',
 ) );

 do_action( 'genesis_header_right' );
 add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
 add_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
 dynamic_sidebar( 'header-right' );
 remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
 remove_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );

 echo '</div>';

 }

Copy this code out and paste it your functions.php file and now we need to edit it and add the new header-middle widget area.

Add in New Genesis Middle Header Widget

remove_action( 'genesis_header','genesis_do_header' );
add_action( 'genesis_header', 'themeprefix_genesis_do_header' );
//Add in the new header with the middle widget header
function themeprefix_genesis_do_header() {

 global $wp_registered_sidebars;

 genesis_markup( array(
 'html5' => '<div %s>',
 'xhtml' => '<div id="title-area">',
 'context' => 'title-area',
 ) );
 do_action( 'genesis_site_title' );
 do_action( 'genesis_site_description' );
 echo '</div>';

	
	genesis_widget_area( 'header-middle', array(
	'before' => '<div class="header-middle widget-area">',
	'after'  => '</div>',
	) );
        


	if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {

 genesis_markup( array(
 'html5' => '<div %s>' . genesis_sidebar_title( 'header-right' ),
 'xhtml' => '<div class="widget-area header-widget-area">',
 'context' => 'header-widget-area',
 ) );

 do_action( 'genesis_header_right' );
 add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
 add_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
 dynamic_sidebar( 'header-right' );
 remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
 remove_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );

 echo '</div>';

 }

}

So in the adjusted code above, the new widget area is positioned just before the header-right. The new header-middle widget has 3 CSS classes assigned, two of them are common with the header-right area and one is unique to itself .header-middle

At the bottom of the code there are 2 actions, the first one removes the old header and the second one adds in the new header with the new widget included.

Also the new header function has to have a unique name.

Another way to do this could have been to add a new action to the code and then position the widget to that action hook, benefit of that is you could hook in more content – but for this particular example I am just adding the widget straight into the header mark up – if the widget is empty, no code will be output.

CSS Adjustment

Some CSS refinement is needed to make the 2 header widget areas sit side by side. This needs to be added to your style.css

/*
 *Edit Alignment and percentage values to suit, add in CSS attributes like padding
 */

 .site-header .title-area {
 width:25%;
}

.site-header .header-middle {
 width:25%;
 text-align: center;
 float: left;
}

.site-header .header-widget-area {
 width:50%; 
}


@media only screen and (max-width: 767px) {
 
 .site-header .title-area, 
 .site-header .header-middle,
 .site-header .header-widget-area {
 width:100%;
}

I have chosen here to use percentage based widths, with the sum of the 3 header areas .title-area, .header-middle and .header-widget-area equal to 100%

 

genesis-header-middle-768

Down to 768px

 

 

genesis-header-middle-767

767px and lower

The widths are set to retain their alignment and proportions down to 768px and then stack ontop of each other below that viewport size. The percentage of these elments widths will be determined by the design and other design attributes such as padding need to be added.

Thats it, thats how you can work an additional widgetised area into the header.

Full Gist CSS & PHP here.

Example site.

The post Create a Middle Header Widget Area for a Genesis Child Theme appeared first on WP Beaches.

]]>
https://wpbeaches.com/create-middle-header-widget-genesis-child-theme/feed/ 5