HTML5 Genesis 1.9

Community Forums Forums General Discussion HTML5 Genesis 1.9

This topic is: not resolved

This topic contains 10 replies, has 4 voices, and was last updated by  Doug 2 years, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #24607


    I am currently building a site out in wordpress and after downloading genesis 1.9.1 and creating a child theme I see the doc type is not for html5. I peaked through the files and see there is the ability for genesis1.9/wordpress to pickup/include html5 doc type (not sure if it also has elements such as header, nav, footer, etc.).

    Does this only pickup if you use an html5 paid for child theme and not creating a custom theme? If you see below I have removed action genesis_doctype as I wanted it to mimic exactly the file I built using HTML5 Boilerplate and use their conditional ie statements, also I added to the genesis_meta the viewport and edge crome lines into the meta, and lastly I wanted to add version numbers to my css so I removed genesis_load_stylesheet and added my own in.

    My question is, did I do all this custom work but there is a simple solution in Genesis 1.9 settings to activate html5 (including the i.e. statements, meta and css I spoke about)? And most importantly I have created a html5_functions file under my lib with the code you see below, are there update concerns or will further releases of genesis be using these same actions? And will I be able to update seamlessly without any overwriting to the code below as I have clients that request constant updates to wordpress and themes.

    remove_action( ‘genesis_doctype’, ‘genesis_do_doctype’ );
    add_action( ‘genesis_doctype’, ‘html5_do_doctype’ );
    function html5_do_doctype() {
    <!DOCTYPE html>
    <!–[if lt IE 7]>      <html class=”no-js lt-ie9 lt-ie8 lt-ie7″> <![endif]–>
    <!–[if IE 7]>         <html class=”no-js lt-ie9 lt-ie8″> <![endif]–>
    <!–[if IE 8]>         <html class=”no-js lt-ie9″> <![endif]–>
    <!–[if gt IE 8]><!–> <html class=”no-js”> <!–<![endif]–>

    add_action( ‘genesis_meta’, ‘axual_meta_adds’, 1 ); /* #1 moves all code to top before the rest of the meta */
    function axual_meta_adds() {
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″ />

    remove_action( ‘genesis_meta’, ‘genesis_load_stylesheet’ );
    add_action( ‘genesis_meta’, ‘axual_stylesheets’ );
    function axual_stylesheets() {
    wp_enqueue_style( ‘normalize’, CHILD_URL . ‘/normalize.min.css’, false, ‘1.0’, ‘all’ ); // Inside a parent theme
    wp_enqueue_style( ‘axualstyle’, CHILD_URL . ‘/style.css’, false, ‘1.0’, ‘all’ ); // Inside a parent theme

    I also used the remove actions below to allow genesis to use the HTML5 tags of header, footer and subnav. My question is the same, does Genesis have an option to do this by default for a child theme? Will this be safe for future updates to the parent Genesis theme?


    remove_action(‘genesis_header’,’genesis_header_markup_open’, 5);
    add_action(‘genesis_header’,’html5_child_header_markup_open’, 5);
    function html5_child_header_markup_open() {
    echo ‘<header class=”header”>';
    genesis_structural_wrap( ‘header’, ‘open’ );

    remove_action(‘genesis_header’,’genesis_header_markup_close’, 15);
    add_action(‘genesis_header’,’html5_child_header_markup_close’, 15);
    function html5_child_header_markup_close() {
    genesis_structural_wrap( ‘header’, ‘close’ );
    echo ‘</header><!–end #header–>';

    remove_action( ‘genesis_footer’, ‘genesis_footer_markup_open’, 5 );
    add_action( ‘genesis_footer’, ‘html5_child_footer_markup_open’, 5 );
    function html5_child_footer_markup_open() {
    echo ‘<footer id=”footer”>';
    genesis_structural_wrap( ‘footer’, ‘open’ );

    remove_action( ‘genesis_footer’, ‘genesis_footer_markup_close’, 15 );
    add_action( ‘genesis_footer’, ‘html5_child_footer_markup_close’, 15 );
    function html5_child_footer_markup_close() {
    genesis_structural_wrap( ‘footer’, ‘close’ );
    echo ‘</footer><!– end #footer –>’ . “\n”;

    Thank You.

    • This topic was modified 2 years, 8 months ago by  devongroup. Reason: bold to callout important notes
    • This topic was modified 2 years, 8 months ago by  devongroup. Reason: bold to callout important notes


    Does anybody know why Genesis is not in html5? Searching google on this didn’t return any good answers. Thanks.



    The short version is we can’t just switch to HTML5 with existing sites. We are working very hard to make Genesis HTML5 but it requires thoughtful consideration to make sure the markup is correct the first time because we can’t really go back and change it after the fact without affecting sites using HTML5. Additionally we have to do extensive testing to make sure that it works for existing sites as well.



    Agreed a “switch” at this point in the game to HTML 5 must be a terribly difficult task especially when considering Studiopress/Genesis theme is trying to support past versions in the upcoming 2.0 version. Nick can you confirm the method above for removing actions and then adding back in the HTML5 actions will work seamlessly with 2.o? To dig deeper I have a separate HTML5_functions file, so if 2.0 is HTML5 compliant we should be able to remove these actions that create the Header and Footer (also aside) as 2.0 should include these and if we would like to change meta such as viewport and chomeframe settings ( I realize this may truly not be meta but it gives us something to hook onto) , as well as load our own specific stylesheets such as normalize.css we should be able to just add actions to genesis_meta and genesis_load_stylesheet. I hope I touched all bases here.

    Summary: This is a time of change in the web world, we are all in the same boat, and apparently this boat has not yet charted a specific course.



    I would be cautious about trying to implement HTML5 at this point. You can but you would want to test and fix everything in a testing site before trying to update a live site to Genesis 2.0.

    I have a site that I wanted to use some HTML5 tags on so I enabled HTML5 support. However, I have a testing environment so I can finish my HTML5 port when Genesis 2.0 comes out then push those edits when I update Genesis to a full HTML5 version.



    I have a local(testing) version running so when 2.0 comes out I will locally disable my HTML5_functions file and see what I can hook onto as far as css/html is concerned and take it from there. Is that the gist of what your comment was meaning?



    That should get you there. The biggest issue is the markup is going to change quite a bit so you may have to rebuild a good bit of your style sheet.



    Nick thanks this clears the fog. Rebuild a stylesheet ok with me, but this may be a premature question: Will the hooks (I suppose actions) be the same. I would hope Studiopress considers this a fair question knowing to update a framework anything can change ( especially due to a reliance on the wordpress core) and this is where the support of previous versions increases the difficulty.



    I haven’t actually looked into this much. I believe the big change is markup, but presumably there will be some changes that could affect hooks and filters, but this is all still being written so it is hard to say exactly what the final results will be.



    Understood and much appreciated. Hate to add more than needed to a forum post but for an ambiguous topic I have clear answers.



    I just wanted to add my gratitude to Nick and Devon for this important and necessary HTML5/StudioPress/Genesis/WordPress integration issue. Thank you.

    Doug Arnold/Pro Plus Member

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.