All of that empty space over in the right side of the WOO Canvas header! Let’s get a widget in there that we can use.

WOO Canvas could really use a widgetized header (right) area. Not the advertisement area (which gets blocked by pop-up blockers) but a nice widget area where we could put a company address or maybe some social media buttons. Here’s how to make that happen.

There are some other options for getting your buttons and other data into the menu bars, for example Add a search box in the top navigation of Canvas as well as Add a Search Box in the Primary Navigation of Canvas. You can also now more easily get that primary navigation into the header right section.

But if you’re just looking to get a widget into the right side of the header, here’s the code below and a video above to walk you through it.

[box type=”alert”]UPDATE: Please note, you no longer need the code (or anything) for header.php![/box]
[box type=”download”]Here’s a zipped version of the functions.php file for download for a child theme. [/box]

Code for functions.php

Find a happy home for this bit of code in your functions.php file. Again, I like the Fresh Canvas child theme so I’m not messing with Canvas theme files.

if (function_exists('register_sidebar')) {
register_sidebar(array(
 'name' => 'Header Widget',
 'id' => 'header-widget',
 'description' => 'This is a widgetized area in the right side of the header.',
 'before_widget' => '<div id="%1$s" div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
add_action( 'woo_header_inside', 'custom_canvas_header' );
function custom_canvas_header () {
?>
<div id="header-widget">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header-widget')) : else : ?>
<?php endif; ?>
</div>
<?php
}
}

CSS Styling

Here’s the code to style the widget. You’ll want to adjust the width and margins to your liking.

#header-widget {
 float: right;
 width: 400px;
 margin-top: 10px;
 }
#header-widget h4{
 color: #069;
 }