Primary Nav

Navigation

Adding a widget into WOO Canvas (header right)

By on March 1, 2012 in Design, Developer, Themes 68

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.

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

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.

CSS Styling

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

, ,

68 Responses to Adding a widget into WOO Canvas (header right)

  1. Schalk March 26, 2012 at 2:46 pm #

    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

    Reply
    • Bradley Charbonneau April 9, 2012 at 10:42 am #

      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.

      Reply
  2. craig June 27, 2012 at 11:04 pm #

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

    Reply
  3. Rod July 30, 2012 at 11:56 am #

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

    Reply
    • Bradley Charbonneau September 20, 2012 at 4:48 pm #

      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.

      Reply
  4. lucas abraham August 4, 2012 at 5:45 pm #

    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?

    Reply
    • Bradley Charbonneau September 20, 2012 at 4:49 pm #

      Is your CSS named the same as what you called the widget?

      Reply
  5. lucas abraham August 4, 2012 at 6:43 pm #

    it seems to be working now but it actaully changes my whole site lay out for some reason any ideas?

    Reply
    • Bradley Charbonneau September 20, 2012 at 4:50 pm #

      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.

      Reply
  6. Row September 2, 2012 at 7:36 am #

    Bradley,

    Very helpful tutorial. I am learning WordPress and Canvas and your video helped answer a nagging question. Really appreciate it.

    Row

    Reply
    • Bradley Charbonneau September 20, 2012 at 4:51 pm #

      Happy to help, Row!

      Reply
  7. Daryl October 21, 2012 at 8:23 am #

    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.

    Reply
    • Bradley Charbonneau November 9, 2012 at 6:27 am #

      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;
      }

      Reply
  8. Ed November 10, 2012 at 5:04 pm #

    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

    Reply
    • Bradley Charbonneau November 13, 2012 at 6:59 am #

      Hi Ed, Thanks for writing … but where is the example text (not icons)? Did you do a screenshot? I just see your search bar.

      Reply
      • Ed November 13, 2012 at 11:29 am #

        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

        Reply
  9. Ed November 20, 2012 at 3:01 pm #

    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

    Reply
  10. Andy December 27, 2012 at 5:34 am #

    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

    Reply
    • Bradley Charbonneau January 8, 2013 at 6:47 am #

      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.

      Reply
  11. shibu December 31, 2012 at 5:39 pm #

    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

    Reply
    • Bradley Charbonneau January 8, 2013 at 6:49 am #

      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.

      Reply
  12. Michael Kemp January 16, 2013 at 1:44 pm #

    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.

    Reply
    • Bradley Charbonneau January 16, 2013 at 4:05 pm #

      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.

      Reply
      • Michael Kemp January 21, 2013 at 12:45 pm #

        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

        Reply
  13. Michael Kemp January 16, 2013 at 2:01 pm #

    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.

    Reply
    • Bradley Charbonneau January 16, 2013 at 4:08 pm #

      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.

      Reply
  14. Koen January 16, 2013 at 3:48 pm #

    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…

    Reply
    • Bradley Charbonneau January 16, 2013 at 4:32 pm #

      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.

      Reply
  15. Sara January 21, 2013 at 9:54 am #

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

    Reply
    • Sara January 21, 2013 at 10:12 am #

      Oh, never mind, I got it! I just removed the lines from all the widgets via the canvas menu. Thanks so much!

      Reply
  16. Lawrence February 12, 2013 at 11:08 am #

    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.

    Reply
    • Bradley Charbonneau February 17, 2013 at 8:26 am #

      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.

      Reply
  17. Matthew February 24, 2013 at 2:28 am #

    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

    Reply
    • Bradley Charbonneau February 28, 2013 at 9:42 pm #

      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

      Reply
  18. Steven Ma March 8, 2013 at 9:50 am #

    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!

    Reply
    • Bradley Charbonneau March 14, 2013 at 6:03 am #

      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.

      Reply
  19. Andrea March 11, 2013 at 4:55 am #

    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!

    Reply
    • Bradley Charbonneau March 14, 2013 at 6:05 am #

      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.

      Reply
  20. Karen August 12, 2013 at 6:31 am #

    Great tutorial, thanks! Exactly the solution I was looking for!

    Reply
  21. Aimee August 16, 2013 at 12:58 pm #

    Hey there,

    Is there a way to add this on the right side of the top navigation bar?

    Thanks!

    Reply
    • Bradley Charbonneau August 19, 2013 at 8:20 pm #

      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.

      Reply
      • Aimee August 19, 2013 at 8:28 pm #

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

        Reply
  22. Mantis August 18, 2013 at 12:11 pm #

    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?

    Reply
    • Bradley Charbonneau August 19, 2013 at 8:13 pm #

      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!

      Reply
  23. Jong August 22, 2013 at 6:34 pm #

    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

    Reply
    • Bradley Charbonneau August 22, 2013 at 7:29 pm #

      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?

      Reply
      • Jong August 22, 2013 at 10:00 pm #

        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

        Reply
  24. Jong August 22, 2013 at 6:35 pm #

    Subscribing to your blog.

    Reply
  25. Laura September 11, 2013 at 9:40 am #

    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?

    Reply
    • Bradley Charbonneau September 11, 2013 at 10:13 am #

      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!

      Reply
  26. Lyser September 16, 2013 at 4:02 pm #

    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 ?

    Reply
    • Bradley Charbonneau September 18, 2013 at 10:15 am #

      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.

      Reply
      • Lyser September 18, 2013 at 10:34 am #

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

        Reply
        • Bradley Charbonneau September 23, 2013 at 9:17 am #

          What’s the URL you’re working on? Could we have a look to see what you’ve done?

          Reply
  27. Lyser September 23, 2013 at 9:33 am #

    sure => http://www.lyser.fr/testwp/accueil/ (it’s a test page)

    Reply
  28. JImmy C October 8, 2013 at 9:35 pm #

    I got the widget placed but cannot for the life of me get the styling to work. Ugh!

    Reply
    • Bradley Charbonneau October 11, 2013 at 4:21 pm #

      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!

      Reply
  29. Rebecca May 14, 2014 at 6:32 pm #

    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!

    Reply
    • Bradley Charbonneau May 24, 2014 at 9:50 am #

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

      Reply
  30. Craig August 16, 2014 at 7:13 am #

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

    Reply

Trackbacks/Pingbacks

  1. Status Report: 100 Posts in 100 Days - February 1, 2013

    […] Adding a widget into WOO Canvas (header right) […]

  2. 200 Posts in 200 Days - May 8, 2013

    […] People Need? Pass the Sour Cream? It’s entertaining (hopefully) and inspiring. But when your WOO Canvas Header Widget is not lining up right, you need help. Traffic is steadily increasing and this is going to be my […]

  3. WOO Canvas Header Widget Editing - July 17, 2013

    […] about how to create that WOO Canvas Header Widget. There are a few CSS tips there and you can see how, for example, how to make the area taller. You […]

Leave a Reply