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. Both comments and trackbacks are currently closed.
  • http://www.whiteacecreative.com Patrick

    The hook works like a charm! Thanks!

  • http://hazanaya.com 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!!! =)

  • http://diverge.blogdns.com 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.

  • http://jam-graphic.com clemencizm

    FANTASTIC!

    muchas gracias!

  • http://catiavala.com Cátia Vala

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

  • Recent Posts

    promo

    What Is Code? If You Don’t Know, You Need to Read This

    Here’s a great read that may take a while but is a nice trip through programming history through the lens of one who’s been there. The world belongs to people who code. Those who don’t understand will be left behind. Source: What Is Code? If You Don’t Know, You Need to Read This Tweet

    Adactio: Journal—Instantiation

    There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This […]

    human_time_diff « WordPress Codex

    Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”. Source: Function Reference/human time diff « WordPress Codex Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. […]

    logo

    Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

    I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing […]

    Screenshot-2013-11-27-14.20.16

    Add Links to Twitter Mentions, Hashtags, and URLs with PHP

    This gem helped me out today as I was working with the Twitter API to create a custom WordPress widget. I was about to do exactly this and was not looking forward to it, luckily I did a quick search and found this webtips post. Thanks! If you’re using the Twitter v1.1 API to fetch […]

    regex101.com

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