step up to the sidebar: making the most of widget areas
DESCRIPTION
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)TRANSCRIPT
Presented byRindy Portfolio
www.tadpole.cc
www.tadpole.cc
About Tadpole
‣ Creative Collective
‣ Hourly Support
‣Website Development
‣Workshops & Training
‣ Hosting Plans
www.tadpole.cc
www.tadpole.cc
www.tadpole.cc
“...one of the most powerful
features of WordPress.”
- Justin Tadlock
www.tadpole.cc
Sidebars...‣ allow for flexible design
‣ as many sidebars as you want*
‣ a.k.a. widget areas
www.tadpole.cc
Widgets...‣ mean interoperability
‣ snippet of content
‣ drag & drop
www.tadpole.cc
DEMO
www.tadpole.cc
Types of Widgets
‣ Recent Posts
‣ Recent Contents
‣ Search
‣ Meta
‣ Text Widget
www.tadpole.cc
Shortcodes in the Text Widget
add_filter('widget_text','do_shortcode');
Add this code to functions.php
and now shortcodes will work in the text widget!
www.tadpole.cc
Widgets & Plugins
‣ Membership
‣ Events
‣ Social Media
‣ Advertising
‣ and lots more...
www.tadpole.cc
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
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
Create your own Widget Area
<?php get_header();
get_footer(); ?>
get_content(); get_sidebar();
www.tadpole.cc
Create your own Widget Area
header.php
footer.php
content.php sidebar.php
www.tadpole.cc
‣ Step 1: Define Sidebar in
functions.php.
‣ Step 2: Add sidebar to
theme location.
Create your own Widget Area
www.tadpole.cc
<?php
register_sidebar(array( 'name' => 'Primary Widget Area', 'id' => 'primary-widget-area', 'description' => 'Front Page Sidebar.' ), 'before_title' => '<h1>', 'after_title' => '</h1>' ));
?>
Step 1: functions.php
www.tadpole.cc
<?php if ( !dynamic_sidebar( 'primary-widget-area' )) : ?>
<!-- Content to display if no widgets are present -->
<?php else : dynamic_sidebar ( 'primary-widget-area' );
endif;
?>
Step 2: Add to theme file
www.tadpole.cc
Go Forth and get
your sidebar on!
www.tadpole.cc
Resources
‣ Justin Tadlock - Sidebars in Wordpress http://justintadlock.com/archives/2010/11/08/sidebars-in-wordpress/
‣ Jeremy Clarke - Widgetizing Everythinghttp://www.slideshare.net/jeremyclarke/widgetize-everything-building-smarter-wordpress-themes-with-widgets-and-templates-wordcamp-montreal-2010
www.tadpole.cc
Resources
‣ WordPress.org Codex http://codex.wordpress.org/Customizing_Your_Sidebar#New_ way_of_adding_sidebars
‣ Lorelle on WordPress - Exploring the WordPress Text Widgethttp://lorelle.wordpress.com/2011/08/23/wordpress-tips-exploring-the-wordpress-text-widget/
www.tadpole.cc
Q & A
www.tadpole.cc
Thanks!Rindy Portfolio
@portfolawww.tadpole.cc