StudioPress Genesis Custom Widgets and Sidebars

Create a Custom Widget

There are a number of great posts regarding the development of WordPress widgets. I wouldn’t be adding a whole lot to the mix by writing my own. If you want to create a custom widget, check out these two posts: Justin Tadlock and Bill Erickson. Both of them provide excellent examples of how to create a WordPress widget.

Once you’ve created a widget you need to add it to a sidebar. You can use the widget in the default sidebar or create your own sidebar (really a widget area) and insert the sidebar wherever you want. Keep in mind that the term sidebar is a carryover from previous website design. A WordPress sidebar is just a widget area – it doesn’t have to be on the left or right side. A sidebar can appear anywhere. A whole page can be created using just sidebars. You can insert your sidebar by using a Genesis hook or inserting a call in your custom template.

Let’s start with the code to create a new sidebar.

Create a New WordPress Sidebar

As is typical with WordPress, the code to create a new sidebar is quite simple. Just add the following code to your functions.php file to add a new sidebar to any WordPress theme:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'newsidebar',
'before_widget' => '<div class="newsidebar-css">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}

This code would be added to your child theme functions.php file if you’re using a child theme. It is PHP code so make sure that it is inside an opening <?php and closing ?>. Here’s a description of the code above:

Line 1: checks to see if the WordPress version supports registering sidebars

Line 2: function to register a new sidebar using an array

Line 3: name of your sidebar; change newsidebar to whatever you want; first element in the array

Line 4; HTML to add before each widget; change it to whatever you want; can be empty (‘’); second element in the array

Line 5: HTML to add after each widget; change it to whatever you want; typically a closing tag for line 4; can be empty (‘’); third element in the array

Line 6: HTML to add before each widget title; change it to whatever you want; typically a heading tag; fourth element in the array

Line 7: HTML to add after each widget title; change it to whatever you want; typically a closing tag for line 6; fifth element in the array

Line 8: ends the arrary and the register_sidebar function

Line 9: ends the if statement

You can add as many sidebars as you want to your theme. Adding the above code to the functions.php file in your child theme makes the sidebar available in the Appearance => Widgets admin screen.

Next, let’s see how we call or insert the sidebar into a page or post.

Add Your Sidebar to a Custom Page Template

One option is to insert a call to your sidebar in a custom template. If you want to insert your new sidebar into a custom template, use the following code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(‘newsidebar’) ) : ?>
<?php endif; ?>

The code above does this:

Line 1: checks to see if the WordPress version supports dynamic sidebars. If it doesn’t, nothing is output. Checks to see if the dynamic sidebar with a name of “newsidebar” has a widget placed into it in the Appearance => Widgets admin page. If the sidebar is empty, nothing is ouput. If a widget has been added, the side bar is displayed or output to the page

Line 2: ends the if statement in Line 1

If you want some default output when the sidebar is empty, add it between the first and second lines of code above.

The other option is to use a Genesis hook to insert your sidebar. Let’s take a look at how you would use a hook.

Add Your Sidebar with a Genesis Hook

The second option for inserting a sidebar is to use a Genesis hook. We’ll include a check to make sure there’s something in the sidebar. So make sure you’ve created your widget and/or sidebar. Then place a default widget or your custom widget in the new sidebar.

If you want the sidebar to appear on every page, using a hook is a good way to go. By using the hook it will appear in the same location no matter what page or post is displayed. Let’s assume that you have some advertisements that you want to appear at the top of every page and post. Also, assume that the necessary code for the advertisement has been added to a text widget or your custom widget. Lastly, assume that the widget has been placed into the new sidebar. Here’s the code you could use to insert your sidebar using a Genesis hook:

add_action('genesis_before_content', 'insert_mysidebar');
function insert_mysidebar() {
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('newsidebar') );
}

Here’s a description of the code above:

Line 1: the add_action function will run the insert_mysidebar function wherever the genesis_before_content hook is located in the theme templates; think of it as copying Line 3 and pasting it wherever the genesis_before_content hook is located

Line 2: defines a function named insert_mysidebar

Line 3: if the WordPress version doesn’t support dynamic sidebars, do nothing. If there isn’t a dyanamic sidebar named newsidebar, do nothing. If there is a widget in the sidebar named newsidebar, display the sidebar or output the sidebar.

Line 4 closing bracket for the function

The code above would be added to your child theme functions.php file. All of the code above is PHP code and must be enclosed within an opening <?php and closing ?>.

Note: If all you need is a sidebar, you may want to look at Genesis Simple Sidebars plugin from StudioPress.

If you found this article helpfull, why not share it? Your friends will appreciate it!