Build Your Own Business Website header image

Lesson 4 – Using Custom Sidebars in Genesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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
  • 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

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment