Add a containing div to a page template

[RobCubbon]

Hello, I would like to add a containing div to a page template.

So, say I have a page template called "front.php"

This gives me the first two body lines of HTML like so :

<body class="home page page-id-8 page-template page-template-front-php logged-in header-image header-full-width full-width-content">
<div id="wrap">

And I would like them to be :

<body class="home page page-id-8 page-template page-template-front-php logged-in header-image header-full-width full-width-content">
<div id="main-image">
<div id="wrap">

(and, obviously, close that main image div at the end before the closing body tag).

How do I do that?

---

Rob Cubbon

[David Chu]

Hi There, Rob!
That's a good question, and I had to think about it. Although I like to do nearly everything with hooks and filters... 🙂

For this, I think you'll want to copy header.php and footer.php from the /genesis folder into your child theme. Then open up those beauties, and in there you'll see where you could code in what you're describing. I believe that should take care of it.

Truthfully, most of the time I'd probably find a way to manage this purely through CSS without the extra HTML. Just as I enjoy hooks, I prefer not to play with any template files when I can avoid it. And there may be other structural hooks lying about that I haven't run across yet. Some super theme geek might chime in on that, or a question about that to tech support might bear fruit.

But your way is certainly a viable alternative, I'm quite sure. I think the only pitfall for that is if the next version of Genesis comes out with brand new structures for the header and footer, which is possible with the advent of HTML5 in Genesis. So you'll want to keep your eye on that.

Do let me know how you make out.

Best, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[RobCubbon]

Thank you, Flamenco, I'd forgotten about putting files from the framework into the child theme. Although, as you say, it's not entirely future proof, it works!!!

I'd forgotten to say why I wanted to do this: http://www.lynashworth.co.uk/ – it seems the only way to get this background image effect to work. But I may be wrong.

Yes, filters, hooks and CSS are the best ways to achieve what you want with Genesis ... if you know how!!! 🙂

All the best, Rob

---

Rob Cubbon

[David Chu]

Rob,
I'm glad that worked! It's true, sometimes one can only get the result one wants by changing markup. In fact, I suppose if that weren't true, then the web would be more boring, with everything having the exact same format.

In any case, if either of us were going to make the leap to Genesis 2, we'd do a backup anyway. 🙂 And many people, as we saw during the 1.9 update, didn't bother, and got spanked.

Best, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[RobCubbon]

Indeed!

---

Rob Cubbon

[Author]

Posts