With the upgrade of Genesis Framework to responsive design, there’s a particular id attribute on the web content that’s deprecated when you use HTML5. If you take a look at /genesis/lib/framework.php file from Genesis core, you will see that the id="content" markup is still included in the XHTML markup. However for HTML5, the ID attritube is no longer there.
genesis_markup( array(
'html5' => '<main %s>',
'xhtml' => '<div id="content" class="hfeed">',
'context' => 'content',
) );
This change creates a problem for some custom javascript to make Google AdSense responsive. The easiest thing to do is just to modify framework.php file to look like this:
genesis_markup( array(
'html5' => '<main id="content" %s>',
'xhtml' => '<div id="content" class="hfeed">',
'context' => 'content',
) );
But obviously this is the worst thing to do because any future updates on Genesis core will overwrite that modification. So we want to make the change on the Genesis child theme instead.
Fortunately Genesis markup is very easy to modify. We just need to apply filter within the context of any section we want to change. In this case, it’s the content and we just need to do this on the Genesis child theme functions.php file.
// Add id="content" attributes to <main> element
add_filter( 'genesis_attr_content', 'my_attr_content' );
function my_attr_content( $attr ) {
$attr['id'] .= 'content';
return $attr;
}
The flexibility of filter in Genesis Framework is not limited to what’s shown in this example. You can also create custom schema for anything on your site by using the same method.
