Using genesis_markup() with html5 in Genesis 2.0

Using genesis_markup() with html5 in Genesis 2.0

Last week, I wrote an article on Custom Microdata with Genesis 2.0.  Since the micro data is generated with the genesis_markup() function, I decided to create a follow up post on how genesis_markup() works and how it can be used to define element attributes.

About genesis_markup()

The genesis_markup() function is used to generate either html5 or xhtml markup depending if the current theme supports html5.  An array of arguments is the only parameter and will define the initial element markup.

html5 – The html5 markup that will be created if genesis html5 support is enabled.
xhtml – The xhtml markup that will be created if genesis html5 support is not enabled.
context – The current context or scope if the element to be generated.
echo – Either render the markup or return as a string.

For example, here is how Genesis uses genesis_markup() to build the footer.

The html5 markup is defined as is the fallback xhtml markup.  The html5 argument is actually a template with a defined string %s specifier.  The element attributes will be generated in place of the string specifier.  The context is set to ‘site-footer’.

genesis_markup()
genesis_markup()

It’s all about context

The context will be used to build the ‘genesis_attr_’ filter.  The filter will allow a developer to modify the associative attribute array.  In order for the filter the be applied, the current theme must have html5 enabled and a defined context.

For example, create an element opening with the context of ‘movie’.

With the new context, create a filter and callback to append the custom attributes.

These filters do not necessarily have to be used for SEO purposes.  It just creates an easy and repeatable way to add attributes to an element.

Default context filters in Genesis

Context Filter Schema
body genesis_attr_body http://schema.org/WebPage
site-header genesis_attr_site-header http://schema.org/WPHeader
site-title genesis_attr_site-title
site-description genesis_attr_site-description
nav-primary genesis_attr_nav-primary http://schema.org/SiteNavigationElement
nav-secondary genesis_attr_nav-secondary http://schema.org/SiteNavigationElement
content genesis_attr_content http://schema.org/Blog
http://schema.org/SearchResultsPage
entry genesis_attr_entry http://schema.org/BlogPosting
http://schema.org/CreativeWork
entry-image genesis_attr_entry-image
image-widget genesis_attr_entry-image-widget
entry-image-grid-loop genesis_attr_entry-image-grid-loop
entry-time genesis_attr_entry-time
entry-title genesis_attr_entry-title
entry-content genesis_attr_entry-content
entry-comments genesis_attr_entry-comments
comment genesis_attr_comment http://schema.org/UserComments
comment-author genesis_attr_comment-author http://schema.org/Person
author-box genesis_attr_author-box http://schema.org/Person
sidebar-primary genesis_attr_sidebar-primary http://schema.org/WPSideBar
sidebar-secondary genesis_attr_sidebar-secondary http://schema.org/WPSideBar
site-footer genesis_attr_site-footer http://schema.org/WPFooter

Genesis already provides some basic filters.  The default filters can be extended for additional custom attributes.  However this system is used, it is very flexible.

Published by

rfmeier

Product developer at WPEngine and runner from Hampshire, Illinois. I work with php a lot; Spending most of my time digging into source code to see how it all works. You can find me on Twitter @rfmeier.

16 thoughts on “Using genesis_markup() with html5 in Genesis 2.0”

  1. Hi:) I am trying to add some divs within the #inner div. I want to make the #inner div full-width, the new divs within them full-width as well, but with wraps inside each of the new divs so I can fix the width and center the contained content,

    Is this what I add to header.php to add a div named #top-section with a wrap (all within #inner?) (I am using the Genesis sample theme.)


    genesis_markup( array(
    'html5' => '',
    'xhtml' => '',
    'context' => 'site-inner',
    ) );
    genesis_structural_wrap( 'top-section' );

    Thanks!

  2. Thank you so much for this post !

    Its been a great help for my new review site 🙂

    I was wondering if there is an official list of context filters on the studiopress site?

  3. Just wanted to let you know that whenever I have any questions about schema and Genesis, I always come back to this article.

    Thanks for writing it!

  4. Hello

    Great article..

    Its a shame that the Genesis default schema is hardcoded without an easy way to switch off. It creates a lot of custom requirements for sites that don’t use the default

    Is there any way via functions to deactivate the genesis default schema, I would like to then add it back using html snippets instead as these easily allow the correct markup to be added

    Many Thanks

    1. Sam,

      I am not sure the exact way to remove it, but I would try asking the question on twitter with the #genesiswp has included. You will probably get an answer back.

  5. Hi Ryan

    I am trying to add the below scenario to a custom plugin forked from https://gist.github.com/rfmeier/5819442

    The plugin should include geodata. Please could you describe how this can be implemented from within the plugin. My limited coding knowledge has me going around in circles for days now.

    if( is_single( ’63’ ) ) {
    $attributes[‘itemtype’] = ‘http://schema.org/SportsActivityLocation’;
    $attributes[‘itemprop’] = ‘geo’;
    $attributes[‘itemprop’] = ‘latitude’ = ‘-33.0000’;
    $attributes[‘itemprop’] = ‘longitude’ = ‘18.0000’;
    }

    Regards,
    Dale

    1. Dale,

      Thank you for reading.

      Since ‘SportsActivityLocation’ inherits from ‘LocalBusiness’ which inherits from ‘Place’, we know ‘geo’ is a valid property of ‘SportsActivityLocation’ (You already figured this out). Properties are really treated as sub-elements of the parent, so the ‘geo’ property will be a sub element of ‘SportsActivityLocation’.

      Here is how the markup should look: https://gist.github.com/rfmeier/f74ea60a520a27abc410

      Personally, I would use the ‘genesis_attr_entry’ filter instead of the ‘genesis_attr_body’ filter and hook the ‘genesis_before_entry_content’ action to spit out the ‘geo’ content. It will probably require some trial and error to get it right using http://www.google.com/webmasters/tools/richsnippets tool.

Leave a Reply

Your email address will not be published. Required fields are marked *