SOLVED: How to add wrapper div around entire page content?

How To
1

I’m trying to use the new smooth scroll feature in motion.page, but it requires two wrapper divs to exist around the page content (i.e. wrapping everything except for the body element). Bricks doesn’ t seem to call the “wp_body_open” or “wp_footer” hooks, so the code snippet provided my the motion.page folks doesn’t work. Is there another way I can accomplish this?

add_action('wp_body_open', function() {
	echo '<div id="smooth-wrapper">';
	echo '<div id="smooth-content">';
});
add_action('wp_footer', function() {
	echo '</div>';
	echo '</div>';
});

…doesn’t work.

2

Use…

‘bricks_before_site_wrapper’ & ‘bricks_after_site_wrapper’

1 Like
3

Thanks, that totally works!

4

I am still looking to achieve this.

The code David provided inserts the wrapper around the entire content within the < body > tag. I just want it to wrap the < main > tag, meaning it should not wrap < header > or < footer >.
This is needed because the smooth scroll doesn’t work well with sticky/overlay headers and the footer.

Is there a hook to use to achieve this?

@ainom if you know, any help is appreciated.

5

No sorry. I don’t use the smooth scroll in motion.page anymore, I believe I never got it working perfectly. Now I use Lenis on all sites. Works great with motion.page.

1 Like
6

To just wrap the main, you’d do it as…

add_action('bricks_after_header', function() {
	echo '<div id="smooth-wrapper">';
	echo '<div id="smooth-content">';
});
add_action('bricks_before_footer', function() {
	echo '</div>';
	echo '</div>';
});

But I agree with ainom regarding Lenis, it doesn’t have the same issue with fixed elements like sticky headers like other smooth scrolling does.

1 Like
7

Yeap Lenis is much better and works great. The only problem I have is that when a div is full height and I mean full height menu that reveals when I click an element , I have a javascript to lock the scrollbar when it is full height but if I add Lenis it keeps scrolling.