Add Widget Areas to the Thesis Header

by Rick Anderson on December 23, 2011

Thesis Simple Header Widgets Plugin

This is the introductory video to our Thesis Simple Header Widgets plugin. This plugin allows you to quickly add widgets to the Thesis Header and escape the typical Thesis look.

We’ll begin at this Header Horizontal Widgets site I created to demonstrate the use of this plugin. And so far we just have the default Thesis Nav Menu and the default Thesis functionality here. This is what it looks like before the plugin is activated. This is the standard Thesis expression of WordPress.

Let’s go to plugins and activate the Thesis Simple Header Widgets plugin. As soon as we do that the plugin replaces this default Thesis behavior with the widget area that you see here – this familiar Thesis blue default widget.

Let’s go to the widgets panel. You can see here in the sidebar area that it has created an additional sidebar or a widget area called Left Header Area widgets which is empty. And this corresponds perfectly to this Left Header Area widgets. Let’s open up the Thesis Simple Header Widget Options page. What this plugin does is it creates either one or two areas inside of your Thesis header and either one can have a widget area in it.

Widgets and Sidebars in WordPress

What I’m calling a widget area WordPress call a sidebar. This term ‘sidebar’ is actually a holdover from the original incarnation of WordPress. Originally in WordPress there were no such things as widgets and the sidebar was just a side bar of a page that you would put other code in if you wanted something in the sidebar.

Around 3 years ago WordPress added this concept of widgets where you could drag and drop widgets into this thing that was called sidebar and it was still imagined as this bar along the side. However, as it became apparent that were lots of potential places that you might want to use widgets, WordPress added the ability to put sidebars anywhere we wanted – the top, the bottom and in the middle.

And so the term ‘sidebar’ lost its location specific information. It’s no longer necessarily on the side. Now a sidebar can be anywhere and no longer suggests a location. Sidebar just suggests a function. Since I don’t find the term sidebar to be particularly useful anymore I refer to it as a widget area. You can think of it as either a sidebar or a widget area as long as you don’t think of it as being dependent upon being on the side of a page.

Widgets Areas Created in the Header

And so, what this plugin allows you to do is to create one or two widget areas inside the header. Either one of those areas can have widgets. Additionally, you can style the background of the overall header and of each individual widget area.

Configure Header Widgets Layout

The very first thing you do when configuring the header is to decide the number of areas you want. As I said, you have a choice of one header area or two header areas. If you select two and hit the save button a Header Layout section pops up here, just like this, and shows you what the configuration looks like.

Let’s return to the page where the plugin is installed and refresh it. Now the two areas stack with the left header area on the top and the right header area below. Go to Widget and now you see that there is a Left Header Area Widgets and a Right Header Area Widgets. So you’ve got these two sidebars or these two widget areas showing up on your widgets panel.

Let’s return to the Thesis Simple Header Widgets option page and review the choice of header arrangements. You can either have them stacked just like this or you can have them sit side by side. If you don’t specify a width then the header areas will be stacked as you saw earlier.

If you want them sitting side by side, you have to give the left header area a width. If you give it a width, the right header area will be automatically sized to take up the rest of the available space and will pop up beside it. Remember that you can see what arrangement the areas are in by looking in the Header Layout section.

I’ll show you an example. Under Left Header Area here, click on the plus to expand Left Header Area Height and Width. We’ll give it a width of 300 pixels and hit the save button. Now the Header Layout section here shows you that the two areas are side by side rather than stacked on top of each other. Let’s return to the page and refresh it. Here you can see the left header area is 300 pixels wide and the right header area takes up all the remaining space.

In the next video I’ll show you how to add a logo image beside the nav menu using the Thesis Simple Header Widgets plugin.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: