» » Artisteer 3.0: Add 3 Widget Areas To Your Header

Artisteer 3.0: Add 3 Widget Areas To Your Header

posted in: Artisteer | 0

If you’ve created a WordPress theme using Artisteer 3.0 and would like to know how to get widget areas in your header, follow the instructions below and with any luck, you’ll be styling and smiling. (Has not been tested on themes after 3.0)

First download this file:  DOWNLOAD (headerwidgets.zip)

The .zip contains three PHP files (sidebar-bannerleft, sidebar-bannercenter, and sidebar-bannerright)

Uncompress headerwidgets.zip and upload all three files to your theme’s root.

While you’re in your root, you’ll need to edit your header.php and style.css.

header.php

For page wide headers place the following code between the headerobject div(s) and the logo code. For sheet wide headers place after header-png div:

1
2
<div class="art-header-wrapper">
<div class="art-header-inner"></div>

Since this is a little tricky, I’ll show you how mine is laid out (page wide):

1
2
3
4
5
6
<div class="art-header-png"></div>
</div>
<div class="art-headerobject"></div>
<div class="art-header-wrapper">
<div class="art-header-inner"></div>
<div class="art-logo">

style.css

Place the following code at the very bottom of the page:

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
28
29
30
31
32
33
34
/* begin Banner Widgets */
.leftbanner-wrapper
{
display: block;
position: absolute;
z-index:1;
width: 100px;
height: 0px;
top: 50px;
left: 10px;
}

.centerbanner-wrapper
{
display: block;
z-index:1;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
left: 350px;
}

.rightbanner-wrapper
{
display: block;
z-index:1;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
right: 10px;
}
/* end Banner Widgets */

Now you’ll need to edit two more PHP files from your theme’s “library” folder (options.php and sidebars.php)

options.php

Find the following bit of code about 3/4 of the way down:

1
2
3
4
5
6
array(
'id' => 'theme_sidebars_style_default',
'name' => __('Primary sidebar', THEME_NS),
'type' => 'select',
'options' => $theme_sidebars_style_options
),

Place the following code before:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
array(
'id' => 'theme_sidebars_style_default',
'name' => __('Bannerleft sidebar', THEME_NS),
'type' => 'select',
'options' => $theme_sidebars_style_options
),
array(
'id' => 'theme_sidebars_style_default',
'name' => __('Bannercenter sidebar', THEME_NS),
'type' => 'select',
'options' => $theme_sidebars_style_options
),
array(
'id' => 'theme_sidebars_style_default',
'name' => __('Bannerright sidebar', THEME_NS),
'type' => 'select',
'options' => $theme_sidebars_style_options
),

sidebars.php

Find the following code at the very top of the page:

1
<!--?php global $theme_sidebars; $theme_sidebars = array(

Place the following code after:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'bannerleft' =--> array(
'name' => __('Banner Left Widget Area',THEME_NS),
'id' => 'bannerleft-widget-area',
'description' => __("This is the sidebar located within the left side of the header.", THEME_NS)
),

'bannercenter' => array(
'name' => __('Banner Center Widget Area',THEME_NS),
'id' => 'bannercenter-widget-area',
'description' => __("This is the sidebar located in the center of the header.", THEME_NS)
),

'bannerright' => array(
'name' => __('Banner Right Widget Area',THEME_NS),
'id' => 'bannerright-widget-area',
'description' => __("This is the sidebar located within the right side of the header.", THEME_NS)
),

If everything went according to plan, you should now have three widget areas in your header.  Edit the code at the bottom of your style.css to amend widget’s position in header.

WordPress Rocks! If you can dream it, I can create it!
Like this article? Please click below to share it. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *