Understanding WordPress Sidebars in Genesis
- What’s a sidebar?
- HTML of the typical WordPress sidebar
- wrapping div
- ul
- li for each widget
- HTML of the typical Genesis sidebar
- structural wrap – widget-area
- section – widget
- widget-wrap
- 2 Methods of creating sidebars
- Typical WordPress way – doesn’t work
- Genesis way
- Syntax has 2 parts
- register the sidebars
- call the sidebars – placed in HTML
Register Custom Sidebars in Genesis
- 2 Methods of registering the sidebars
- Simple
- Full
- Simple genesis_register_sidebar() syntax
- name
- id – see the list if dangerous ids
- description
- Full genesis_register_sidebar() syntax
- name
- id – see the list if dangerous ids
- before_widget
- after_widget
- before_title
- after_title
Insert Custom Sidebars in Genesis
- HTML Philosophy – retain Genesis HTML
- genesis_widget_area() syntax
- id of sidebar
- array of before & after
- before is the structural wrap
Example #1 Create a 2 column widgetized bottom footer
- Register the Sidebar
- genesis_register_sidebar()
- Call the sidebars
- Create the function that builds the sidebar
- Hook the sidebar to genesis_footer
- Adjust priority
- Add HTML to mimic the content
- HTML structural wrap
- wrapping div class = bottom-footer-widgets
- Individual wrapper – class = widget-area
- HTML structural wrap
- Add self clearing to the main wrapper
- Add one-half to the class
Example #2 – Create a Widgetized Content Area on the Front Page
- Register the Sidebar
- genesis_register_sidebar()
- Call the sidebar
- Create the function that builds the sidebar
- Hook the sidebar to genesis_after_header
- Adjust priority
- Add HTML to mimic the content
- HTML structural wrap
- div class = wrap
- main
- Before widget
- article – class = entry
- Before title
- header class = entry-header
- h1 class = entry-title
- HTML structural wrap
- Don’t forget all of the schema
- Add some margin