Adding content above the header

Asked on November 27, 2015 in Customization.

I’m looking to add content above the header, i want to add a section at the very top of my site with a phone number and email which is above the header, I cannot see a way to do this?

Lee Foley Layers User
Reply
  • Possible Answers to Your Question:

  • 2 Answer(s)
    Answered on November 29, 2015.

    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.

    on November 30, 2015.

    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

    on September 25, 2016.

    You can find some help at https://writingpeak.co.uk/coursework-writing-service If you decide to use this help you will need to leave a request using the form on the site. During a short period of time you will get a detailed answer. Regards!

    on April 16, 2019.

    Hi there. Sophie, I have one more useful advice about Writing Assignments.  First of all, you need to understand what kind of writing is. This can help you to avoid many mistakes completing this task.  Also, try to check some examples. 

    on May 23, 2019.
    on February 27, 2020.
    Reply
    Answered on November 30, 2015.

    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

    on August 30, 2019.
    Reply