How to Add More Widgets to Thesis or other WordPress themes

by thedj on December 2, 2012

Adding more widgets to Thesis or any other WordPress theme is quite easy, here’s the steps:

Sidebar Widgets

1. Insert  the following code into custom_functions.php

register_sidebar( array(
	'id'			=> 'footer-1',
	'name'			=> __( 'Footer 1', 'thesis' ),
	'description'		=> __( 'This is the first footer widget.', 'thesis' ),
	'before_title'		=>'<h3>',
	'after_title'		=>'</h3>',
) );

This code above tells WordPress to simply add new widget space.

2. Insert the following code again into custom_functions.php

// Footer Widget
function footer_widget_html() { ?>
   <div>
    <ul>
       <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar( 'footer-1' ) ){ ?><?php } ?>
    </ul>
   </div>
<?php }
add_action( 'thesis_hook_after_footer','footer_widget_html' );

Adding Footer Widgets to Thesis

Now here’s how I added a widgeted footer to Thesis that also can be administered from within the WordPress interface.

1. Create a three-column set of widgets in the footer add this code to custom-functions.php:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Left',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Middle',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Right',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

function my_widgetized_footer() { ?>
<div id="footer-widget-block">
	<div>
		<ul>
			<?php thesis_default_widget(3); ?>
		</ul>
	</div>

	<div>
		<ul>
			<?php thesis_default_widget(4); ?>
		</ul>
	</div>

	<div>
		<ul>
			<?php thesis_default_widget(5); ?>
		</ul>
	</div>
</div>
			<?php
	}
add_action('thesis_hook_footer','my_widgetized_footer','1');

The PHP above adds three new widget areas in the footer and gives them names within the interface: Footer Widgets Left, Footer Widgets Middle, and Footer Widgets Right.

2. You’ll want to add formatting to these footer widgets which can be started by adding this code to custom.css:

.custom #footer-widget-block { text-align:left; overflow:hidden; }
.custom .footer-widgets { width:33%; float:left; }
.custom .my-footer-one {}
.custom .my-footer-two {}
.custom .my-footer-three {}

That’s it and when you visit your WordPress Administration area, under Appearance, then Widgets, you should now see the areas you’ve created.

Previous post:

Next post: