Build Your Own Business Website header image

Lesson 11 – Create a Widget Ready Footer and Add Widgets

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Please note that this course has been replaced with the new “Sell Your Digital Products with WP eStore

In this video tutorial we will learn how to create a “Fat” widget ready footer. Again we’ll be demonstrating what makes Thesis the best overall theme for creating your own highly customized ecommerce website. Once we create this footer we will take it a step further and populate it with widgets that support our ecommerce website.

This eleventh lesson has 10 parts divided into 2 major segments. The first major segment includes parts 1 – 4, where we actually create the footer, create the widgetized areas, and provide the CSS styling to align them the way we wish. The second segment includes parts 5-10 where we install the plugins and configure the widgets that will populate the footer. Once installed we will learn how to place custom CSS in the individual widgets.

In this lesson you will:

Step 1 Register the Sidebars (Widget Ready Areas) – Watch the Video

  • Review the syntax
  • Register Sidebars
  • Register Elements
  • Test the code

Step 2 Build the Dynamic Sidebars (Widget Ready Areas) – Watch the Video

  • Review the syntax
  • Create the HTML structure
  • Insert the Thesis specific elements
  • Hook the function to the page

Add the CSS Styling to Align the Sidebars Side by Side – Watch the Video

  • Review the Structure in Firebug
  • Style the wrapper
  • Style the individual sidebars
  • Test the code

Create the Footer Below the Widget Areas – Watch the Video

  • Review the Structure in Firebug
  • Add the HTML structure
  • Include copyright and attribution
  • Remove Admin link and Thesis Attribution
  • Test in all browsers

Install and Configure the “Advanced Recent Posts” Plugin- Watch the Video

  • Find the plugin and install
  • Tour the plugin features
  • Compare to Killer Recent Posts widget
  • Configure
  • Test in all browsers

Install and Configure the “Widgets Reloaded” Plugin – Watch the Video

  • Introduction to the plugin
  • Pages widget options
  • Compare to WordPress pages widget
  • Review the PDF guide
  • Further explanation in the codex

Configure the Pages Widget – Watch the Video

  • Add the widget
  • Review the options
  • Find more detail about the options
  • Set options

Configure the Bookmarks Widget – Watch the Video

  • Understanding “Bookmarks” – they’re links
  • Look at existing links
  • Create a new link category
  • Place new links
  • Review the options
  • Configure the options
  • Other uses for links

Configure the Text Widget – Watch the Video

  • Create a “sandbox” page
  • Add the HTML structure
  • Add headings
  • Add list items
  • Add mailto
  • Add to widget

Create the CSS Styles for the Widget Areas – Watch the Video

  • Review the Structure in Firebug
  • Text alignment
  • Link color and behavior
  • Background color
  • Widget area height
  • Padding
  • Heading style
  • Fix links widget display

Create the CSS Styles for the Text Widget – Watch the Video

  • Review the Structure in Firebug
  • Text widget specific heading styles
  • Line spacing
  • Adjust overall height
  • Bottom footer text and link colors
  • Fix overflow

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