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!

// 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');
                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. Both comments and trackbacks are currently closed.
  • Patrick

    The hook works like a charm! Thanks!

  • haza

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

  • Jeff

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

  • Anita

    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.

  • clemencizm


    muchas gracias!

  • Cátia Vala

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

  • Recent Posts

    Online regex tester and debugger: JavaScript, Python, PHP, and PCRE

    Stumbled on a great regex tool today. An explanation of your regex will be automatically generated as you type. Detailed match information will be displayed here automatically. via Online regex tester and debugger: JavaScript, Python, PHP, and PCRE. Tweet

    CSS Dig

    A chrome extension for analyzing your CSS. Check your properties (and reuse – are they following DRY principles?) and your CSS selectors (and their specificity). Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. Take a look at all your CSS […]

    How to use solid web principles to justify what you were going to do anyway | A List, A Fart

    Imitation may be the sincerest form of flattery, but mockery must be the biggest sign of mainstream… And this is a good thing,, the de facto web publication for web professionals, now has a parody site: Tongue in cheek, and sarcastic, but sadly, sometimes not very far from the truth… In this era of […]

    Add Shortcode with Add Media Button

    This code snippet really helped me today and since the post doesn’t have commenting enabled, I wanted to say thanks here! Working on building a WordPress plugin that generates shortcodes and wanted an interface for the user to create their own with a wizard of sorts, so using a media button, shortcode and thickbox all […]

    A Developer’s Guide to Contributing to WordPress Core

    Here’s a great post from the team at delicious brains, the same team who brings us WP Migrate DB Pro for all our wordpress database migration needs (and do a bang up job I might add). They discuss all the in and out of working with trac and the ticketing system as well as setting […]

    custom post types wordcamp presentation evan mullins

    WordCamp Presentation on WordPress.TV

    My presentation about Custom Post Types and Custom Fields from WordCamp Atlanta 2014 has been added to Here it is! Enjoy! Tweet