This tutorial is for anyone who has a good grasp of how WordPress themes work,or is using a test installation and won’t mind messing it up.Not recommended for beginners!
What is a WordPress SIDEBAR, anyway? It’s only a Div or an Unordered List that contains PHP and HTML,right? Well then, a widget-ready “Sidebar” doesn’t have to be a long skinny rectangle on the side of your blog or website. It can be a banner with rotating images and that is what I am going to show you how to do in this post.But if any plugin provides widgets you can use these steps and your own ingenuity to stick them wherever you like.It’s definitely NOT limited to nextGen or the header.
My next post along this vein will demonstrate how to stick WP-Ecommerce widgets somewhere besides a sidebar using widgets not straight php code or the plugin’s hooks.Which is of course an option for anyone who is very comfortable hacking their templates and themes.The tweaking of WordPress seems to be limited only by the imagination.
The problem with Sidebars is you can only add Widgets to Sidebars.
But once we stop thinking in terms of Sidebars and start thinking in terms of Divs we can use our theme’s functions.php file to register these new widget ready Divs.Make a copy of the sidebar.php file from your theme and use an include to get the new widget ready Div into your theme exactly where you want it.
Standard code found in most functions.php to register a single sidebar.
(example one)
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));//ends this php statement
?>//closes php code
If your functions.php registers your sidebar this way:
<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
Replace it with the code in (example one).This is just easier.
One left out or misplaced curly bracket and your entire installation will stop working.
You must always copy all of your original theme’s files and save them so that in case something goes terribly wrong you can just delete the offending file(s) and upload the working ones.
Registering A Widget-Ready DIV(formerly known as a Sidebar)
After the last ));
and before the ?> in example one
Add This:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'BannerDiv',
'before_widget' => '', // Removes <li>
'after_widget' => '', // Removes </li>
'before_title' => '<h2 class="notitle">',
'after_title' => '</h2>',
));
Note that I have removed <li> and </li> because my “widget ready div” isn’t going to be using lists.
Copy this code:
<div id="randombanner">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('BannerDiv') ) : else : ?>
<?php endif; ?>
</div>
Paste this into a plain text file and save it as randombanner.php and upload it to your theme folder.Then upload the new functions.php. It’s a good idea to do it in this order.
In your theme’s style.css add the line .notitle{display:none} If you do not want your new widget ready DIV to have a title.But you can always change the code to read <h1 class="logo"></h1> if you want to have your site title in the header.
(example two)
'before_title' => '<h1 class="logo">',
'after_title' => '</h1>',
This might be complicated because the slideshow is flash and your logo might look odd.
You can even write the html for the div directly into the array.
(example three)
'before_widget' => '<div id="banner"', //
'after_widget' => '</div>', //
Setting up my new widgetized BannerDiv to display a slideshow from the plugin nextGen that shows only on one page on my site
Because I didn’t want this slideshow to show anywhere on my site but on a page I created just for this example I had more work to do. I made a new template called Examples (just a copy of page.php with the include for my widgetized div).I also made a copy of header.php called header2.php and used that in my Example template.But like I said I only did all of this so that the slideshow in the header would only show on one page and not my entire website.
Here is what is in randombanner.php :
<div id="randombanner">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('BannerDiv') ) : else : ?>
<?php endif; ?>
</div>
<div id="header">
<div id="nav">
<ul>
<li><h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1> </li>
<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<code><?php wp_list_pages(' sort_column=menu_order & depth=1 & title_li= ');?>
</ul>
</div>
</div>
<div id="wrap">
But for folks who want to add a nexGen slideshow to their headers for their whole site,it will be much more straightforward.Since most WordPress themes have a banner div called #header or #masthead or #banner, etc. you can paste the include for randombanner.php inside #banner Div(or whatever your div is called in your theme).
Example:
<div id="banner"><?php include (TEMPLATEPATH . "/randombanner.php"); ?></div>
randombanner.php can be configured to hold anything you want.You’ll have to be good with Css and also know how WP themes work.If you do not this is probably too much tutorial for you.
I activated the nextGen plugin and the widget in Plugins and then in Design>Widgets I selected my newly registered “BannerDiv” then added the widget for the slideshow.
You’ll want to configure the nextGen Slideshow widget to be the size of your banner images.
The image examples are 955 by 151.
Clarity
You don’t have to make a new template for this to work.
You can use these methods to add widget to any part of your website.
Use CSS to float several boxes side by side instead of tables
.floatingBoxes{ width:200px;height:auto;margin:10px;padding:10px;
float:left; }
If the containing div has layout there should not be any probs with one box dipping down or overlapping the other.I use this technique quite often and it works even in IE6(the beotch of all browsers still being used today).