Creating Dynamic Sidebars & Widgets in WordPress

Jason Yingling
Jason YinglingDeveloper at Red8 Interactive
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 information tangentially related to the main
content.
• Generally a themes sidebar.php
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.
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. 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.
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
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.
Creating Dynamic Sidebars & Widgets in WordPress
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.
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
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.
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
Constructing our widget
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
Displaying Widget Content
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
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
$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
Saving Widget Data
Creating Dynamic Sidebars & Widgets in WordPress
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
1 of 21

Recommended

Launching a WordPress Site 101 (Cincinnati WordPress, August 2015) by
Launching a WordPress Site 101 (Cincinnati WordPress, August 2015)Launching a WordPress Site 101 (Cincinnati WordPress, August 2015)
Launching a WordPress Site 101 (Cincinnati WordPress, August 2015)Andrew Duthie
604 views13 slides
Archiving in eZ Publish: What to do with all your content by
Archiving in eZ Publish: What to do with all your contentArchiving in eZ Publish: What to do with all your content
Archiving in eZ Publish: What to do with all your contentPeter Keung
1.2K views12 slides
How To Use Host-Named Site Collections by
How To Use Host-Named Site CollectionsHow To Use Host-Named Site Collections
How To Use Host-Named Site CollectionsAndré Vala
142 views17 slides
Multi tenant CMSes using php by
Multi tenant CMSes using phpMulti tenant CMSes using php
Multi tenant CMSes using phpkae-verens
3.2K views14 slides
Installing and Setting Up WordPress by
Installing and Setting Up WordPressInstalling and Setting Up WordPress
Installing and Setting Up WordPressZero Point Development
206 views24 slides
Best Practices for Building WordPress Applications by
Best Practices for Building WordPress ApplicationsBest Practices for Building WordPress Applications
Best Practices for Building WordPress ApplicationsTaylor Lovett
6.1K views50 slides

More Related Content

What's hot

Presentation on Instant page speed optimization by
Presentation on Instant page speed optimizationPresentation on Instant page speed optimization
Presentation on Instant page speed optimizationSanjeev Kumar Jaiswal
5.6K views17 slides
AEM (CQ) Dispatcher Security and CDN+Browser Caching by
AEM (CQ) Dispatcher Security and CDN+Browser CachingAEM (CQ) Dispatcher Security and CDN+Browser Caching
AEM (CQ) Dispatcher Security and CDN+Browser CachingAndrew Khoury
26.1K views24 slides
AEM (CQ) Dispatcher Caching Webinar 2013 by
AEM (CQ) Dispatcher Caching Webinar 2013AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013Andrew Khoury
25.2K views66 slides
Fluxible by
FluxibleFluxible
FluxibleTaylor Lovett
6.5K views32 slides
CS-Cart Advanced Backup Management by
CS-Cart Advanced Backup ManagementCS-Cart Advanced Backup Management
CS-Cart Advanced Backup ManagementWebkul Software Pvt. Ltd.
43 views17 slides
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus) by
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)Cliff Seal
6.3K views16 slides

What's hot(20)

AEM (CQ) Dispatcher Security and CDN+Browser Caching by Andrew Khoury
AEM (CQ) Dispatcher Security and CDN+Browser CachingAEM (CQ) Dispatcher Security and CDN+Browser Caching
AEM (CQ) Dispatcher Security and CDN+Browser Caching
Andrew Khoury26.1K views
AEM (CQ) Dispatcher Caching Webinar 2013 by Andrew Khoury
AEM (CQ) Dispatcher Caching Webinar 2013AEM (CQ) Dispatcher Caching Webinar 2013
AEM (CQ) Dispatcher Caching Webinar 2013
Andrew Khoury25.2K views
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus) by Cliff Seal
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)
Introducing WordPress Multitenancy (Wordcamp Vegas/Orlando 2015/WPCampus)
Cliff Seal6.3K views
Drupal Multi-Site Setup by ylynfatt
Drupal Multi-Site SetupDrupal Multi-Site Setup
Drupal Multi-Site Setup
ylynfatt7.9K views
Using multi-tenant WordPress to simplify development by coderaaron
Using multi-tenant WordPress to simplify developmentUsing multi-tenant WordPress to simplify development
Using multi-tenant WordPress to simplify development
coderaaron1.6K views
Introdcution to Adobe CQ by Rest West
Introdcution to Adobe CQIntrodcution to Adobe CQ
Introdcution to Adobe CQ
Rest West2.3K views
Get Started in Professional WordPress Design & Development by Cliff Seal
Get Started in Professional WordPress Design & DevelopmentGet Started in Professional WordPress Design & Development
Get Started in Professional WordPress Design & Development
Cliff Seal3.2K views
WordPress theme development from scratch : ICT MeetUp 2013 Nepal by Chandra Prakash Thapa
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
Chandra Prakash Thapa18.4K views
CIRCUIT 2015 - Monitoring AEM by ICF CIRCUIT
CIRCUIT 2015 - Monitoring AEMCIRCUIT 2015 - Monitoring AEM
CIRCUIT 2015 - Monitoring AEM
ICF CIRCUIT3.4K views
WordPress Theme Development: Part 2 by Josh Lee
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
Josh Lee649 views
AEM - A Collection of developer friendly tools by Ashokkumar T A
AEM - A Collection of developer friendly toolsAEM - A Collection of developer friendly tools
AEM - A Collection of developer friendly tools
Ashokkumar T A1.7K views

Viewers also liked

Speeding Up WordPress sites by
Speeding Up WordPress sitesSpeeding Up WordPress sites
Speeding Up WordPress sitesJason Yingling
5.2K views15 slides
(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015 by
(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015
(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015Lucas Lima
8.1K views24 slides
Ithemes presentation by
Ithemes presentationIthemes presentation
Ithemes presentationJason Yingling
13.5K views38 slides
WordPress Custom Post Types by
WordPress Custom Post TypesWordPress Custom Post Types
WordPress Custom Post TypesNile Flores
10.9K views29 slides
Doing Things the WordPress Way by
Doing Things the WordPress WayDoing Things the WordPress Way
Doing Things the WordPress WayMatt Wiebe
3.9K views54 slides
Managing_WordPress_Projects_wcstl 2015_Lucas_Lima by
Managing_WordPress_Projects_wcstl 2015_Lucas_LimaManaging_WordPress_Projects_wcstl 2015_Lucas_Lima
Managing_WordPress_Projects_wcstl 2015_Lucas_LimaLucas Lima
3K views22 slides

Viewers also liked(20)

Speeding Up WordPress sites by Jason Yingling
Speeding Up WordPress sitesSpeeding Up WordPress sites
Speeding Up WordPress sites
Jason Yingling5.2K views
(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015 by Lucas Lima
(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015
(( Lucas lima )) Managing WordPress Projects - STL Meetup August 2015
Lucas Lima8.1K views
WordPress Custom Post Types by Nile Flores
WordPress Custom Post TypesWordPress Custom Post Types
WordPress Custom Post Types
Nile Flores10.9K views
Doing Things the WordPress Way by Matt Wiebe
Doing Things the WordPress WayDoing Things the WordPress Way
Doing Things the WordPress Way
Matt Wiebe3.9K views
Managing_WordPress_Projects_wcstl 2015_Lucas_Lima by Lucas Lima
Managing_WordPress_Projects_wcstl 2015_Lucas_LimaManaging_WordPress_Projects_wcstl 2015_Lucas_Lima
Managing_WordPress_Projects_wcstl 2015_Lucas_Lima
Lucas Lima3K views
Wordpress as a Backend by Andrew Duthie
Wordpress as a BackendWordpress as a Backend
Wordpress as a Backend
Andrew Duthie1.8K views
Getting to Know Underscores by Jason Yingling
Getting to Know Underscores Getting to Know Underscores
Getting to Know Underscores
Jason Yingling1.6K views
Teresa Lane - Content Modeling - WordCamp St. Louis 2016 by Teresa Lane
Teresa Lane - Content Modeling - WordCamp St. Louis 2016Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Teresa Lane1.6K views
Building a Simple Project Plan for WordPress Projects by Lucas Lima
Building a Simple Project Plan for WordPress ProjectsBuilding a Simple Project Plan for WordPress Projects
Building a Simple Project Plan for WordPress Projects
Lucas Lima2.7K views
SEO – Technik, Struktur und Inhalt im Einklang by TANNER AG
SEO – Technik, Struktur und Inhalt im EinklangSEO – Technik, Struktur und Inhalt im Einklang
SEO – Technik, Struktur und Inhalt im Einklang
TANNER AG905 views
Lady Blogger 2015 Conference by Will Hanke
Lady Blogger 2015 ConferenceLady Blogger 2015 Conference
Lady Blogger 2015 Conference
Will Hanke426 views
Performics ces recap_deck by Performics
Performics ces recap_deckPerformics ces recap_deck
Performics ces recap_deck
Performics1.6K views
Performics CES Recap Deck by Performics
Performics CES Recap DeckPerformics CES Recap Deck
Performics CES Recap Deck
Performics1.2K views
Talk WordCamp Porto 2013 by Vasco Leiria
Talk WordCamp Porto 2013 Talk WordCamp Porto 2013
Talk WordCamp Porto 2013
Vasco Leiria690 views
WordCamp St. Louis 2014 WordPress for beginners by christoph trappe by Christoph Trappe
WordCamp St. Louis 2014 WordPress for beginners by christoph trappeWordCamp St. Louis 2014 WordPress for beginners by christoph trappe
WordCamp St. Louis 2014 WordPress for beginners by christoph trappe
Christoph Trappe3.3K views
Protect Your WordPress Website - Setting Up IThemes Security by Red8 Interactive
Protect Your WordPress Website - Setting Up IThemes SecurityProtect Your WordPress Website - Setting Up IThemes Security
Protect Your WordPress Website - Setting Up IThemes Security
Red8 Interactive1.1K views
Passwords, Attakcks, and Security, oh my! by Michele Butcher
Passwords, Attakcks, and Security, oh my!Passwords, Attakcks, and Security, oh my!
Passwords, Attakcks, and Security, oh my!
Michele Butcher3.7K views

Similar to Creating Dynamic Sidebars & Widgets in WordPress

WordPress Theme Workshop: Sidebars by
WordPress Theme Workshop: SidebarsWordPress Theme Workshop: Sidebars
WordPress Theme Workshop: SidebarsDavid Bisset
48 views9 slides
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ... by
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...SPTechCon
1.5K views31 slides
(ATS4-DEV08) Building Widgets for the Symyx Notebook Home Page by
(ATS4-DEV08) Building Widgets for the Symyx Notebook Home Page(ATS4-DEV08) Building Widgets for the Symyx Notebook Home Page
(ATS4-DEV08) Building Widgets for the Symyx Notebook Home PageBIOVIA
850 views22 slides
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec... by
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...SPTechCon
6.1K views32 slides
Writing your own WordPress themes and plugins by
Writing your own WordPress themes and pluginsWriting your own WordPress themes and plugins
Writing your own WordPress themes and pluginsStephanie Wells
841 views15 slides
Google web toolkit web conference presenation by
Google web toolkit web conference presenationGoogle web toolkit web conference presenation
Google web toolkit web conference presenationStephen Erdman
827 views107 slides

Similar to Creating Dynamic Sidebars & Widgets in WordPress(20)

WordPress Theme Workshop: Sidebars by David Bisset
WordPress Theme Workshop: SidebarsWordPress Theme Workshop: Sidebars
WordPress Theme Workshop: Sidebars
David Bisset48 views
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ... by SPTechCon
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
SPTechCon1.5K views
(ATS4-DEV08) Building Widgets for the Symyx Notebook Home Page by BIOVIA
(ATS4-DEV08) Building Widgets for the Symyx Notebook Home Page(ATS4-DEV08) Building Widgets for the Symyx Notebook Home Page
(ATS4-DEV08) Building Widgets for the Symyx Notebook Home Page
BIOVIA850 views
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec... by SPTechCon
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
SPTechCon6.1K views
Writing your own WordPress themes and plugins by Stephanie Wells
Writing your own WordPress themes and pluginsWriting your own WordPress themes and plugins
Writing your own WordPress themes and plugins
Stephanie Wells841 views
Google web toolkit web conference presenation by Stephen Erdman
Google web toolkit web conference presenationGoogle web toolkit web conference presenation
Google web toolkit web conference presenation
Stephen Erdman827 views
Wordpress Widgets type by hiren soni
Wordpress Widgets typeWordpress Widgets type
Wordpress Widgets type
hiren soni45 views
SoftShake 2013 - Vaadin componentization by Nicolas Frankel
SoftShake 2013 - Vaadin componentizationSoftShake 2013 - Vaadin componentization
SoftShake 2013 - Vaadin componentization
Nicolas Frankel1.5K views
Getting started with WordPress development by Steve Mortiboy
Getting started with WordPress developmentGetting started with WordPress development
Getting started with WordPress development
Steve Mortiboy1.3K views
Parallelminds.web partdemo by ManishaChothe
Parallelminds.web partdemoParallelminds.web partdemo
Parallelminds.web partdemo
ManishaChothe322 views
WordPress Theme Workshop: Widgets by David Bisset
WordPress Theme Workshop: WidgetsWordPress Theme Workshop: Widgets
WordPress Theme Workshop: Widgets
David Bisset48 views
WordPress Developers Israel Meetup #1 by Yoav Farhi
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
Yoav Farhi2.5K views
16 asp.net session23 by Vivek chan
16 asp.net session2316 asp.net session23
16 asp.net session23
Vivek chan75 views
Android layouts course-in-mumbai by vibrantuser
Android layouts course-in-mumbaiAndroid layouts course-in-mumbai
Android layouts course-in-mumbai
vibrantuser122 views
Rotating Banner in SharePoint with a DataView Webpart by Echo Schmidt
Rotating Banner in SharePoint with a DataView WebpartRotating Banner in SharePoint with a DataView Webpart
Rotating Banner in SharePoint with a DataView Webpart
Echo Schmidt10.4K views
WordPress-like plugins for Next.js - Sanket Sahu by Kumar Sanket
WordPress-like plugins for Next.js - Sanket SahuWordPress-like plugins for Next.js - Sanket Sahu
WordPress-like plugins for Next.js - Sanket Sahu
Kumar Sanket74 views

More from Jason Yingling

WordPress Security Best Practices by
WordPress Security Best PracticesWordPress Security Best Practices
WordPress Security Best PracticesJason Yingling
3.8K views13 slides
Installing WP-CLI locally by
Installing WP-CLI locallyInstalling WP-CLI locally
Installing WP-CLI locallyJason Yingling
104 views11 slides
Getting Started with Gutenberg Development by
Getting Started with Gutenberg DevelopmentGetting Started with Gutenberg Development
Getting Started with Gutenberg DevelopmentJason Yingling
396 views55 slides
Plugin development by
Plugin developmentPlugin development
Plugin developmentJason Yingling
104 views11 slides
Introducing CSS Grid by
Introducing CSS GridIntroducing CSS Grid
Introducing CSS GridJason Yingling
2.5K views27 slides
Customizing the WordPress Customizer by
Customizing the WordPress CustomizerCustomizing the WordPress Customizer
Customizing the WordPress CustomizerJason Yingling
202 views20 slides

More from Jason Yingling(11)

WordPress Security Best Practices by Jason Yingling
WordPress Security Best PracticesWordPress Security Best Practices
WordPress Security Best Practices
Jason Yingling3.8K views
Getting Started with Gutenberg Development by Jason Yingling
Getting Started with Gutenberg DevelopmentGetting Started with Gutenberg Development
Getting Started with Gutenberg Development
Jason Yingling396 views
Customizing the WordPress Customizer by Jason Yingling
Customizing the WordPress CustomizerCustomizing the WordPress Customizer
Customizing the WordPress Customizer
Jason Yingling202 views
Battling Google PageSpeed Insights by Jason Yingling
Battling Google PageSpeed InsightsBattling Google PageSpeed Insights
Battling Google PageSpeed Insights
Jason Yingling543 views
Putting the Develop in Development by Jason Yingling
Putting the Develop in Development Putting the Develop in Development
Putting the Develop in Development
Jason Yingling328 views
WordPress Template hierarchy by Jason Yingling
WordPress Template hierarchyWordPress Template hierarchy
WordPress Template hierarchy
Jason Yingling669 views
Building Flexible Sites with Advanced Custom Fields by Jason Yingling
Building Flexible Sites with Advanced Custom FieldsBuilding Flexible Sites with Advanced Custom Fields
Building Flexible Sites with Advanced Custom Fields
Jason Yingling435 views

Recently uploaded

PORTFOLIO 1 (Bret Michael Pepito).pdf by
PORTFOLIO 1 (Bret Michael Pepito).pdfPORTFOLIO 1 (Bret Michael Pepito).pdf
PORTFOLIO 1 (Bret Michael Pepito).pdfbrejess0410
7 views6 slides
zotabet.pdf by
zotabet.pdfzotabet.pdf
zotabet.pdfzotabetcasino
6 views1 slide
OMS: Diretrizes para um controle da promoção comercial dos ditos substitutos ... by
OMS: Diretrizes para um controle da promoção comercial dos ditos substitutos ...OMS: Diretrizes para um controle da promoção comercial dos ditos substitutos ...
OMS: Diretrizes para um controle da promoção comercial dos ditos substitutos ...Prof. Marcus Renato de Carvalho
88 views24 slides
information by
informationinformation
informationkhelgishekhar
7 views4 slides
childcare.pdf by
childcare.pdfchildcare.pdf
childcare.pdffatma alnaqbi
14 views4 slides
Serverless cloud architecture patterns by
Serverless cloud architecture patternsServerless cloud architecture patterns
Serverless cloud architecture patternsJimmy Dahlqvist
17 views52 slides

Recently uploaded(20)

PORTFOLIO 1 (Bret Michael Pepito).pdf by brejess0410
PORTFOLIO 1 (Bret Michael Pepito).pdfPORTFOLIO 1 (Bret Michael Pepito).pdf
PORTFOLIO 1 (Bret Michael Pepito).pdf
brejess04107 views
Serverless cloud architecture patterns by Jimmy Dahlqvist
Serverless cloud architecture patternsServerless cloud architecture patterns
Serverless cloud architecture patterns
Jimmy Dahlqvist17 views
IGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdf by RIPE NCC
IGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdfIGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdf
IGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdf
RIPE NCC15 views
Opportunities for Youth in IG - Alena Muravska RIPE NCC.pdf by RIPE NCC
Opportunities for Youth in IG - Alena Muravska RIPE NCC.pdfOpportunities for Youth in IG - Alena Muravska RIPE NCC.pdf
Opportunities for Youth in IG - Alena Muravska RIPE NCC.pdf
RIPE NCC9 views
Building trust in our information ecosystem: who do we trust in an emergency by Tina Purnat
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergency
Tina Purnat85 views
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲 by Infosec train
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲
Infosec train7 views
AI Powered event-driven translation bot by Jimmy Dahlqvist
AI Powered event-driven translation botAI Powered event-driven translation bot
AI Powered event-driven translation bot
Jimmy Dahlqvist16 views
Existing documentaries (1).docx by MollyBrown86
Existing documentaries (1).docxExisting documentaries (1).docx
Existing documentaries (1).docx
MollyBrown8613 views
UiPath Document Understanding_Day 3.pptx by UiPathCommunity
UiPath Document Understanding_Day 3.pptxUiPath Document Understanding_Day 3.pptx
UiPath Document Understanding_Day 3.pptx
UiPathCommunity95 views
google forms survey (1).pptx by MollyBrown86
google forms survey (1).pptxgoogle forms survey (1).pptx
google forms survey (1).pptx
MollyBrown8614 views

Creating Dynamic Sidebars & Widgets in WordPress

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

Editor's Notes

  1. 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.
  2. 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.
  3. Show Code
  4. 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
  5. 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