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
- 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
- Understanding Background Images
- Add a Tiling Background Image to the Body of a Skin
- Using Different Background Images on Different Pages
- Add a Color to the Sidebar with a Tiling Image
- Using a Fixed Background Image in a Child Theme
- Using Multiple Background Images in the Same HTML Element
- Using Semi Transparent Background Colors Over a Background Image
- Adjusting Background Images for Mobile Devices
Lesson 2 – Customize Genesis Child Themes with Custom Fonts
- Understanding Fonts, Font Families and Font Stacks
- CSS2 Font Properties
- CSS2 Text Properties
- Using Text Align & Vertical Align for Positioning
- Using CSS3 Text Shadow to Enhance Your Design
- Introduction to Web Fonts
- Self Hosting Fonts on Your Server
- Using Google Fonts with Genesis 2
- Using Adobe Edge Fonts with Genesis 2
- Using TypeKit Fonts with Thesis 2.1
- Using Fonts from MyFonts.com with Genesis 2
- Using Font Awesome Icons with Genesis 2
- Create Social Media Links with Font Awesome Icones
- Add Icons to the menu with Font Awesome
Lesson 3 – Introduction to Customizing Genesis Using PHP
- How to Learn PHP for WordPress & Genesis
- How to Setup a Genesis Development Environment
- Introduction to Action Hooks in Genesis
- Example #1 – The “Hello World” of Action Hooks
- Example #2 – Change the Position of the Secondary Nav Menu
- Example #3 – Change the Genesis Footer
- Example #4 – Refine our custom footer attribution with automatic copyright date and site title
- Example #5 – Make a Sticky Top Menu in Genesis
- Introduction to WordPress Conditional Statements
- Example #6 – Remove the sticky nav menu on mobile devices
Lesson 4 – Using Custom Sidebars in Genesis
- Understanding WordPress Sidebars in Genesis
- Register Custom Sidebars in Genesis
- Insert Custom Sidebars in Genesis
- Example #1 Create a 2 Column Widgetized Bottom Footer
- Example #2 – Create a Widgetized Content Area on the Front Page
Lesson 5 – Creating Custom Page Templates in Genesis
- Fundamental Elements of Genesis Custom Templates
- Create a Custom Template with a Custom Header in Genesis
- Replace Hard Coded URLs with WordPress Constants
- Add a custom body class to a template
- Create a Custom Template with a Widgetized Header in Genesis
- Create a Custom Template with a Custom Sidebar in Genesis
- Force a Layout on a Custom Template in Genesis
- Create a Custom Landing Page Template
Lesson 6 – Using the Secondary WordPress Loops
- What is a WordPress Loop?
- Example #1 – Add a List of Posts from a Single Category
- Anatomy of a Secondary WordPress Loop
- Example #2 – Add Links to the List of Posts from a Single Category
- Example #3 – Create a Grid of Post Thumbnails in Genesis
- Example #4 – Display a Grid of Custom Posts on the Front Page
- Example #5 – Create a Grid of Portfolio Images
Lesson 7 – Creating Custom Child Theme Options
- Use Child Theme Options to Control the Display of the Front Page
- Add the Magazine Style Loops to the Front Page
- Anatomy of Genesis Child Theme Options
- Create the Genesis Child Theme Options Defaults
- Choose Genesis Options Sanitization Filters
- Create the Theme Options Metabox
- Create the Theme Options Form
- Configure the Front Page Template to Use the New Theme Options
- Use a Select Box in the Theme Options Form
- Dynamically Populate the Theme Options Select Box
- Create the Form for Multiple Theme Options
Lesson 8 – Build Templates with Custom Post Meta
- Introduction
- How to Create a Custom Child Theme from an Existing Child Theme
- Planning the Meta Boxes
- Add the Meta Box API to the Child Theme
- Create the First Meta Box
- Assign this metabox to the landing page template
- Create the Video Section
- Create the Testimonial Section
- Create the Benefits Section
- Create the Final Call to Action Section
- Basic Modification of the Video Landing Page template
- Using the Post Meta in the Template
- Add the Video Call to Action Section to the Template
- Add the Testimonial Section to the Template
- Add the Benefits Section to the Template
- Add the 2nd Call to action Section to the Template
- Add the Horizontal Optin to the Template