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.
Jeremy Scott says
If this is helpful:
On Genesis 2.5, the array index of ‘id’ does not exist. If you’re running on debug mode or a high-level of error reporting, you will get an error. To fix it, try this:
https://gist.github.com/jeremyescott/11bd2195320a8836586d03aebe073dd8
Will says
I’m not sure if this is a similar issue.
My problem is this: I have News Pro & would like the Left Border on the Sidebar to be 100% high. (Even StudioPress haven’t fixed this on the Demo page!)
Tried everything, can’t seem to do this with CSS.
So, I found a few JavaScript ideas to always make 1 Div 100% the height of the tallest one.
However, I tried in Console & I can’t seem to address the Main and get .offsetHeight from it, because it’s got a ClassName, not an ID.
-So I thought just adding an ID to the main class=”content” DIV would fix this. Then I could do var h = document.getElementById(“mainContentID”).offsetHeight
As Mike does here: http://www.mikedoesweb.com/2011/100-height-div-with-2-lines-of-code/
Does that sound logical?
Thanks!,
-Will
Aurélien Debord says
Hey, thank you mate. You help to spare a lot of time there đŸ™‚
platt says
Hello Aurélien,
My pleasure. Thanks for stopping by. đŸ™‚