Lesson 4 – Using Custom Sidebars in Genesis

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
• 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
• Don’t forget all of the schema
• Add some margin

Question and Answer