Add widget to header in WordPress

16 Response

ade
18 Jun 2013
perfectly okay
|

giancarlo
19 Feb 2014
Friend is giving error in synthesis
Parse error: syntax error, unexpected ')'
|

me@grafxflow
20 Feb 2014
Okay thanks 'giancarlo' I have amended the code now and it should work fine.
|

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!
|

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.
|

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?
|

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.
|

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?
|

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 ?
|

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 :-)
|

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;	

}
|

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):









|

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.
|

Alaya
28 May 2015
It worked! Thank you!! :)))
|

Amin
27 Oct 2016
It works perfectly! Thank you :)
|

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