Adding content above the header
Currently, Layers doesn’t support this function. However, it is possible to do a workaround with a little bit of coding.
– First you will need to create a child theme, if you don’t know how to do this then read up here https://docs.layerswp.com/theming/or there are several plugins out there that will create a child theme for you.
– Secondly, in your child theme, create/open up the file called functions.php and add the following code:
function above_header_widgets_init() {
register_sidebar( array(
'name' => 'Above Header',
'id' => 'above_header',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'above_header_widgets_init' );
This will add a widget area to your theme called “Above Header”
– Next in your child theme, create a file called header.php and copy the contents from header.php in the layerswp theme to here.
– You are now going to output the widget area in your header.php file. Do this by adding the following code just before the line
do_action('layers_before_header');
<?php if ( is_active_sidebar( 'above_header' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'above_header' ); ?> </div><!-- #primary-sidebar --> <?php endif; ?>
– Now, when you visit the customizer, go to Edit Layout and you will see the tab “Above Header” – add widgets to here and they will be displayed above the header content.
KNOWN ISSUES:
– The widgets show up on everypage – you might want this, but if, for example you wanted a slider above the header just on the first page, then you would need to change the first line of the code in header.php to this:
<?php if (( is_active_sidebar( 'above_header' ) ) && (is_front_page())) : ?>
– Styling – there are no styling functions for this widget area – so changing the background, or font colors etc you would have to do through the devKit
Hope this helps you out,
Sam
Thankyou, perfect solution and working as I wanted.
HI,
I’ve followed this example and successfully added the function.php part. However, the problem I’m having is when the header.php file is copied, it isn’t showing in the WordPress theme editor. The child theme css editor and the function.php pages are there, but the header.php stubbornly refuses to show. Is there somethiing I’m doing wrong here? Even a straigtt copy and paste from the Layers folder to the child theme folder is having no effect. I am using Layers 1.6.0 pro.
I look forward to your reply
solotk
Hi there,
Just to add, you can enable the Top Bar in Layers by creating a menu and assigning it to one of the Top Menu positions. Linked text can easily be added using the Custom Link function , or you can use the following hooks to quickly inject HTML of your choosing:
layers_before_header_secondary_inner
layers_after_header_secondary_left_nav
layers_before_header_secondary_right_nav
