Lesson 3 – Create the Footer and Sidebars

Understanding 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
  • 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 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 static content

The Thesis Method – Watch the Video

• The bible – http://diythemes.com/thesis/rtfm/widgetized-fat-footer-three-columns/

• Modifications to the WordPress way

  • No specified ID
  • use thesis_default_widgets()

• Where does it get the id?

  • WP automatically creates – alphabetically.

• What’s wrong with that?

Map out the Child Theme Footer – Watch the Video

• 6 widget areas

• 2 rows

• The desired behavior

  • 4 widgets shrink to their minimum and then stack
    • 4 widgets collapse to 2 rows of 2
    • 4 widgets collapse to 4 rows of 1
  • 2 widgets shrink to their minimum and then stack
    • 2 widgets collapse to 2 rows of 1

• The required html

  • Make pairs of widgets act together
  • wrap 2 in a div

Register the Child Theme Sidebars – Watch the Video

• Create the new file

  • include the new file

• Create the function

• Register each sidebar

• Typical method – add_actiion to widgets_init

• Add a new function to our loop

  • add_action
  • add_function

• Add the sidebars to widgets_init

Call the Child Theme Sidebars – Watch the Video

• Create the new file

  • use html in the name to indicate
  • include the new file

• Create the structural HTML

  • row 1 left half
  • row 1 right half
  • row 2
    • clearing div
  • clearing div – 2nd

• Create the function that builds the sidebar

  • Wrapper
  • List
  • dynamic_sidebar()
  • static content

• Modularize the code

  • The sidebar call needs to be unique
  • Passing values to a function

• Add a variable class to the bottom row

  • Passing 2 values

• Hook the function

Create the Structural CSS – Watch the Video

• Header

  • remove header padding
  • header left – 380px
  • header right – 572px

• Footer

  • remove footer padding
  • footer left – 50%
  • footer right – 50%
  • footer bottom – 100%
  • footer widget column – 50%
  • footer bottom widget column – 50%

Question and Answer Session – Watch the Video