Tutorial: Create More Sidebar Space Above Content |
|
Caleb
|
Create More Sidebar Space above Content
Artisteer 3 (or perhaps an earlier version) added two extra widget sidebar areas called "First Top Widget Area" and "Second Top Widget Area. These go above your sytlesheet content but below the header. You should be able to see these when you're logged into your Wordpress theme; go to appearance, and click on Widgets. You should see the "First Top Widget Area and Second Top Widget Area" on the right side column. In this tutorial, we will add a "Third Top Widget Area and a Fourth Top Widget Area." This is very simple and should only take you about 30 seconds to one minute to accomplish. You can see it in action here: http://ontherightroad.org (note I only used three of the four).
Image 1 is of First and Second Top Widget Areas inside your widget section in Wordpress: http://teamkinley.us/wp-content/uploads/2011/04/firsttopwidgetarea.png
Image 2 is of 3rd and 4th widget areas after their creation: http://teamkinley.us/wp-content/uploads/2011/04/first-4thtopwidgetarea.png
As always, before you make any changes to your files, you should back up your Wordpress. A free and excellent plugin is called EZPZ Backup created by UncaJoe ( http://ezpzsolutions.net/ ). Go to plugins, add new, and type in EZPZ Backup and it should show up at the top. Install it and backup your theme/files.
Now go to WP Dashboard and in the Appearance section, click on Editor. The first page that opens is usually the stylesheet. Look in the right side column and find the sidebars.php file and click it.
Look in the sidebars.php file until you see "Secondary". It should be just like this:
'secondary' => array(
'name' => __('Secondary Widget Area',THEME_NS),
'id' => 'secondary-widget-area',
'description' => __("This sidebar is active only on a 3 column setup.", THEME_NS)
),
Beneath it, you should see 'top' and then 'top2': This code is the 'top2'.
'top2' => array(
'name' => __('Second Top Widget Area',THEME_NS),
'id' => 'second-top-widget-area',
'description' => __("This sidebar is displayed above the main content.", THEME_NS)
),
You copy the code I have above (i.e. top2) and paste it beneath the top2 code inside the sidebars.php file. Then simply change the number 2 into a 3. You need to also change the words 'second' into 'third' where ever the word "second is found inside the code. Like this:
'top3' => array(
'name' => __('Third Top Widget Area',THEME_NS),
'id' => 'third-top-widget-area',
'description' => __("This sidebar is displayed above the main content.", THEME_NS)
),
If you want to add a fourth area, repeat the process and be sure to change out the number 3 to a 4 and change out the word Third to Fourth. Like this:
'top4' => array(
'name' => __('Fourth Top Widget Area',THEME_NS),
'id' => 'fourth-top-widget-area',
'description' => __("This sidebar is displayed above the main content.", THEME_NS)
),
Click save/update to save your file. Then go back to Appearance, widgets, and you should see the new 3rd and 4th widget areas ready for you to add whatever you want to place there.
If you copy the code direct from here, you may have problems because sometimes code is alters. Create New Sidebar Space Above Content 'secondary' => array( 'name' => __('Secondary Widget Area',THEME_NS), 'id' => 'secondary-widget-area', 'description' => __("This sidebar is active only on a 3 column setup.", THEME_NS) ), 'top2' => array( 'name' => __('Second Top Widget Area',THEME_NS), 'id' => 'second-top-widget-area', 'description' => __("This sidebar is displayed above the main content.", THEME_NS) ), 'top3' => array( 'name' => __('Third Top Widget Area',THEME_NS), 'id' => 'third-top-widget-area', 'description' => __("This sidebar is displayed above the main content.", THEME_NS) ), 'top4' => array( 'name' => __('Fourth Top Widget Area',THEME_NS), 'id' => 'fourth-top-widget-area', 'description' => __("This sidebar is displayed above the main content.", THEME_NS) ),
|
| |
Caleb
|
PLEASE REMEMBER that if you copy the code from here, place it into an editor like Notepad++ and check the quotation marks, etc. Do NOT post the code from here direct into your sidebars.php file.
It would be nice if we could edit our own post..
|
| |
Kelley
|
Caleb,
Thanks for taking the time to put this together.
Kelley
|
| |
Caleb
|
Thanks Kelley!
|
| |
Ron
|
WooooHoooo !!! awesome post !!!!!!!
|
| |
HAFIEZ
|
I need help in creating these but I dont know what should I done exactly since my template codes are different from yours.
Also would like to clarify.
If I were to make those Create More Sidebar Space, does it means I can put any locations at any location of my web? Can I put contents or/and images below the header, right side, left side, middle side and footer of the web?
How do I go about setting the php languages for this?
I reallly need help but no one able to give me good advise yet.
Please look at my website www.adheights.com. Looking forward to your reply.
Thanks.
|
| |
Caleb
|
Hafiez,
If I am understanding you correctly you are not using Artisteer but you want to add new widget spaces to your Wordpress theme. Just so you know this tutorial only adds extra widget spaces to the locations above the stylesheet content (right below the header) and below the style sheet content but above the footer. Anyway, please go to your WP Dashboard, Appearance, and click on Editor. The styles.css file should open. Look to the right sidebar where your files are located and find the one that says sidebars.php. Copy that code and paste it on here so we can take a look at it.
|
| |
HAFIEZ
|
Hi,
First thanks for replying. Really hope you can help me mate.
Anyway, yes. I am not using Artisteer but I wanna add new widget spaces to my Wordpress theme.
Lastly, these are the codes from my sidebar.php:
<!-- sidebar -->
<div class="sideBar">
<div class="nav">
<div class="bFrameT"><i></i></div>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-widget-area') ) : ?>
<h3><span>Category</span></h3>
<ul>
<?php wp_list_categories('show_count=1&title_li='); ?>
</ul>
<h3><span>Archives</span></h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<h3><span>Meta</span></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
<?php } ?>
<?php endif; ?>
<div class="bFrameB"><i></i></div>
</div>
</div>
<!-- /sidebar -->
Please advise.
Million thanks once again mate.
|
| |
Caleb
|
Hafiez,
I'm sorry it took so long to get back with you. Two kids and work.. Anyway, try this as it works in non-Artisteer themes. Be sure to backup your site FIRST with a plugin like EZPZ One Click Backup by UncaJoe. It's free. Also, remember to not copy the code direct from here. Copy it and paste into a html/text editor like Notepad++. It's free too. Anyway, you have to register the widget first in the functions.php file. Make sure you change the name wherever you see my_hafiez_widge or my-hafiez-. Keep the _ where they are and the - where they are. Just change the name and make sure to not rename it something already in use.
if ( function_exists('register_sidebar') ){
register_sidebar(array(
'name' => 'my_hafiez_widge',
'before_widget' => '<div id="hafiez-hafiez-hafiez-widget">',
'after_widget' => '<!--- END Hafiez Widget --->'.'</div>',
'before_title' => '<!--- BEGIN Hafiez WidgetTitle --->',
'after_title' => '<!--- END Hafiez WidgetTitle --->',
));
}
Next, you need to add this code to your header.php file Change the name here to where you see my_hafiez_code. The name MUST match with what you changed the above code names to.
<?php /* Widgetized sidebar */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('my_hafiez_code') ) : ?><?php endif; ?>
Once you have done this, go back to Dashboard, Appearance Wdigets and you should see the new widget with the name you named it on the right hand column. In the end, you may have to play around where you place the header code to get it where you want it. In other words, you may have to move it to a different location in your header.php file until you are satisfied with its placement.
Anyway, hope this helps!
|
| |
HAFIEZ
|
Sorry for the late reply! Many thanks for ur help :D
|
| |
NoTaX
|
sry for bumping this old post...
Thx for your tut on adding the extra top widgets, but can you tell me how to set a different width for the 4 widgets.
TIA
|
| |
Caleb
|
The width is set dynamically, or should be. They worked well for me by being dynamically set based on the content in the space used. If you use all four widget spaces, they will each be dynamically set at 25% width. If you only use 3, it will be dynamically generated at 33% each, and so on. You could just repeat the process and add a total of 8, and with the two already there, dynamically they would be set at 10% width. Other than that and off the top of my head, you would need to set width in your css file.
|
| |
Angie cherubini
|
I did what you said to make a new space and it worked perfectly. Now, I would like to get a space that appears above the sidebar and widget areas so I can add an image rotator that spans the width of the template... how can I do this? Here is the site: http://66.147.240.177/~resolu11/
|
| |
|
|