This is the fourth lesson in our Customize Genesis Like a Pro video tutorial course but it’s also the second lesson on how to customize the Genesis Theme using PHP. This lesson focuses on everything you need to know about using Custom Sidebars in Genesis. We start by giving you an understanding of what they are and talk about the 2 methods for registering them. Then we show how to insert them and finally, we go through the code for registering sidebars using 2 specific examples.
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
