Add a widget area to you WordPress theme.

Posted by on Apr 23, 2012 in Blog, Gridport, Storefront Themes, Themes, Wordpress | No Comments

You need to modify the theme PHP for this. You will need to maintain these changes in any theme update, so keep a record.
These instructions are for adding a widget area to the header of the Storefront themes Gridport Theme. The principals are the same for any theme and location though.
This is pretty simple PHP editing, so even if you have never done it before jump in, get your feet wet. remember keep a safe copy of the files somewhere. You can always just restore the originals if you break something. See the notes on editing PHP at the end of this post.

Creating the sidebar

All widget areas are called sidebars whether on the side or not.
You will be looking for the code that registers the existing sidebars, it will look like this

	
if ( function_exists('register_sidebar') )

Note that in most themes you will find this code in functions.php

In the Gridport theme folder open ‘theme-functions.php’. Find the code below. Starting around around line 545 you should find this which registers the last of the 4 footer widget areas.

	
if ( function_exists('register_sidebar') )

    register_sidebar(array(

    	'name'=>'Footer 4',

        'before_widget' => '',

        'after_widget' => '',

        'before_title' => '<h4>',

        'after_title' => '</h4>',

    ));

Copy all of that block and paste a copy right below it.
Change ‘Footer 4’ to ‘Header spot’
Save the file.
Congratulations, you have created a new sidebar! Go to the Appearance/Widgets area and you should see a new panel titled Header spot. You can add widgets but at this stage they will not appear on your site.

Now you need to add the sidebar to the theme

Just to be clear again, these instructions are for adding a sidebar to the header of the Gridport theme. For other themes and locations the principals are the same.

So in Gridport theme folder open header.php.and find the highlighted line around line 75. Add the rest of the code below right after line 75 as shown

	
</div><!-- end of header-left -->
<div class="clear"></div>
<div id="header-spot">
<?php if ( !function_exists('dynamic_sidebar') ||
           !dynamic_sidebar('Header spot') ) : ?>
  This is where the Header spot Sidebar appears, This will be displayed only if the sidebar is empty
<?php endif; ?></div>
<div class="clear"></div>

Save.
You will now see that line of text “This is where the Header spot appears….” in your site. Remove that line if you want nothing to appear when there are no widgets.
Go to Appearance/Widgets in WordPress .
Add a widget to your new “Header spot” widget area. Add 2 or 3 if you like.

NOTE:

I was asked if this could be done just on the Gridport Homepage. You can apply these concepts anywhere. As I answered that question already I may as well add the instructions here. This adds the content to just the homepage.
The code above that you to add to header.php you would add to the tpl_home_products.php instead.
You add it right AFTER this line which should be line 7

<?php get_header(); ?>

You can then style it with the id in the code using CSS such as

#header-spot{
width:30%;
height:200px;
display:block;
background:#666666;
}

Why did you call it Header spot? that’s a strange name.

Ok now there is one more bit which is optional. The original request for help with this was from someone who wanted to add designed content to the header, not just a calendar or some other basic widget.
If you want to have really good control over what appears there, rather than just a simple text widget, I suggest you install the “spots” plugin
This will give you a custom post type you can add to the area as a widget.
You will get a full editing page just like posts/pages/products for ‘spots’, You can have text, images etc all with the full wysywig editor. You then assign a spot to a widget and add it to the Header Spot sidebar you just created. This way you can easily create new posts for the header, keep your old ones etc. Want to change the header content? Just drag the existing spot widget out of the widget area, add a new one and assign a different spot post.
Get the ‘Spots’ plugin by searching “spots” in the plugins page, it is By Robert O’Rourke.
You can read more about Spots at the interconnect site. There is another post for developers

Tools:

You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Leave a Reply