This presentation walks through registering sidebars (widgetized areas), using the areas in your theme, and creating custom widgets within WordPress.

1. Dynamic Sidebars and Widgets
Jason Yingling
Red8 Interactive

2. What is a sidebar?
• Sidebar can mean two things:
• An area to the side (but not always) of a post generally
containing information tangentially related to the main
content.
• Generally a themes sidebar.php

3. What is a sidebar?
• An area where widgets can be used within a theme.
Also known as a widgetized area.
• Created by using the register_sidebar() function
• Not strictly relegated to being used in sidebar.php.
Also commonly used in footers.

4. What is a widget?
• Bits of code that can be used in a widgetized
area to add functionality to WordPress sites.

5. Registering (Creating) a Widgetized Area
• Widgetized areas should be registered in the
theme as they are presentational. Generally in
functions.php.
• Widgetized area can be displayed in any template
file. Not tied to sidebar.php.
• register_sidebar($args) creates the widgetized
area
• add_action( ‘widgets_init’, $function) hooks into
WordPress to create a widgetized area when
WordPress initializes the widgets.

6. register_sidebar()
• Takes a single argument of an associative array of
parameters that set the options for the widget area.
• Wrap $args array and register_sidebar() in separate
function that can be called on ‘widgets_init’ hook

7. add_action(‘widgets_init’, ‘function_name’);
• Action hook in WordPress for connecting to the
widget initialization function
• Call previously defined function for registering a
sidebar as second parameter
• Allows WordPress to create the widget area in the
backend.

9. Displaying a Widgetized Area
• is_active_sidebar(‘widget_id’) – Checks to see if the
sidebar has any widgets activated. (optional)
• dynamic_sidebar(‘widget_id’) – Displays the
widgetized area and any widgets set inside it.
• Can be used within any template files.

10. Creating a Widget
• Custom widgets are created by a class that
extends the WP_Widget class.
• Widget is initiated by hooking
register_widget() into the ‘widgets_init’ action
hook

11. Extending the WP_Widget class
• By extending the WP_Widget class we can add
methods for our widget to use, as well as use
methods and properties present in the
WP_Widget class.

12. Constructing our Widget
• To construct our widget we use the parent
__construct function from the WP_Widget class
which takes 3 parameters
– ‘widget-id’ : The id / slug of the widget
– ‘Widget Name’ : The nice name to show on the
admin screen
– array() : An array of additional options

13. Constructing our widget

14. Displaying Widget Content
• To display the content of our widget we use
the widget() method
• widget() ‘echo’s a string wherever the widget
is placed on your site
• Takes two arguments:
– $args – Widget arguments
– $instance – Previously saved data in the database

15. Displaying Widget Content

16. Creating a Form for Editing Widget Content
• The form() method allows us to create HTML
form elements for storing data within the
widget
• Uses the $instance argument to store data for
the instance of the widget

17. Creating a Form for Editing Widget Content

18. Saving Widget Data
• To save the widget $instance we’ll use the
update() method
• Takes two arguments: $new_instance and
$old_instance
• $new_instance will contain the new values
entered in the widget’s form
• $old_instance will contain the previous values,
which are replaced with the $new_instance
on aving the form

19. Saving Widget Data

21. Registering the Widget
• Create a function to hold our
register_widget(‘Widget_Class’) function
• Hook in our newly created function into the
‘widgets_init’ action hook