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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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.
1
2
3
4
5
6
7
8
|
#header-widget {
float: right;
width: 400px;
margin-top: 10px;
}
#header-widget h4{
color: #069;
}
|
Hi Bradley
Your quick tutorial is brilliant, and simple to implement.
I’m using canvas theme, and am trying to display the header widget on the magazine / blog template only.
I created new sidebars, replacing the Woo Header Widget, but it doesn’t work.
Is there an easy solution?
thanks
Hey Schalk,
Thanks for writing. Glad it was of help. Do you use the “body” classes for conditional formatting? For example, here’s a home page (code) using the business layout:
body class=”home page page-id-67 page-template page-template-template-biz-php gecko two-col-left width-960 two-col-left-960″
That means that you could create CSS classes that would only work/show up when the business layout was used.
You get into Conditional Tags but it works. Unfortunately, you can’t put PHP into WOO Hooks (annoying), but you can put them into your files in Canvas.
I realize I’m not giving you a step by step here, but wanted to at least give you a quick reply and hopefully can help you on your way.
Thanks for an elegant, yet simple intro to creating widgets, and styling for Woo, which I’m relatively new to, but this helps to answer a great deal of questions regarding possible approaches and methods to achieve the desired styling. And actually as I’m writing this, I’d already finished and successfully implomented the tutorial code samples, without watching the video, which now that I have, makes it even better. Thanks Much! Keep up the good work..
Thanks for the note, Craig.
Bradley,
Great tutorial, easy to follow for a beginner like me. One question is there a way to position or align the new widget to the bottom of the header?
Thanks for the help!!!
You could use a bit or “margin-top” spacing to push it down. But then you’ll want to give it some “margin-bottom” negative spacing so you don’t push things down below it.
Hey very nice guide but there is a problem for me it all works but the final stage of the style sheet is not working i paste it but it doenst make any difference where am i going wrong?
Is your CSS named the same as what you called the widget?
it seems to be working now but it actaully changes my whole site lay out for some reason any ideas?
Maybe the width of the widget area is too wide? Or your logo/title is wider than what I have here? Play around with the widths, I bet things are pushing other elements around.
Bradley,
Very helpful tutorial. I am learning WordPress and Canvas and your video helped answer a nagging question. Really appreciate it.
Row
Happy to help, Row!
Hi Bradley,
I have just inserted my header wiget to the right (Awesome by the way), my main
question is how can I increase the right padding so its of the edge of the page.
If you have time please see my header at my site.
Regards in advance,
Daryl..
P.S.
Please ad me to your subscriber list, I think I can learn loads from you.
Hey Daryl,
Maybe just add a bit of margin right (or padding right) to the CSS above?
#woo-canvas-header-widget {
float: right;
width: 400px;
margin-top: 10px;
margin-right: 10px;
}
Hi Bradley,
I used your code to widgetize the right side of my header, and the code works!
However when I try to add social media plugins the images don’t appear instead just links to the pages. I have tried a plugin called “simple social icons” and the “woo – twitter stream” but it still shows everything in text form. I have left you an example on my website, for you to look at.
The strange thing is the widgetize header works fine with a search bar.
Thanks in advance.
Ed
Hi Ed, Thanks for writing … but where is the example text (not icons)? Did you do a screenshot? I just see your search bar.
Hi Bradley
Thank you for your speedy reply. Sorry I was moving thing’s around on my website last night, that’s why there was nothing there. I have added the “simple social icon”, I hope you can see my problem.
Thanks again.
Ed
Hi,
I will leave you a picture to look at of what I mean, as I am going to change it back to just being a searchbar for now.
http://tinypic.com/r/nvupe0/6
Thanks
Ed
Hi
I try to add a banner below the header using Canvas theme which should only be shown on the home page.
What code is required to do this? I tried hooks but it did not work.
Thanks
Andy
HI Andy,
With Canvas, each page has its own CSS descriptor, so for the home page, you could style it and call it, for example, “.home #banner” and give it the CSS elements for the banner. Hope that helps.
can u help me to add a 3 box widget area on woo_main_before hook. i want to add square boxes there with picture and content. i am not a coding expert
Hi Shibu,
I know what you’re asking and I’d like the same thing. For now, I’ve just been using a regular WP page and using WOO Shortcodes to make 3 columns. Low tech, but working … for now.
HELP!! I have used your php code in my functions php file and I have been kicked out with an error replacing my website.
Parse error: syntax error, unexpected ‘<' in /home/paulrush/public_html/collinsmchugh/www/wordpress/wp-content/themes/canvas/functions.php on line 118
I have been told by a friend that I shouldn't use the because the functions php file only needs it at the very start and end, but I am still getting the error.
What am I doing wrong, I am a novice so I’m sure it’s me but I just don get it.
Hi Michael,
Ugh, I’ve run into the same trouble sometimes. A tiny missing bracket or extra space somewhere and the whole thing blows up. You’ll need FTP access (file access) to edit that file. Once in, you can remove the incorrect code and start over. Or if you’re still stuck, just replace the functions.php file with the original file. Hope that helps.
Thanks for your help, It’s taken a while but it’s sorted now. I went back to your old route using the header.php
thanks again, it looks good
sorry, part of my question does not make sense, it should have read:
I have been told by a friend that I shouldn’t use the tags because the functions php file only needs it at the very start and end, but I am still getting the error.
Yes, it gets tricky with where do the different brackets start and finish. I find it’s easiest to start over with a fresh functions.php file (ideally, you’re using a child theme so it should be pretty empty) and just be careful with the brackets, spacing, and squigglies! I’ll go add a zipped version of the functions.php file I use in Fresh Canvas above in this post.
Hi Bradley,
Will this work for other Woo templates as well? I’m using Simplicity and after putting your code into the custom code part of functions.php I’m getting a syntax error: unexpected ‘<' in line 36 (in functions.php).
Do you have a solution? I'm not a coding expert…
I’ve only tried it for child themes of Canvas. But if you’re getting the unexpected error, you could try just removing what you think isn’t working. I’m not a coding expert either, so that’s how I usually do it, just trial and error.
Hi Bradley,
Thanks! This is great! How do I remove the line that appears above my new widget area? I put a social media widget in and would like it to appear free floating without the line above.
Thanks again! I especially am grateful for the functions.php file you had for download, as when I tried to create one on my own, I was getting a syntax error. Very helpful!!
Oh, never mind, I got it! I just removed the lines from all the widgets via the canvas menu. Thanks so much!
Hi Bradley,
I want to replace the latest posts on Canvas’ magazine template with a grid of widgets, sort of like putting 2 or 3 footer widgets or sidebars into the main content area. I saw your reply about using Woo’s columns shortcode, but thought I’d check and see if you’d succeeding in doing this.
Hi Lawrence,
I haven’t yet succeeded. I’m sure we can hack something together, but I’d like to have a “clean” option that’s easy to work with and easy/easier for users to manage also. Could it be as simple as something like using the “Widgets” template and dragging the widgets we want into it? That doesn’t solve the 3 columns, though. I’ll work on it. Please comment back here if you figure anything out yourself.
Hello,
This is exactly what I’ve been looking for! Unfortunately I can’t get it to work. I’ve copied the code from you functions.php file & pasted it into the functions.php file in my canvas child theme. But when I try to load my website it tells me that there’s a server error. Deleted the code & the site works fine again. As far as I can tell I copied the code correctly. Am I missing something? Any idea what might be causing this?
Thanks!
Matt
Hey Matt,
Even a tiny little blank space can break the whole site. Check for blank spaces at the end of the functions.php file. Also, I just saw that the code wasn’t above correctly so I just re-copied it in there. Hope that helps.
Best,
Bradley
Thanks for this, it’s awesome! Quick question, this seems to insert the widget before the #logo div in the code. I know css easily puts it in the right place, but when the site is responsive and shrunken down to mobile screens and divs get stacked, the widget area goes above the logo, when i would rather have the logo go above the widget. Too bad Canvas doesn’t have any hooks inside the header, but is there a way to order it so the widget comes after the logo in the html structure?
Thanks so much for your work!
Excellent question and the answer is … I don’t know. 🙂 Now that you mention it, you’re right, that would be better. Are you a WOO subscriber? You/I/we could post the idea in WOO Ideas.
Hi Bradley,
I feel a bit stupid asking this, but thought maybe you could help. I need to edit the Woo Canvas stylesheet…but can’t seem to figure out where. I don’t see any CSS tab to do my editing. Maybe it’s just early and I don’t know what I’m looking for. Thanks!
Hi Andrea,
As they say, there are no stupid questions! In your WP admin, you can find the Canvas CSS file under:
Appearance –> Editor, then upper right look for “Select theme to edit” and choose Canvas, then all the way at the bottom you’ll see Canvas’ style.css file.
Great tutorial, thanks! Exactly the solution I was looking for!
Glad I could help, Karen!
Hey there,
Is there a way to add this on the right side of the top navigation bar?
Thanks!
I’m guessing you mean widgetize the top navigation bar? Hmm, haven’t tried that one, but since it’s just a navigation bar, it might not be “tall” enough to put a widget in. What did you hope to put in the widget? Otherwise, I guess you could also just force some CSS to make that widget push higher up, into the top navigation.
In essence, yes. I was hoping to put a search field in the top navigation, so about the same height as the menu items, really. Any hints on how to use CSS to push it up into the top nav (if the widget won’t work)?
Thanks! 🙂
Thanks for this tutorial, I even applied this for another theme. The only problem is: when I place a widget a little bit to the left, then it becomes unclickable, just like a picture. Any ideas what could be wrong with it?
My guess is that the logo (or something on the left side) is overlapping or covering the space you’re trying to use. Maybe dig around and see if you can see if the logo width is changeable. For example, let’s say the site is 1,000 pixels wide. Say the logo area is usually 600 and your new right-side widget is 400. But if you’re moving it a bit too far to the left (say, 500), you’ll want to make sure the logo area is reduced by 100 to make it also 500 so it becomes 500 + 500 = 1,000. Again, just guessing!
Hey pretty slick!
I was looking for a way to put my banner under the menu, by any change you have article about it?
Thank you
A banner meaning an ad? Or an image? When the menu is where? When the menu is in the primary navigation or the top navigation? Or do you mean in this new widgetized area in the header. Do you have a link I could look at?
Hi Bradley,
By default if you upload a background header (i call it banner) the header will be on top the menu. I was looking for way to make it below instea hahaha
Subscribing to your blog.
Thanks, Jong!
This is the website I’m working on. I have tried this code to create a search widget in the upper right. It works fine, but in both canvas sites I’m working on it appears as a full width widget – 960 not 400px? So of course, it looks terrible and can’t stay that way.
Do you have any idea why?
Hi Laura,
Aha, thank you for pointing this out because I see what you mean and I see what’s wrong. I had the div as “#woo-canvas-header-widget” in the CSS, but it should just be “#header-widget”! I changed it above so see if that now works. Thanks so much for commenting!
Hello bradley,
Thx for this tutorial, I have a little problem, it’s ok for installing the header widget but when i try to put a text widget, there is only the title who is visible, the text don’t appear. (The others widgets are ok)
i would like to put the html code of this tutorial http://crunchify.com/social-media-css-sprite-example-for-your-wordpress-blog/ in the text widget for the social icon to appear on the header.
Do you have a idea why text don’t appear ?
Hi Lyser,
I see this bit of CSS in what you’re trying to do: ” background: url(images/social/social-icons.png); ” Do you have that image in the right place? With WordPress file structure, it might be in something like /wp-content/uploads/social-icons.png unless you create a directory for it. You could also try the full URL e.g. http://yoursite.com/wp-content/uploads/social-icons.png.
Comment back here if/when you get this to work as it looks like a cool use of social icons in the header. But I’d actually rather even have them in the top navigation, way over to the right.
Hey Bradley,
I tried something different with your tutorial and the “Easy Social Icons” and it works perfectly this time. (no more social-icons.png, yes it was not at the right place =))
I prefer have the social icon in header, because “ubermenu” plugin allow to have the research bar in the right of navigation bar.
Thx again for your tutorial ! 🙂
What’s the URL you’re working on? Could we have a look to see what you’ve done?
sure => http://www.lyser.fr/testwp/accueil/ (it’s a test page)
Looks great, Lyser!
thx 😀
I got the widget placed but cannot for the life of me get the styling to work. Ugh!
Hi Jimmy,
Good timing! WOO just released Canvas version 5.5.0 and they added the widgetized header! More about that here. So maybe now their tips on styling that new header widget will work better. Thanks for the note!
Hi,
Thanks for the code. Do you know how I can put the widget above the header instead of to the right? I’m trying to create some Ad Space. Thanks!
Hi Rebecca,
Ooh, not offhand, no. Sounds like you’ll want a function to put something above the header and not in the header would be ideal. But no, I don’t know how to do that (easily)!
IUsing Canvas 5.8.2 I can’t seem to get the header widget area to respond to css. I’d like the widget area to float right. Here’s the css I’m using
#header-widget {
float: right;
width: 200px;
margin-top: 10px;
}
Any thoughts, suggestions, ideas, musings???