Adding a header widget in your Thematic child-theme

I’ve been building lots of wordpress sites lately and have been loving the thematic framework. I install the theme and then make my edits in a custom child theme. I’ve begun seeing a few things I end up doing in nearly every site and I wanted to share them because finding out exactly how to do it was a bit like finding a needle in a haystack.

The first one I’ll share is related to creating an extra widget area. I know thematic already has a ton of widget areas. I needed a spot in the header to easily update and add elements. It’s a place that commonly holds links, search boxes, phone numbers etc, and normally it’s ok hard coding that into the theme. But what about when it changes? I always try to empower my clients with the option of making tweaks like this on their own. I have found that it keeps them happy, as they don’t get billed or have to wait for me, and it keeps me happy, since that’s really not what I want to spend my time doing. I try to make my sites the kind that I need to do the heavy lifting and some instruction at launch, but then the client is in control and can maintain the site. Of course I explain that if they break it and I have to come in to fix it, then those are billable hours, anyways… that’s another post for another day. I wanted to give the header area (normally to the right of the logo but above the navigation) a widget area. It turns out that it is really a simple few lines of code put into the child-themes functions.php file to do it!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Add Widget area in header
function add_header_aside($content) {
        $content['Header Aside'] = array(
                'args' => array (
                        'name' => 'Header Aside',
                        'id' => 'header-aside',
                        'before_widget' => thematic_before_widget(),
                        'after_widget' => thematic_after_widget(),
                        'before_title' => thematic_before_title(),
                        'after_title' => thematic_after_title(),
                ),
                'action_hook'   => 'thematic_header',
                'function'              => 'thematic_header_aside',
                'priority'              => 0,
        );
        return $content;
}
add_filter('thematic_widgetized_areas', 'add_header_aside');

// And this is our new function that displays the widgetized area
function thematic_header_aside() {
        if (is_sidebar_active('header-aside')) {
                echo thematic_before_widget_area('header-aside');
                dynamic_sidebar('header-aside');
                echo thematic_after_widget_area('header-aside');
        }
}

I know I got this code from someone in some forum somewhere, but it was a long search, and I couldn’t find it again when I looked, so whoever you are, thanks! I usually end up putting a search widget in the header and a phone number or other contact links or rss links and it’s become pretty standard in my toolkit. Hope it helps!

This entry was posted in tutorial and tagged , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. Posted October 8, 2010 at 5:58 am | Permalink

    The hook works like a charm! Thanks!

  2. Posted February 5, 2011 at 11:43 pm | Permalink

    Thank you so much! Just what i was looking for and it worked great!
    Added some CSS awesomeness to it and it’s as flexible and client friendly as one could ever hope for! THANKS!!! =)

  3. Posted April 21, 2011 at 2:19 pm | Permalink

    I thank you too. This was exactly what I was looking for and it works the very best.

  4. Anita
    Posted July 3, 2011 at 8:35 pm | Permalink

    I tried adding this code to the functions.php file of the Featured Site Child Theme and it kept giving me an error, the code would show up on the top of the page and then load the rest of the content

    I’m not great with php so I’m not sure how to troubleshoot that. Any advice?

    Also, I’m looking to widgetize the pages leader so that I can put social media icons in it (not the front page leader). Is that possible with this code? (if not I might be able to tweak the design and put it in the header.

    Thanks for any advice.

  5. Posted October 15, 2012 at 7:39 pm | Permalink

    FANTASTIC!

    muchas gracias!

  6. Posted March 2, 2013 at 2:40 pm | Permalink

    Thank you so much Evan! That’s great!
    Keep going with your amazing work. :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    WCATL-Speaker

    Custom Post Types or Choose Your Own Adventure – WordCamp Atlanta 2014

    I’ve been fortunate enough to be able to present at WordCamp Atlanta 2014. That makes the 3rd year in a row I’ve been able to contribute to WordCamp Atlanta! Here are my slides. I’ll be posting a full blown post of my presentation as soon as I can get it all down. Plus I hear […]

    Screenshot 2014-03-17 08.12.14

    What screens want

    Great read if you haven’t yet read it yet: Frank Chimero : What screens want : http://frankchimero.com/what-screens-want/ web and interaction design are just as much children of filmmaking as they are of graphic design. Maybe even more so. After all, we both work on screens, and manage time, movement, and most importantly, change. So what […]

    bed-bug-lifecycle-stages

    Before You Report that Bug, Use this Pre-Contact, Self-Diagnosis Routine

    Wisdom for bug reporting from Newfangled There are a few things a developer usually needs to know in order to diagnose a bug, and these are the things we’re likely to come back and ask you about if you haven’t already provided them. So, to ensure we can help you as quickly as possible, here’s […]

    deathtozach-06

    In dependence – Not dead

    Great summary and call to arms to write our own content in our own ways on our own sites. Call it what you like but ‘blogging’ is somewhat waning, in the social webs. Since as easy it is to create your own site and express your own voice, we’re flocking to the ‘services’ that will […]

    Screenshot 2014-03-17 08.50.27

    I ain’t ‘fraida no maths

    I’d heard of the ‘coding maths’ series, but hadn’t watched it yet. I should have, it’s great! Keith Peters (one of the people who first got me into scripting) has a great series about the math behind coding and as always he has a way of making complex things simple to me! Learn all you […]

    Screenshot 2014-03-17 08.30.13

    Codecademy & English Computing Curriculum

    Today, Codecademy is really pleased to announce our partnership with Computing at School (CAS), the leading authority on the new computing curriculum in England. England is the first country to mandate programing in schools. Starting in September 2014, students aged between 5-16 will learn HTML, CSS, Python and JavaScript. CAS were largely responsible for designing […]