Understanding Sidebars – Watch the Video
-
What’s a sidebar?
-
HTML of the typical WordPress sidebar
- wrapping div
- ul
- li for each widget
-
HTML of the typical Thesis sidebar
- div id=”sidebars” – class=”sidebar”
- ul class=”sidebar_list”
- li class=”widget” + WP supplied values
-
2 Methods of creating sidebars
- Typical WordPress way
- Thesis way
-
Syntax has 2 parts
- register the sidebars
- call the sidebars – placed in HTML
Register the Sidebars – Watch the Video
-
2 Methods of registering the sidebars
- individual – register_sidebar()
- multiple – register_sidebars()
-
register_sidebar() syntax
- name
- id
- description
- before/after widget
- WP placeholders
- %1$s – id
- %2$s – class
- WP placeholders
- before/after title
-
register_sidebars() syntax
- number and arguments
- auto incrementing arguments
- %d
- $i – WordPress variable
-
The difference between the two
- missing a description
Call the Sidebars – Watch the Video
-
HTML Philosophy – retain Thesis HTML
-
Create a wrapper
-
Create the list
-
dynamic_sidebar()
- name or id
-
counter intuitive syntax
- place the sidebar
- if the sidebar doesn’t exist place the static content
-
Thesis static content
The Thesis Method – Watch the Video
-
The bible – http://diythemes.com/thesis/rtfm/widgetized-fat-footer-three-columns/
-
Modifications to the WordPress way
- No specified ID
- use thesis_default_widgets()
-
Where does it get the id?
- WP automatically creates – alphabetically.
-
What’s wrong with that?
Map out the Child Theme Footer – Watch the Video
-
6 widget areas
-
2 rows
-
The desired behavior
- 4 widgets shrink to their minimum and then stack
- 4 widgets collapse to 2 rows of 2
- 4 widgets collapse to 4 rows of 1
- 2 widgets shrink to their minimum and then stack
- 2 widgets collapse to 2 rows of 1
- 4 widgets shrink to their minimum and then stack
-
The required html
- Make pairs of widgets act together
- wrap 2 in a div
Register the Child Theme Sidebars – Watch the Video
-
Create the new file
- include the new file
-
Create the function
-
Register each sidebar
-
Typical method – add_actiion to widgets_init
-
Add a new function to our loop
- add_action
- add_function
-
Add the sidebars to widgets_init
Call the Child Theme Sidebars – Watch the Video
-
Create the new file
- use html in the name to indicate
- include the new file
-
Create the structural HTML
- row 1 left half
- row 1 right half
- row 2
- clearing div
- clearing div – 2nd
-
Create the function that builds the sidebar
- Wrapper
- List
- dynamic_sidebar()
- static content
-
Modularize the code
- The sidebar call needs to be unique
- Passing values to a function
-
Add a variable class to the bottom row
- Passing 2 values
-
Hook the function
Create the Structural CSS – Watch the Video
-
Header
- remove header padding
- header left – 380px
- header right – 572px
-
Footer
- remove footer padding
- footer left – 50%
- footer right – 50%
- footer bottom – 100%
- footer widget column – 50%
- footer bottom widget column – 50%