Genesis HTML5 Child Starter Theme

Genesis HTML5 Child Theme
My starter theme for Genesis Framework utilizing Genesis’s new add_theme_support( ‘html5’ ); feature. It is meant to be a base to start building from, and it in itself is a work in progress. At the current state, this starter child theme should shave hours off development time when building custom child themes Genesis. It is being actively tested with what I know about 2.0, and should work well with it.

Uses add_theme_support( ‘html5’ ); To implement HTML5 – And More

Whats included?

style.css – Uses the most recent sample version from Studiopress (2.0-beta), with minor edits to delete some borders, make h1 and h2 font sizes smaller and change the link color. Also, #header and #footer tags are replaced with .site-header and .site-footer to conform with the changes adding HTML5 creates. All other elements that turned to classes in the new version have the old id included in the css. That should take care of any issues before Genesis 2.0 is launched.

page_landing.php – Landing page template, strips header, footer, widgets and forces full page layout.

page_blog.php – Blog page template with easy filtering on post meta and post info.

single.php – Single post template with easy filtering on post meta and post info.

page.php – Page template ready for customization.

front-page.php – Custom homepage template – Defaults to a general blog page, unless home widgets are activated.
Home widgets include:

  • Home Featured – Top section of homepage, full width
  • Home Featured Left – Left half under home featured
  • Home Featured Right – Right half under home featured
  • Home Middle 1 – The first “one-third” of the middle section under the home-featured section
  • Home Middle 2 – The second “one-third” of the middle section under the home-featured section
  • Home Middle 3 – The third “one-third” of the middle section under the home-featured section
  • Home Bottom – The last section of the homepage, full width

functions.php – Theme functions are split up into multiple files.

The main function.php file is located in the root folder of the child theme. It defines the child theme name, URL, and initiates the setup function. The setup function – named “gregr_theme_setup” – is responsible for including other important function files, as well as calling all actions & filers we wish to utilize.

With this file, you can comment in or out whichever features you would like to enable or disable. You can also add more actions or filters within this function.

  • Clean up the head
    • Removes RSD link
    • Removes Index rel link
    • Removes next link
    • Removes previous link
    • Removes links for adjacent posts
    • Removes WP version
  • Add to the head
    • Adds custom viewport tags
      • Note: This may be outdated when 2.0 comes. Genesis seems to have added an action of add_theme_support( ‘genesis-responsive-viewport’ );, which is included in the main “functions.php” file, but is commented out. Upon launch of 2.0, you may want to comment this(add_action( ‘genesis_meta’, ‘gregr_viewport_meta_tag’ );) out and remove the comment from add_theme_support( ‘genesis-responsive-viewport’ ); Up to you though and what you want to add to the head
    • Adds option to change favicon location
    • Adds custom scripts
      • HTML5 Shiv version 3.6
      • Note: This may also be was removed, as it looks like the guys at Studiopress added this in an IE 9 conditional statement in Genesis 2.0
      • Custom scripts.js for theme-specific JavaScript
    • Adds conditional wrapper for IE style.css
    • Removes version numbers from scripts
  • Adds HTML5 header, footer, nav, and aside elements to general markup
  • Genesis 2.0 Changes many tags and adds HTML5 header, footer, nav, and aside elements to general markup
  • Theme support for structural wraps
  • Easily remove/reposition nav menus
  • Easily remove or add custom site title, custom site description and/or custom post title
  • Reposition breadcrumbs
  • Adds custom footer creds text
  • Adds custom footer back to top text
  • Clean Up Genesis
    • Removes unused Genesis profile options
    • Removes Genesis layout options
    • Option to remove genesis admin menu
  • Easily add custom post types

    The lib folder
    Within the folder named “lib”, you will find all the includes files. Most importantly, is the file named “gregr_child_functions.php”.

    gregr_child_functions.php – This file holds all of the actual functions that are called out of the main “functions.php” file. This file is where you can alter the functions themselves.

    Genesis 2.0 HTML5 Compatible

    As mentioned, this sample child has been tested against versions 1.9+, and cross-refereed with Studiopress’s 2.0 child theme. I have taken into account all of the structural and css changes that I can detect at this point.

    This theme is to be used with 2.0-beta and 2.0 ONLY. There will always be minor changed/additions, so please subscribe to this post or the Genesis HTLM5 child starter theme on GitHub for updates.

    “gregr_” was used as a preface to all actions/functions specific to this sample theme, so you can easily do a search/replace to customize the code to match your project.

    View the code on Github here


  1. says

    I installed it and looked around. Very nice!!!! I didn’t give it a huge workout, but I like the new widget selection, and that’s a very intriguing set of functions, too, that I will have to keep in mind. I tested menus in the primary, secondary, and header widget spots, all looks excellent.

    Thanks for this helpful contribution! You’re ahead of the Genesis curve, as usual!

  2. Greg Reindel says

    Dave – Thanks for the feedback!!

    Finally decided to consolidate all the nonsense I go through when starting from a basic sample child, and after playing with the html5 function and examining they’re 2.0 sample, I got inspired!

    I’m going to do my best to keep this updated as often as possible with all the fun things Genesis can do.

    Any suggestions or improvement recommendations are appreciated!

  3. says

    Thanks for sharing your base theme. I was pointed in the right direction, to try out and use Genesis. Also in time with 2.0 coming out. Your base child theme is an amazing starting point, finding my way around and developing my own child theme.

  4. says

    wow.. thank you so much for this.. I’m pretty experienced with wordpress but not with genesis yet and I couldn’t figure out for the life of me how to get a child theme working.. I searched for a couple of hours before I came upon this post.. apparently google hasn’t quite mastered the universe yet. I truly hope you keep this updated and thanks again.

Leave a Reply