KEMBAR78
Creating Dynamic Sidebars & Widgets in WordPress | PPTX
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 widgetized
area 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 widgetized
area
• 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_instance
on 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

Creating Dynamic Sidebars & Widgets in WordPress

  • 1.
    Dynamic Sidebars andWidgets Jason Yingling Red8 Interactive
  • 2.
    What is asidebar? • 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 asidebar? • 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 awidget? • Bits of code that can be used in a widgetized area to add functionality to WordPress sites.
  • 5.
    Registering (Creating) aWidgetized 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 asingle 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’); • Actionhook 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 WidgetizedArea • 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_Widgetclass • 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.
  • 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.
  • 16.
    Creating a Formfor 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 Formfor 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.
  • 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

Editor's Notes

  • #4 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.
  • #7 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.
  • #9 Show Code
  • #10 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
  • #18 get_field_name and get_field_id look in the $instance to retrieve the form name and id tied to this widgets instance. http://codex.wordpress.org/Function_Reference/get_field_name