Build Your Own Business Website header image

Lesson 12 – Creating Custom Sidebars

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this Thesis theme video tutorial lesson of our Customize Thesis Like a Pro course you will learn how to create custom sidebars. We begin with an introduction to WordPress sidebars to give you a full understanding of what they are, ways to create them and how they are structured. Then we delve into how to register and call sidebars.

After that foundation is laid out, we show you four different examples of how to create custom sidebars in the Thesis theme. In these examples you learn not just about custom sidebars but also about each of the areas such as the Feature Box and Footer in which the sidebars are created. The lesson is concludes with you learning how to create a controlling function for all your sidebars.

Understanding WordPress 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 – see the list if dangerous ids
    • description
    • before/after widget
      • WP placeholders
        • %1$s – id
        • %2$s – class
    • 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 theme 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 theme static content

Example #1 – Widgetize the Feature Box – Watch the Video

  • Understanding the Feature Box

    • The feature box consists of:
      • Hook
      • Some predefined CSS
      • Some logic for placing it
    • Define its location & placement using Design Options
    • Hook what ever you want to it
  • Register the Sidebar

    • Create a function that registers all sidebars
    • register_sidebar()
    • add_action to widgets_init
  • Call the sidebar

    • Create the function that builds the sidebar
      • Wrapper
      • List
      • dynamic_sidebar()
      • static content
    • Hook the sidebar to thesis_hook_feature_box

Example #2 – Create a “Fat Footer” with 3 Widget Columns – Watch the Video

  • Map out the Footer HTML
    • Wrapping div – #footer
    • Wrapping div – byob-footer-widgets sidebar
    • Column divs
    • styling wrapper – needed for multi-column
    • List
    • Clearing div
  • Register the sidebars
  • Call the sidebars
  • Modularize the code
  • Hook the sidebars
  • Write the CSS
    • Rationale for the styling wrapper

Example #3- Create an “Alternate” Feature Box – Watch the Video

  • Map out the alternate feature box HTML
    • Wrapping div – #feature_box
    • Wrapping div – sidebar
    • List
  • Register the sidebar
  • Call the sidebar
  • Hook the sidebar to specific pages

Example #4 – Create 2 Column Attention Boxes – Watch the Video

  • Map out the Attention Box HTML
    • Wrapping div – #attention
    • Column divs
    • Styling wrapper
    • List
    • Clearing div
  • Register the sidebars
  • Call the sidebars
  • Hook the attention boxes
  • Write the CSS

Create a Controlling Function – Watch the Video

  • Rationale
  • Mapping out the conditions
  • Create helper functions
  • Stop processing once a condition is met
  • Hook to the appropriate hook

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