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

of

Creating Dynamic Sidebars & Widgets in WordPress Slide 1 Creating Dynamic Sidebars & Widgets in WordPress Slide 2 Creating Dynamic Sidebars & Widgets in WordPress Slide 3 Creating Dynamic Sidebars & Widgets in WordPress Slide 4 Creating Dynamic Sidebars & Widgets in WordPress Slide 5 Creating Dynamic Sidebars & Widgets in WordPress Slide 6 Creating Dynamic Sidebars & Widgets in WordPress Slide 7 Creating Dynamic Sidebars & Widgets in WordPress Slide 8 Creating Dynamic Sidebars & Widgets in WordPress Slide 9 Creating Dynamic Sidebars & Widgets in WordPress Slide 10 Creating Dynamic Sidebars & Widgets in WordPress Slide 11 Creating Dynamic Sidebars & Widgets in WordPress Slide 12 Creating Dynamic Sidebars & Widgets in WordPress Slide 13 Creating Dynamic Sidebars & Widgets in WordPress Slide 14 Creating Dynamic Sidebars & Widgets in WordPress Slide 15 Creating Dynamic Sidebars & Widgets in WordPress Slide 16 Creating Dynamic Sidebars & Widgets in WordPress Slide 17 Creating Dynamic Sidebars & Widgets in WordPress Slide 18 Creating Dynamic Sidebars & Widgets in WordPress Slide 19 Creating Dynamic Sidebars & Widgets in WordPress Slide 20 Creating Dynamic Sidebars & Widgets in WordPress Slide 21
Upcoming SlideShare
Speeding Up WordPress sites
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Creating Dynamic Sidebars & Widgets in WordPress

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

4,077

On Slideshare

0

From embeds

0

Number of embeds

2,737

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×