Full width sections in WP Posts with Roots

1

I came across this article http://www.rignite.com/how-to-get-twitter-followers
I love the way they’ve got full width sections running throughout the article, and I wondered how they did it and whether it was possible in Roots?

In the past I’ve been able to achieve this in the Theme by closing the wrap and container and then creating a full width container before re-starting another fixed width wrap and container. It seems a bit of a hack. Is there a better way?

However, how do you achieve this within the post itself from the editor? Any thoughts? How would I achieve this with Roots?

2

I generally do this by altering the base.php file so that I start with a .container-fluid and then move my .containers into templates as needed. Then when I write posts I will uses shortcodes or extended classes to do my layouts, allowing me to use either container style I want. There are probably other methods but I hope that helps.

3

Why is it a hack? It comes down to understanding the Bootstrap classes. Also, the layout for Roots is not what you NEED to use, it’s a base, and a suggested base at that.

If I have multiple section that are full width. then there’s not much choice than to change .container to .container-fluid and then manage each .container further down for each full-width section. Just how it goes.

4

Thanks, that makes sense. I’d love to see some examples- do you have any to hand? You’ve got me thinking anyway. Do you register your own shortcodes to do this?

5

Thanks. Maybe “hack” was the wrong word, but I felt that my method was a bit of an ugly solution. I wondered if there was a more elegant way!

6

My solution that’s pretty user friendly is usually to use the Flexible Content custom field in ACF. Then, I have a “Page Builder” template that I select that lets me add as many regular “WYSIWYG” editors and “Features” as I want.

Then I’ll create a base-template-page-builder.php without the surrounding .container class and in template-page-builder.php I put my ACF/container markup in there. That keeps things pretty clean for me!

7

My solution is more or less the same, the Flexible Content field in ACF is incredibly … well flexible!

1 Like
8

My suggestion is to don’t be afraid to experiment. Roots is a starter theme, but that means it should really become whatever you create and whatever your current project needs. So if you have full-width sections, then by all means, change the base.php’s .container to .container-fluid and add a .container to any content area.

And for what it’s worth, I do something similar as @JulienMelissas and @markgray, I use page templates or Flexible Content in ACF to build different pages as necessary.

1 Like
9

I generally will use shortcodes, I have a plugin of some generic ones I use, but I’ve also moved to similar methods as described by @JulienMelissas @markgray and @kalenjohnson for my clients.

Off the top of my head our blog uses a fluid container base. We are able to decide the background color per post of the outer container, then the content is wrapped in the regular one. This is done a little different because its programatic but the concept is the same.

11

^ just be cautious of bloat, those page builder plugins can add some serious load time and stuff, but that said I guess the ACF ones can do it too.

12

Agreed @JulienMelissas, I tend to strip down and use a customized version of VC when we do use it. Also cache plugins that can minify the stuff it injects helps too. I don’t use ACF currently, but have looked at it, I would be interested to know if anyone has done some comparisons on the impact of either method, but that discussion is probably out of scope for this thread.