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 in...
What is a sidebar?
• An area where widgets can be used within a theme.
Also known as a widgetized area.
• Created by using...
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. ...
register_sidebar()
• Takes a single argument of an associative array of
parameters that set the options for the widget are...
add_action(‘widgets_init’, ‘function_name’);
• Action hook in WordPress for connecting to the
widget initialization functi...
Displaying a Widgetized Area
• is_active_sidebar(‘widget_id’) – Checks to see if the
sidebar has any widgets activated. (o...
Creating a Widget
• Custom widgets are created by a class that
extends the WP_Widget class.
• Widget is initiated by hooki...
Extending the WP_Widget class
• By extending the WP_Widget class we can add
methods for our widget to use, as well as use
...
Constructing our Widget
• To construct our widget we use the parent
__construct function from the WP_Widget class
which ta...
Constructing our widget
Displaying Widget Content
• To display the content of our widget we use
the widget() method
• widget() ‘echo’s a string wh...
Displaying Widget Content
Creating a Form for Editing Widget Content
• The form() method allows us to create HTML
form elements for storing data wit...
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
$...
Saving Widget Data
Registering the Widget
• Create a function to hold our
register_widget(‘Widget_Class’) function
• Hook in our newly create...
Creating Dynamic Sidebars & Widgets in WordPress
Creating Dynamic Sidebars & Widgets in WordPress
Upcoming SlideShare
Loading in …5
×

Creating Dynamic Sidebars & Widgets in WordPress

2,255 views

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,255
On SlideShare
0
From Embeds
0
Number of Embeds
1,593
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • Show Code
  • 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.

    http://codex.wordpress.org/Function_Reference/get_field_name
  • 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

    ×