Written by me@grafxflow
18 Mar, 2013
16
6,678
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; ?>
24 Nov, 2013
07 Nov, 2012
26 Apr, 2018
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!
Follow11 Jul, 2023
21 Jun, 2023
25 Nov, 2022
20 Sep, 2022
Views: 162,266
Views: 38,656
Views: 34,332
Views: 31,735
16 Response
ade
18 Jun 2013giancarlo
19 Feb 2014Parse error: syntax error, unexpected ')'
me@grafxflow
20 Feb 2014Mo
30 Apr 2014Where 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 2014As 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 2014me@grafxflow
07 Jun 2014karl
17 Jul 2014me@grafxflow
17 Jul 20141. 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 2014me@grafxflow
03 Nov 2014David
04 Feb 20151: 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 2015It'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.
Also best to test it if the theme is responsive.
Alaya
28 May 2015Amin
27 Oct 2016Clodagh
09 Nov 2016www.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