Creating Dynamic Sidebars & Widgets in WordPress

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.
  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 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.
  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