I am working on a WordPress child theme where I do not have access to any markup other than the header.php. (I have access to child functions.php and the style.css)
The site has a body and a div#wrapper, but I would really like there to be 1 or 2 divs between those because I don't want to use body to create a column and currently, the only way to wrangle the whacky markup would be with the body. I would like to get a div that actually wraps the page contents in this case.
<html>
<body>
<section class='NEW-WRAPPING-ELEMENT'>
<div id='wrapper'>
...
</div>
<div id="footer'></div>
<div id="other'></div>
</section>
</body>
</html>
This markup probably worked just fine in most cases with a classic 960px absolutely positioned layout, but it's hard to work with when you want a malleable responsive layout.
I can use JavaScript and wrap them on page load, but it seems like it would be better to build it on the server - since I'm using PHP anyway. ALSO, you can see the flash of styling when the .master wrapper kicks in. No good!
I am removing p
tags from images and wrapping things like inline images with a figure
with preg_wrap
. Can I / should I - use a similar technique to 'wrap' my everything in the body with another div? I do not know regex at all. I hacked this together but no go so far. Thoughts???
function wrap_wrapper( $content ) {
// A regular expression of what to look for.
$pattern = '/<body>(.*?)<\/body>/i';
// What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
$replacement = '<section class="new-master">$1</section>';
return preg_replace( $pattern, $replacement, $content );
}
add_filter( 'the_content', 'wrap_wrapper' );
Here is a CodePen with full markup example of what I have to work with:
get_header()
,get_footer()
, andwp_footer()
.get_template_part()
calls could also be useful.header.php
, it doesn't make sense that you don't have access tofooter.php
. If they don't let you modify thefooter.php
of the main theme, then you can always copy thefooter.php
to the child theme and then modify as needed. There are so many possibilities, but you didn't provide enough details to answer them correctly.