WordPress Icon Logo
me@grafxflow

Written by me@grafxflow

18 Mar, 2013

16

6,699

Add widget to header in WordPress

You may want to add a widget to your WordPress theme header (or any page template) but have noticed that it doesn't appear in admin (Appearance->Widgets). Luckily it's possible with the following PHP code which makes it appear in admin and on your website page. The code is also based on a custom/from scratch theme.

1. First add this to your functions.php file.

(wp-content/themes/YOURTHEME/functions.php)

// The function to group all the widget areas //
function create_widgets_init() {
    // The custom widget //
    register_sidebars( 1,
    array(
    'name' => 'Head column',
    'id' => 'head-column',
    'description' => __('The header widget area, used for placing your custom widgets.'),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>')
    );
}

// ACTIVATE THE WIDGET(S) //
add_action( 'widgets_init', 'create_widgets_init' );

2. Then in your header.php file add. (wp-content/themes/YOURTHEME/header.php)

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('head-column') ) : ?>

<?php endif; ?>

Add comment

16 Response

  1. avatar

    ade

    18 Jun 2013
    perfectly okay
  2. avatar

    giancarlo

    19 Feb 2014
    Friend is giving error in synthesis
    Parse error: syntax error, unexpected ')'
  3. avatar

    me@grafxflow

    20 Feb 2014
    Okay thanks 'giancarlo' I have amended the code now and it should work fine.
  4. avatar

    Mo

    30 Apr 2014
    Didn't work for me. Got a blank page after uploading.

    Where exactly should the code be added to each file?
    (I added mine at the end of both files)

    Would be nice to get this going

    Thanks!
  5. avatar

    me@grafxflow

    01 May 2014
    I have amended the code could you try it again.

    As for the second element of code this should be added where you want the widget to output so inside a custom div tag.

    NOTE: One thing to note is that it can be any file not just the header so you could place it inside a page.php instead.
  6. avatar

    Rogue

    07 Jun 2014
    Thank you so much for these instructions. I have done this and it worked perfectly EXCEPT it is not centred. How does one centre this?
  7. avatar

    me@grafxflow

    07 Jun 2014
    You would have to add a css stylesheet to the div widget container - something like margin-left:auto and margin-right:auto.
  8. avatar

    karl

    17 Jul 2014
    I tried this code it works well. thank you. the only thing is that it put my widget under the navigation bar. I need to place it above it. any suggestions?
  9. avatar

    me@grafxflow

    17 Jul 2014
    I am guessing:

    1. How is the navigation being placed via the CSS position etc.

    2. Have you placed the widget above the <nav tag or above the wp_nav_menu ?
  10. avatar

    Outsole

    03 Nov 2014
    It works perfectly! Do you know how I can align the widget space to the right instead of left? I can't code myself :-)
  11. avatar

    me@grafxflow

    03 Nov 2014
    It's hard to say without seeing the code and the page itself. But maybe something like this in the style.css file which you can find in your themes folder...


    #widget-column {
    float:right;
    }
  12. avatar

    David

    04 Feb 2015
    Good instruction.. got 2 questions.. I have added 3 widget areas to the header, but they are displaying vertically (on top of each other).

    1: how can I get them next to each other?
    2: how can I add them to CSS.. Don't know what CSS section to add (or how to call it)

    Code in Header.php (Kool theme):








  13. avatar

    me@grafxflow

    06 Feb 2015
    Hi David,

    It's hard to say without seeing the code.

    You could try adding the following code in the style.css file which is in the themes folder.


    #masthead .widget, #masthead > .widget {
    float:right;
    }


    Also best to test it if the theme is responsive.
  14. avatar

    Alaya

    28 May 2015
    It worked! Thank you!! :)))
  15. avatar

    Amin

    27 Oct 2016
    It works perfectly! Thank you :)
  16. avatar

    Clodagh

    09 Nov 2016
    Hi there, I have got the image to align at the top central but it has made everything go centre. How can I stop everything else going central ?

    www.scotland4kids.com


    /**
    * Header Widget.
    */
    // The function to group all the widget areas //
    function create_widgets_init() {
    // The custom widget //
    register_sidebars( 1,
    array(
    'name' => 'Head column',
    'id' => 'head-column',
    'description' => __('The header widget area, used for placing your custom widgets.'),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => '')
    );
    }

    // ACTIVATE THE WIDGET(S) //
    add_action( 'widgets_init', 'create_widgets_init' );


    Thanks

Smart Search

131 Following
57 Followers

me@grafxflow

Hull, United Kingdom

I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Follow