Content
Once you've had time to play around with the different column widths and breakpoints it's time to add content to each column. To do this you'll simply use any of the Gutenburg blocks available within WordPress.
Page Building
Hopefully by now you have a better understanding of the tools we like to use when building out a WordPress website and the Philosophy behind why we've chosen these tools. If you need a refresher take a look at our Build Philosophy.
This next step is all about putting those tools to use and building out some beautiful pages. Let's jump right in.
Bootstrap Blocks
Remember the Bootstrap Blocks plugin? If you still need to download it head to the download page or search for it from the plugins page from within WordPress. Install the plugin and ensure it matches up with the version of Bootstrap we're including in our theme files (currently version 5.2).
The Bootstrap Blocks plugin is a lightweight addition that simply adds a few Blocks to the Gutenburg editor. The three main blocks you'll end up using are the Container, Row and Column blocks. That's it. Paired with WordPress's Group Block, you can achieve just about any layout possible. Let's take a look at a basic example.
Let's say we need to build out a simple 3 column layout. We start by adding our blocks.
Group
To keep things nice and organized it's good practice to nest all of the major content sections on a page within a Group block. This gives you more control over how how the section will look and feel and keeps everything modular.
Container (Bootstrap)
Directly inside of our Group block we add a Container (Bootstrap) block. The container width and breakpoint settings can all be changed and overridden in you theme's style.css file. With Bootstrap, in order to create a Row with Columns it's required to nest them within a Container. The Container (Bootstrap) block also gives our website that "boxed" look and keeps the main content centered on the page.
Row (Bootstrap) & Columns
Directly inside of our Container we'll now add a Row (Bootstrap). This is the main wrapper required anytime we want to add columns to a page. You'll notice that once you add a Row it adds 2 columns by default.
If we want to adjust these columns we need to look over to the right sidebar and adjust the Row settings. You'll want to select the "Custom" option. This gives you full control over adding and removing columns and setting their breakpoints.
Columns
Once we've adjusted the Row options to our liking you can start setting up your columns. With the "Custom" option selected for the Row you can now add and remove columns at your will. To have a look at the column options first select a column then have a look at the right sidebar. You'll see a set of breakpoints and options to adjust the width of that column at each breakpoint.
HINT: Once we start nesting Groups, Container and Columns onto our page they can become difficult to select (an area that still needs improving with Gutenburg). However, WordPress does offer a small breadcrumb at the bottom of the window that tells you what block is currently selected, and, where that block falls within the page hierarchy. Use this breadcrumb to select the blocks you need.
ACF Blocks
There will come a time when the default Gutenburg editor blocks can't offer enough flexibility and customization. This is where we can us Advanced Custom Fields PRO.
ACF PRO gives us the ability to quickly build a custom block and add it to the list of available Gutenburg blocks we can add to the page.
It's always easiest to learn from an example, so let's say we need an FAQ accordion.
We already have Bootstrap included so it would make sense to take advantage of their Accordion Component.
ACF PRO also has a Repeater field which allows a user to add and remove a set of fields on the fly.
Lastly, ACF PRO allows us to build out Blocks.
Let's put these all together. We're going to need to setup our Custom Fields within WordPress but first we need to go ahead and create a new ACF Block within the theme. If you look back at our Theme Setup page you'll see the /blocks section. This gives you an overview of a sample block that has already been created for you within the theme. Feel free to modify this block directly or clone it to create a new block. With that in mind you can also utilize the official ACF documentation on Blocks.
Once you have your block configured head over to the WordPress admin and add your custom fields. If we're creating an FAQ accordion block we'll want to use the Repeater field. Inside of the Repeater field we would add a Question Text field along with an Answer Text Area field.
At the bottom of the window you'll update the Settings to Show this field group if Block, is equal to, the name of your block. This assigns the custom fields you just created to the custom block you have registered in your theme.
Last updated