WordPress: Adding your own widget positions
Want to create your own WordPress sidebar that is accessible in admin under Widgets? It’s easier to do than you may think. Here’s how.
There are three basic steps to the process:
- Tell WordPress about your sidebar and give it a name
- Add it to your template so that WordPress can find the sidebars in the place you want them to appear
- Go into Widgets in your WordPress admin and add widgets to your sidebar
Tell WordPress about your new sidebar and give it a name
You will need to edit the functions.php file for your theme. There are a few functions.php files in a WordPress installation, so make sure that you get the one in the root folder of your theme. For example if your theme is called geekz, it would be in /wp-content/themes/geekz/functions.php
Open the file and take a look at it – try to find some other blocks of code that look like this:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Navigation',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
The Navigation part will have the wording of whatever sidebar is part of your theme, and often the before_widget, after_widget, before_title and after_title will have html in them as well. These set the styling tags for the sidebar container and the defaults for the content within the sidebar container. If these are set you can style them in your stylesheet.
Under this block add a similar block of code for your custom sidebar widget. We’ll create one called top_sidebar with an h2 style on the headings of any widgets in the sidebar.
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
The div class=”widget” part tells WordPress to wrap the whole widget in a container called “widget” which you can then apply a styling to. If you haven’t used that class name anywhere else in your site, it could be used to give the widgets in that sidebar a different styling from your main sidebar.
If the text just prints out or you get a blank page, check the location of your code very carefully and see if you need to add <?php and ?> tags around the block of code.
Now place the sidebar in your template
The most common place you’ll want to place a sidebar is somewhere in the sidebar.php file of your theme. But you may want to put it somewhere else – wherever you decide to do, here’s the code that you need:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('top_sidebar') ) : ?>
<?php endif; ?>
Substitute out top_sidebar for the name of the sidebar that you created in the steps above; And that’s it – you can now go into your WordPress admin under Appearance > Widgets and your new sidebar will be there – ready to drag any WordPress widget in to. And because you didn’t edit any core files, it will still be there when you upgrade your version of WordPress.
Related posts:
