Customize Genesis Like a Pro

These lessons build on the “Start Building Your Website Here” video tutorials but don’t assume that you have watched them.  If you already have Genesis activated on a WordPress site and are comfortable with the basics of WordPress then this is a great place to start.

Before you begin

1. Watch the Seminar Series – Introduction to HTML for WordPress and Genesis 2 Users – This will give you a good introduction to very basic HTML and CSS.

Lesson 1 – Customize Child Themes with Background Images & Color

1. Understanding Background Images
2. Add a Tiling Background Image to the Body of a Skin
3. Using Different Background Images on Different Pages
4. Add a Color to the Sidebar with a Tiling Image
5. Using a Fixed Background Image in a Child Theme
6. Using Multiple Background Images in the Same HTML Element
7. Using Semi Transparent Background Colors Over a Background Image
8. Adjusting Background Images for Mobile Devices

Lesson 2 – Customize Genesis Child Themes with Custom Fonts

1. Understanding Fonts, Font Families and Font Stacks
2. CSS2 Font Properties
3. CSS2 Text Properties
4. Using Text Align & Vertical Align for Positioning
5. Using CSS3 Text Shadow to Enhance Your Design
6. Introduction to Web Fonts
7. Self Hosting Fonts on Your Server
8. Using Google Fonts with Genesis 2
9. Using Adobe Edge Fonts with Genesis 2
10. Using TypeKit Fonts with Thesis 2.1
11. Using Fonts from MyFonts.com with Genesis 2
12. Using Font Awesome Icons with Genesis 2
13. Create Social Media Links with Font Awesome Icones
14. Add Icons to the menu with Font Awesome

Lesson 3 – Introduction to Customizing Genesis Using PHP

1. How to Learn PHP for WordPress & Genesis
2. How to Setup a Genesis Development Environment
3. Introduction to Action Hooks in Genesis
4. Example #1 – The “Hello World” of Action Hooks
5. Example #2 – Change the Position of the Secondary Nav Menu
6. Example #3 – Change the Genesis Footer
7. Example #4 – Refine our custom footer attribution with automatic copyright date and site title
8. Example #5 – Make a Sticky Top Menu in Genesis
9. Introduction to WordPress Conditional Statements
10. Example #6 – Remove the sticky nav menu on mobile devices

Lesson 4 – Using Custom Sidebars in Genesis

1. Understanding WordPress Sidebars in Genesis
2. Register Custom Sidebars in Genesis
3. Insert Custom Sidebars in Genesis
4. Example #1 Create a 2 Column Widgetized Bottom Footer
5. Example #2 – Create a Widgetized Content Area on the Front Page

Lesson 5 – Creating Custom Page Templates in Genesis

1. Fundamental Elements of Genesis Custom Templates
2. Create a Custom Template with a Custom Header in Genesis
3. Replace Hard Coded URLs with WordPress Constants
4. Add a custom body class to a template
5. Create a Custom Template with a Widgetized Header in Genesis
6. Create a Custom Template with a Custom Sidebar in Genesis
7. Force a Layout on a Custom Template in Genesis
8. Create a Custom Landing Page Template

Lesson 6 – Using the Secondary WordPress Loops

1. What is a WordPress Loop?
2. Example #1 – Add a List of Posts from a Single Category
3. Anatomy of a Secondary WordPress Loop
4. Example #2 – Add Links to the List of Posts from a Single Category
5. Example #3 – Create a Grid of Post Thumbnails in Genesis
6. Example #4 – Display a Grid of Custom Posts on the Front Page
7. Example #5 – Create a Grid of Portfolio Images

Lesson 7 – Creating Custom Child Theme Options

1. Use Child Theme Options to Control the Display of the Front Page
2. Add the Magazine Style Loops to the Front Page
3. Anatomy of Genesis Child Theme Options
4. Create the Genesis Child Theme Options Defaults
5. Choose Genesis Options Sanitization Filters
6. Create the Theme Options Metabox
7. Create the Theme Options Form
8. Configure the Front Page Template to Use the New Theme Options
9. Use a Select Box in the Theme Options Form
10. Dynamically Populate the Theme Options Select Box
11. Create the Form for Multiple Theme Options

Lesson 8 – Build Templates with Custom Post Meta

1. Introduction
2. How to Create a Custom Child Theme from an Existing Child Theme
3. Planning the Meta Boxes
4. Add the Meta Box API to the Child Theme
5. Create the First Meta Box
6. Assign this metabox to the landing page template
7. Create the Video Section
8. Create the Testimonial Section
9. Create the Benefits Section
10. Create the Final Call to Action Section
11. Basic Modification of the Video Landing Page template
12. Using the Post Meta in the Template
13. Add the Video Call to Action Section to the Template
14. Add the Testimonial Section to the Template
15. Add the Benefits Section to the Template
16. Add the 2nd Call to action Section to the Template
17. Add the Horizontal Optin to the Template