Dynamic Sidebars and Widgets

Jason Yingling

Red8 Interactive

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

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.

What is a widget?

• Bits of code that can be used in a widgetizedarea to add functionality to WordPress sites.

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 widgetizedarea

• add_action( ‘widgets_init’, $function) hooks into WordPress to create a widgetized area when WordPress initializes the widgets.

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

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.

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.

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

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.

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

Constructing our widget

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

Displaying Widget Content

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

Creating a Form for Editing Widget Content

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_instanceon aving the form

Saving Widget Data

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