An introduction to the powerful tools that are WordPress widget areas. In this presentation, we'll cover the basics of how widgets and widget areas work within WordPress themes, including: Intro to widget areas What kinds of content are appropriate for the widget areas What widgets can help accomplish what you need Widgets you may not know about Managing widgets when changing themes Plugins that come with widgets Creating your own widget areas (basic intro)

1. Presented by
Rindy Portfolio
www.tadpole.cc

2. About Tadpole
‣ Creative Collective
‣ Hourly Support
‣ Website Development
‣ Workshops & Training
‣ Hosting Plans
www.tadpole.cc

3. www.tadpole.cc
www.tadpole.cc

4. “...one of the most powerful
features of WordPress.”
- Justin Tadlock
www.tadpole.cc

5. Sidebars...
‣ allow for flexible design
‣ as many sidebars as you want*
‣ a.k.a. widget areas
www.tadpole.cc

6. Widgets...
‣ mean interoperability
‣ snippet of content
‣ drag & drop
www.tadpole.cc

7. DEMO
www.tadpole.cc

8. Types of Widgets
‣ Recent Posts
‣ Recent Contents
‣ Search
‣ Meta
‣ Text Widget
www.tadpole.cc

9. Shortcodes in the Text Widget
Add this code to functions.php
add_filter('widget_text','do_shortcode');
and now shortcodes will work in the text widget!
www.tadpole.cc

10. Widgets & Plugins
‣ Membership
‣ Events
‣ Social Media
‣ Advertising
‣ and lots more...
www.tadpole.cc

11. Widgets & Plugins
‣ Display widgets
http://wordpress.org/extend/plugins/display-widgets/
‣ Taxonomy Widget
http://wordpress.org/extend/plugins/taxonomy-widget/
‣ Really Simple Gallery Widget
http://wordpress.org/extend/plugins/really-simple-
gallery-widget/
www.tadpole.cc

12. Widget Areas in Themes
http://wordpress.org/extend/themes/spine/
http://wordpress.org/extend/themes/pinboard/
http://wordpress.org/extend/themes/leaf/
www.tadpole.cc

13. Create your own Widget Area
<?php get_header();
get_content(); get_sidebar();
get_footer(); ?>
www.tadpole.cc

14. Create your own Widget Area
header.php
content.php sidebar.php
footer.php
www.tadpole.cc

15. Create your own Widget Area
‣ Step 1: Define Sidebar in
functions.php.
‣ Step 2: Add sidebar to
theme location.
www.tadpole.cc

16. Step 1: functions.php
<?php
register_sidebar(array(
'name' => 'Primary Widget Area',
'id' => 'primary-widget-area',
'description' => 'Front Page Sidebar.' ),
'before_title' => '<h1>',
'after_title' => '</h1>'
));
?>
www.tadpole.cc

17. Step 2: Add to theme file
<?php if ( !dynamic_sidebar( 'primary-widget-area' )) : ?>
<!-- Content to display if no widgets are present -->
<?php else : dynamic_sidebar ( 'primary-widget-area' );
endif;
?>
www.tadpole.cc

18. Go Forth and get
your sidebar on!
www.tadpole.cc

19. Resources
‣ Justin Tadlock - Sidebars in Wordpress
http://justintadlock.com/archives/2010/11/08/sidebars-in-
wordpress/
‣ Jeremy Clarke - Widgetizing Everything
http://www.slideshare.net/jeremyclarke/widgetize-everything-
building-smarter-wordpress-themes-with-widgets-and-
templates-wordcamp-montreal-2010
www.tadpole.cc

20. Resources
‣ WordPress.org Codex
http://codex.wordpress.org/Customizing_Your_Sidebar#New_
way_of_adding_sidebars
‣ Lorelle on WordPress - Exploring the
WordPress Text Widget
http://lorelle.wordpress.com/2011/08/23/wordpress-tips-
exploring-the-wordpress-text-widget/
www.tadpole.cc

21. Q&A
www.tadpole.cc

22. Thanks!
Rindy Portfolio
@portfola
www.tadpole.cc
www.tadpole.cc