Title: Add header widget area
Last modified: August 21, 2016

---

# Add header widget area

 *  Resolved [Shaunrafuse](https://wordpress.org/support/users/shaunrafuse/)
 * (@shaunrafuse)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-header-widget-area/)
 * I want to add a widget area to the header area to the right of my logo, how would
   I go about doing this?

Viewing 15 replies - 1 through 15 (of 15 total)

 *  [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/)
 * (@swansonphotos)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4965950)
 * This is possible but would require some code work based on the theme in use.
 * Start here (review the links also:
 * [http://codex.wordpress.org/Widgetizing_Themes](http://codex.wordpress.org/Widgetizing_Themes)
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4965994)
 * you can do that by yourself without using any plugin .. with an html code . i
   recently had the same question you are posting
 *     ```
       <div style="min-width:99%; max-width:99%; width:100%;">
       <span style="float:left;">
       logo here( on left )
       </span>
       <span style="float:right;">
       put any html or php code here , aligned to right
       </span>
       </div>
       ```
   
 * hope u fix that 🙂
 *  Thread Starter [Shaunrafuse](https://wordpress.org/support/users/shaunrafuse/)
 * (@shaunrafuse)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966033)
 * Thanks PVWD, E&G..
 * I’ve taken a look through that widgetiziting document before for other information,
   great post.. I just thought there has to be an easier way though…
 * I’ve chosen to simply implement the div that E&G suggested with a javascript/
   text code, but if you take a look: [http://homehealthyfitness.com](http://homehealthyfitness.com),
   it hasn’t worked out exactly according to plan…
 * I’m trying to make it adjacent to my header image and it also moved my search
   button!
 * I tried placing it in various spots in the header.php but with no desirable outcome…
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966054)
 * hello , i am so sorry i could not understand all your reply , am kind of newbie
   to this but , if you just want to make your header elegant :
    make the logo and
   728×90 google banner look inline in the same line, you may want to reduce the
   size of your logo , and use my code. first , try to erase that search toggle 
   from header.php . then erase all concerning the logo and ad , then put this code(
   after making a backup ) :
 *     ```
       <div style="min-width:99%; max-width:99%; width:100%;">
       <span style="float:left;">
   
       <a href="/" title="HomePage"><img src="http://homehealthyfitness.com/wp-content/uploads/2014/05/HomeHealthyFitness_CustomLogoDesign_sm13.png" width="300" height="90" alt="Home Healthy Fitness: Bringing good and fitness to your home"></a>
   
       </span>
       <span style="float:right;">
   
       <!-- put your google ad code for 728x90 banner -->
   
       </span>
       </div>
       ```
   
 * i gived your site a try , check [the screen shot](https://scontent-b-mxp.xx.fbcdn.net/hphotos-xpa1/t1.0-9/10339689_571516902968169_542864787536010884_n.jpg).
   
   i currently use that div code in my [site’ header](http://elegance-style.com)
 *  Thread Starter [Shaunrafuse](https://wordpress.org/support/users/shaunrafuse/)
 * (@shaunrafuse)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966074)
 * That worked awesome! Thank you so much, been meaning to fill that spot for some
   time now lol, really appreciate it!
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966196)
 * oh great i see your logo fits with the banner now .. good you are so welcome 
   🙂
 *  [poppiesblooming](https://wordpress.org/support/users/poppiesblooming/)
 * (@poppiesblooming)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966258)
 * Hi I was wanting to do this, as well, but I have a rotating header code added
   to my site. I want to change the layout quite a bit actually and want to have
   a widget area next to the new style header but will still be using about 15-20
   images that are selected randomly every time a person lands on the site or refreshes.
   Can I use this code for that and if so, where would I put it?
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966260)
 * Hello [@blue](https://wordpress.org/support/users/blue/),
    sorry for this late
   reply but i just found out you left a reply. link to your site &/or theme = priceless!
 *  [GarvanForum](https://wordpress.org/support/users/garvanforum/)
 * (@garvanforum)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966262)
 * Hi guy,
    I need your help if possible. You seem to be quite confident with header
   and widgets. I would like to have a currency widget (which I already have) on
   the header of my site, in order to be visible in every single pages:
 * website: debruir.com
    theme: xmarket
 * I have followed the instructions written in the following post but I never succeed:
 * [https://wordpress.org/support/topic/child-theme-adding-a-header-widget-area?replies=23#post-6274259](https://wordpress.org/support/topic/child-theme-adding-a-header-widget-area?replies=23#post-6274259)
 * I have pasted the following codes in my function.php:
 *     ```
       <?php
       // Add a widget.
       if (function_exists('register_sidebar')) {
       register_sidebar(array(
       'name' => 'Extra Widget Before Header',
       'id' => 'extra-widget',
       'description' => 'Extra Widget Before Header',
       'before_widget' => '<div id="%1$s" class="widget %2$s">',
       'after_widget' => '</div>',
       'before_title' => '<h2>',
       'after_title' => '</h2>'
       ));
       }
       // Place the widget before the header
       add_filter ('before_navbar', 'add_my_widget');
       function add_my_widget() {
       if (function_exists('dynamic_sidebar')) {
       dynamic_sidebar('Extra Widget Before Header');
       }
       }
       ```
   
 * By doing this operation I can see “Extra Widget Before Header” on my WordPress
   dashboard but, whenever I drag and drop any widgets in the “Extra Widget Before
   Header” container, it wont work on the front end of my website.
 * Am I doing anything wrong?
    I appreciate your attention guys and I hope I can
   finally solve this issue.
 * Thanks
 *  [GarvanForum](https://wordpress.org/support/users/garvanforum/)
 * (@garvanforum)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966263)
 * Hi guys,
    Sorry to disturb you again I have just managed to add the widget in
   a better place than before but I still would like to know if it is possible to
   place the widget area beside my logo.
 * Just for the record I have added the following code to get what I have at the
   moment:
 * In functions.php:
 *     ```
       //add a widget area in the header as described by TomHart
       if ( function_exists ('register_sidebar') )
       register_sidebar( array(
         'name' => __( 'Header Widgets Area', 'twentythirteen' ),
         'id' => 'sidebar-header',
         'description' => __( 'Header widgets area for my child theme.' ,  'twentythirteen' ),
         'before_widget' => '<aside id="%1$s" class="widget %2$s">',
         'after_widget' => '</aside>',
         'before_title' => '<h3 class="widget-title">',
         'after_title' => '</h3>',
       ) );
       ```
   
 * and in header.php:
 *     ```
       <?php if ( !function_exists('dynamic_sidebar') ||
       !dynamic_sidebar('Header Widgets Area') ) :
        endif; ?>
       ```
   
 * Thanks again.
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966264)
 * Hello there!
 * what you did is which is a good thing, you have registered a new sidebar where
   you can place widgets through _wp-admin/widgets.php_ and now all you need is 
   to use some CSS to keep the logo banner and your widget content displayed inline..
   once you have added what you want to add, look into your source code and apply
   some CSS.. you can try the following.
 * this is some of your header code :
 *     ```
       <header id="header">
       <div class="logo">
       <img .. />
       </div>
       <div class="clear"></div>
       </header>
       ```
   
 * Your logo has this style :
 *     ```
       width: 38%;
       text-align: left;
       ```
   
 * now what you need to do is, add the registered sidebar before the clearing div(`
   <div class="clear"></div>` ), and associate some CSS style to it so that it appears
   online with logo, and floated to the right, like the following:
 *     ```
       float: right;
       width: 60%;
       ```
   
 * All :
 *     ```
       <header id="header">
   
       <div class="logo">
       <img .. />
       </div>
   
       <div id="header-sidebar" style="width: 60%;float: right;">
       <?php if ( !function_exists('dynamic_sidebar') ||
       !dynamic_sidebar('Header Widgets Area') ) :
        endif; ?>
       </div> <!-- #header-sidebar -->
   
       <div class="clear"></div>
       </header>
       ```
   
 * let me know if it worked, or if you needed further assistance 😉
 *  [ceap](https://wordpress.org/support/users/ceap/)
 * (@ceap)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966265)
 * p;ease I want to add a slideshow widget to a theme which did not provide for 
   header widget. Can anybody help ?
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966266)
 * > please I want to add a slideshow widget to a theme which did not provide for
   > header widget. Can anybody help ?
 * [@ceap](https://wordpress.org/support/users/ceap/) : everything is possible dude.
   
   and what is your url ? theme used ? etc .. and how do you plan to insert the 
   slider ? i guess you use slideshow plugin which will give you a shortcode by 
   the end.. feed-backs on this please 😉
 *  [lrensi](https://wordpress.org/support/users/lrensi/)
 * (@lrensi)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966267)
 * I’m also trying to add a widget to the right side of my header so I can add a
   linked phone number and email. Any help would be greatly appreciated! Website:
   [http://lesliefife.org/](http://lesliefife.org/) Theme Used: MH Magazine
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966268)
 * **[@lrensi](https://wordpress.org/support/users/lrensi/)** – try asking on the
   forum for the theme you are using – start a new thread there:
    [https://wordpress.org/support/theme/mh-magazine-lite#postform](https://wordpress.org/support/theme/mh-magazine-lite#postform)

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Add header widget area’ is closed to new replies.

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [widget](https://wordpress.org/support/topic-tag/widget/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 15 replies
 * 8 participants
 * Last reply from: [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/add-header-widget-area/#post-4966268)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics