Build Your Own Business Website header image

Lesson 3 – Create the Footer and Sidebars

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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

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

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