Build Your Own Business Website header image

Lesson 6 – Create the Front Page Template

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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

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