Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating Dynamic Sidebars & Widgets in WordPress


Published on

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

Published in: Internet
  • Login to see the comments

  • Be the first to like this

Creating Dynamic Sidebars & Widgets in WordPress

  1. 1. Dynamic Sidebars and Widgets Jason Yingling Red8 Interactive
  2. 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. 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. 4. What is a widget? • Bits of code that can be used in a widgetized area to add functionality to WordPress sites.
  5. 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. 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. 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.
  8. 8. 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.
  9. 9. 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
  10. 10. 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.
  11. 11. 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
  12. 12. Constructing our widget
  13. 13. 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
  14. 14. Displaying Widget Content
  15. 15. 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
  16. 16. Creating a Form for Editing Widget Content
  17. 17. 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
  18. 18. Saving Widget Data
  19. 19. 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