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
• 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
• Widgetized area can be displayed in any template
file. Not tied to sidebar.php.
• register_sidebar($args) creates the widgetized
• add_action( ‘widgets_init’, $function) hooks into
WordPress to create a widgetized area when
WordPress initializes the widgets.
• 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
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
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
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
– array() : An array of additional options
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
16. Creating a Form for Editing Widget Content
• The form() method allows us to create HTML
form elements for storing data within the
• Uses the $instance argument to store data for
the instance of the widget
18. Saving Widget Data
• To save the widget $instance we’ll use the
• Takes two arguments: $new_instance and
• $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
21. Registering the Widget
• Create a function to hold our
• Hook in our newly created function into the
‘widgets_init’ action hook
The main thing to note here is we’ll be defining this as a widgetized area, but we use register_sidebar() to create the widgetized area.
Name : the name for the widget area that shows in the admin area
Description: A brief description of the widget area. Also shows in admin area.
Id: the “slug” version of the widget area. Used to pull widget area in code.
Class: CSS class that the widget area will take, ONLY IN ADMIN AREA
Before_widget and after_widget: Provide HTML markup to wrap each individual widget used in the widget area. %1$s and %2$s pull in ID and class data from the widget’s registration code.
Before_title and after_title: Provides the markup to wrap a Widget’s title.
Good idea to use is_active_sidebar within an if statement so we only return the dynamic sidebar if it has an active widget in it.
Show example of code within sidebar.php and index.php
get_field_name and get_field_id look in the $instance to retrieve the form name and id tied to this widgets instance.