Blog

18 Mar
2013

WordPress Icon Logo

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; ?>
Posted in: < CMS >
me@grafxflow avatar

me@grafxflow


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!

Visitors also viewed these posts

16 Thoughts

  1. 18 Jun
    2013

    avatar

    ade

    perfectly okay
  2. 19 Feb
    2014

    avatar

    giancarlo

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

    avatar

    me@grafxflow

    Okay thanks 'giancarlo' I have amended the code now and it should work fine.
  4. 30 Apr
    2014

    avatar

    Mo

    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. 01 May
    2014

    avatar

    me@grafxflow

    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. 07 Jun
    2014

    avatar

    Rogue

    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. 07 Jun
    2014

    avatar

    me@grafxflow

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

    avatar

    karl

    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. 17 Jul
    2014

    avatar

    me@grafxflow

    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. 03 Nov
    2014

    avatar

    Outsole

    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. 03 Nov
    2014

    avatar

    me@grafxflow

    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. 04 Feb
    2015

    avatar

    David

    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. 06 Feb
    2015

    avatar

    me@grafxflow

    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. 28 May
    2015

    avatar

    Alaya

    It worked! Thank you!! :)))
  15. 27 Oct
    2016

    avatar

    Amin

    It works perfectly! Thank you :)
  16. 09 Nov
    2016

    avatar

    Clodagh

    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

Add comment

Add comment