Lesson 6 – Create the Front Page Template

Map Out the Front Page – Watch the Video

• Header Area

  • header
  • front feature box
    • slider
    • widget area

• Content Area

  • no-sidebars style
  • content
  • front attention boxes
    • heading has both background gradient and background image
    • create a heading div

• Footer Area

Setup the Front Page Sidebars – Watch the Video

• Register the sidebars

  • add code to existing init function
  • parameters

• Create the html for the home feature box

• Create the html for the front page attention boxes

  • Note the heading div

Setup the Front Page Controller – Watch the Video

• Using WordPress Conditional Tags

  • What they do
  • What they return
  • Various types of conditional tags
    • post/page/view types
    • taxonomies
    • conditions
  • Syntax
    • Sometimes take parameters
    • Sometimes doesn’t

• Create the function that adds the sidebars to the front page

  • Create a new file
  • Choosing the WordPress hook
  • Add the sidebar functions to the appropriate hook

Using Thesis Filters – Watch the Video

• What is a filter?

  • something you can capture and modify
  • You can add to or subtract from
  • Can act as a switch

• How does a filter work?

  • Passes a value to the function
  • Modify the value
  • Return the new modified value

• thesis_show_sidebars filter

  • Acts like a switch
  • Valid values are true and false
  • Filter passes the default value
  • Simply replaces the content of the filter with the value

• Create a function to hide the sidebar on the front page

• thesis_body_classes filter

  • Value is an array of classes
  • Thesis adds to the array
  • Passes the array
  • Add an element to the array
  • Pass the result

• Create the function that adds the front-page body class

Provide Support for the Orbit Slider – Watch the Video

• Orbit slider requirements

  • theme supports post thumbnails
  • image size needs to be set
  • slider needs to be added.

• Understanding WordPress featured images

  • add_theme_support();
  • add_image_size();
    • name
    • size
    • crop mode
      • false or nothing – proportional crop
      • true – hard crop

• Add the image size

• Provide conditional support

  • Do this if the plugin is installed
  • if(class_exists());
  • Add the function to our controller

• Add a class to the html to allow custom styling

Create Front Page CSS – Watch the Video

• Text styles

  • font color
  • link color
  • headline

• Layout

  • home sidebars wrapper padding
  • widget columns
  • left most widget

• Widget Styles

  • heading background
    • get the colors from photoshop
    • create the gradient
  • heading
  • h5
  • submit button
  • widget padding

Make it Responsive – Watch the Video

• max-width 1024

  • remove padding
  • set width
  • center

• max-width 800

  • set width
  • add margin to lower widget and center

• max-width 500

  • set width
  • add margin to stacked widgets

• Make the menu responsive

  • menu
    • remove the float
    • align center
  • memu li
    • remove float
    • display inline block