Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Genesis is designed to be used and customized with child themes. While the typical Genesis user may choose to modify an existing child theme this has the disadvantage of preventing them from upgrading that child theme in the future.

Web design professionals and savvy DIY website builders are better off learning how to create their own child themes from scratch. In this seminar you will learn the basics of child theme development with Genesis 2.0.

Part 1 – Introduction

Part 2 – Create a bare bones child theme

  1. Primary files
    • screenshot.png – 880×660
    • style.css
    • functions.php
  2. Setup style.css
    • Typical WordPress child theme system
    • Genesis child theme system
  3. Upload and activate
  4. Copy CSS & test
  5. Why does it look funny?
  6. Add an images folder

Part 3 – Initial setup of child theme functions file

  1. Include the Genesis functions
  2. Add html support
  3. Look at the html layout
  4. Add some widgets
  5. Insure responsiveness

Part 4 – Add some widgets to the footer

  1. Add footer widgets

Part 5 – Understanding WordPress templates in Genesis

  1. Templates in WordPress
    • Templates & template parts
    • Typical templates
      • Page
      • Single
      • Front page/Home
      • Archive
      • 404
      • Custom templates
    • Lots of template parts
      • header
      • content
      • sidebar
      • footer
      • comments
  2. Templates in Genesis
    • Template parts
      • header
      • sidebar
      • sidebar-alt
      • footer
      • comments
    • Full templates
      • Index
      • Single
      • Page
      • Custom templates
        • Page archive
        • Page blog
      • 404
  3. Note the difference between WordPress templates and Genesis templates

Part 6 – Create a custom front page template

  1. Naming conventions
  2. Create the template file
  3. Set the layout for the front page
    • Understanding filters
      • Act like a switch
      • Modify some sort of content
      • Changes, sets or affects some content
    • syntax
      • add_filter
      • filer name
      • function name
    • genesis_pre_get_option_site_layout filter
    • layout function – __genesis_return_full_width_content

Part 7 – Add the custom body class to the front page

  1. What’s a body class?
  2. The problem
    • WordPress terminology
      • Home is always the blog posts page
      • Front page refers to either the blog posts page or the static front page
    • Genesis philosophy
      • Ignores reading settings
      • Home means your home page
      • Blog page means your posts page
    • Conclusion – we’ll drop the Genesis system
  3. WordPress body_class filter
    • filters an array of class names
    • function syntax
      • function name
      • variable name
      • add an array element
      • return variable
    • filter syntax
      • add filter
      • filter name
      • function name
  4. Unset inappropriate array elements
    • Simple array
    • Array elements referenced by their position
    • Starting with 0

Part 8 – Add a feature box to the front page template

  1. Understanding hooks in Genesis
  2. Install the plugin
  3. Create a simple function & add it to a hook
  4. Add the feature box html to the template
    • Create the full width html element
    • Create the wrap

Part 9 – Widgetize the feature box

  1. WordPress widget area system
    • Terminology
      • sidebar
      • widget
    • 2 steps
      • Register the sidebar
      • Place the dynamic sidebar
        • this involves wrapping it all in html
  2. Genesis widget area system is simpler than WordPress
    • 2 Steps –
      • register the sidebar
      • add the widget area to the template
  3. Register the sidebar
  4. Add the widget area to the feature box

Part 10 – Add attention boxes to the front page template

  1. Register 3 sidebars
  2. Create a function that places the sidebars
  3. Hook the function
  4. Add html structure and wrap
  5. Add some structural CSS
    • Genesis structural CSS
      • column widths
      • margins
      • first
    • Custom CSS
      • min-width
      • padding

Part 11 – Implementing genesis_markup and genesis_structural_wraps

  1. Why use genesis_markup?
  2. genesis_markup syntax
  3. Why use genesis_structural_wraps?
  4. genesis_structural_wrap syntax
0 Comments… add one
0 comments… add one

Leave a Comment