Want to Add Widgets to Thesis?

Difficulty Level: Intermediate

This tutorial assumes that you are familiar with PHP and the WordPress codebase. If you need help with this topic, please check out the WordPress Function Reference.

Widgets are customizable elements normally located in your template’s sidebar. These elements are simply built in extensions that make your sidebars more functional.

The Thesis Theme already supports widgets in its sidebars, as do most WordPress templates. But what if you want to add more?

I’ll walk you through the steps of adding custom widgets on your Thesis theme.

1. Determine the desired location of your Widget Area.

Thesis provides hooks that run all throughout the theme’s markup. It is easy to find this on the Thesis Hooks Manual. For this example, we will use the thesis_hook_before_footer hook to put in our custom widget area.

2. Edit custom_functions.php

In this step, we need to edit custom_functions.php. This will define the widget area we need.

Add this inside the said file:

add_action('thesis_hook_before_footer', 'widgetized_footer');
register_sidebar(array('name'=>'Footer'));


The first line defines the location of our widget area, this is a native wordpress function that accepts 2 parameters. The first parameter is the hook name, in this case, our desired location in the thesis markup. We provided a hook native to Thesis and not to wordpress.

The second parameter is the function that will hold our mark up. which will be explained later.

The second line registers a sidebar to WordPress. This will enable the user to customize this area through the Appearance > Widgets menu.

For more information on the parameters accepted by this method, please refer to this page. In our example, we just defined the name of that widget area which is “Footer”.

After understanding the first 2 lines of code, add this to the file again:

function widgetized_footer(){
?>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer')){ ?>
<li class="widget">Dynamic Widgets are not enabled</li>
<?php } ?>
</ul>
<?php
}

This is the 2nd parameter mentioned in the add_action method. This will define our markup which I will explain now.

You may notice that there is a snippet of PHP inside the method; this is the dynamic_sidebar function. This snippet checks negativity if the function exists and if a sidebar with the name “Footer” is registered. If the check fails, a fallback is displayed; which in this case is the markup within the if statement. If the check succeeds, the sidebar with the name “Footer” is loaded into the page.

Bonus: Customizing how the Widgets look

We look into the CSS of widgets. WordPress generates widgets with the class “widget”. you can customize how the widgets look through this selector.

Conclusion

You can now add widget areas to anywhere on the Thesis theme with this brand new knowledge you are wielding. Just modify the first parameter of the add_action method with the location you desire and you are good to go. I hope this short tutorial helped.