Lesson 6 – Create the Front Page Template
Facebook
LinkedIn
Google+
-
Header Area
-
Content Area
- no-sidebars style
- content
- front attention boxes
- heading has both background gradient and background image
- create a heading div
-
Footer Area
-
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
-
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
-
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
-
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
-
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
-
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
Facebook
LinkedIn
Google+