I'm going to show you how to add a directory to your site using Oxygen Builder.
Why add a directory to your site?
To be blunt, one big advantage of adding a directory to your website is monetization. You can charge people or companies for a spot in your directory. This helps drive traffic to their website, FB page, or drive audiences to their business in general. They also have a valuable backlink.
Another advantage of having a directory is that you’ll be building your authority in a particular niche. By curating a directory that will bring value to your niche community, you’ll be establishing yourself as the expert in that niche.
So that you won't get lost as we go along...
Here’s a summary of the steps:
- Create a custom post type using the Custom Post Types UI plugin.
- Create a new Custom Field Group with the Advanced Custom Fields plugin, and add your own custom fields.
- Set the custom fields to show when creating a new post type (under the one you just created for your directory).
- Make the new post types to input data for your directory.
- Create a new template for your directory in Oxygen Builder.
First, we create custom post types.
Introducing… CPT UI.
CPT UI or Custom Post Types UI is a plugin that we’ll use together with ACF and Oxygen Builder.
If you have a WordPress website, ‘Page’ and ‘Posts’ on the dashboard are post types. A custom post type plugin lets you create another post type. You’ll be able to see it from the dashboard and add to it.
For the sake of this article, we’ll be creating a directory of contractors as an example.
After you download CPT UI, just go to the dashboard, find it on the left panel. When you hover over it, click ‘Add/Edit Post Types’.
I created a new post type for contractors, so there’s ‘Contractors’ on my dashboard panel.
Creating Custom Fields
After creating a custom post type, we proceed to making the custom fields. Once you’ve downloaded ACF, it will appear as ‘Custom Fields’ on the dashboard left-hand panel. Hover over it, then click ‘Add New’.
Custom fields are grouped together, so the first thing you’ll do is to name a Custom Field Group before you can start adding the actual custom fields.
To create a custom field, name the ‘Field Label’. When you click on the text box for ‘Field Name’, it’s automatically put in. And then, select what ‘Field Type’ it is from the dropdown menu.
Some options for the field type are:
...and more.
Here is my full list of custom fields for my contractor directory…
Now this next step is very important… Don’t forget to select the custom post type that you just created, so that these custom fields will appear when you’re editing those post types.
Add New Post Types
Now the post types I’ll be making will be under ‘Contractors’. So go back to the dashboard, hover over ‘Contractors’ on the panel, and click ‘Add New’.
Again, going by our contractor directory, the name of the new post type is going to be the name of the contractor company.
Note: All companies and details I used here are NOT real businesses. I simply made them up for the sake of this tutorial.
You can add content with the Gutenberg blocks, but for my directory, I’ll just be needing the input from my custom fields. Scroll down to the bottom and now you’ll see all of the custom fields we created earlier.
Once you’ve filled them out, publish them immediately. You’ll need at least one to make an Oxygen template with. I added 2 more post types just so we’ll have more previews later on.
Make a Template with Oxygen Builder
Next, you’ll want to make a template layout to display the data from the custom fields. This template will be applied to all post types of the same kind – both existing and new post types in the future.
We go back to the dashboard again and go to Oxygen Templates. When you click ‘Add New’, you’ll be taken to the editor…
Below, select to inherit the ‘Main’ template, so that the page will have the main header and footer of your website. Unless you don’t want this, of course ignore or select the template that has your desired header and footer.
Again, make sure to check the post type that this template will be applied to.
How to Insert Custom Fields Data to Oxygen Builder
If you’re familiar with the Oxygen Builder interface, add first a section and a text. The elements that you add to the section will actually depend on what field type your custom fields are. Obviously, if you have an image field type, insert an image element.
When you’ve inserted the text, double-click on it to select all, then click ‘Insert Data’.
A pop-up will appear… Select ‘Advanced Custom Fields’ there. The next selection will include all the custom fields that you have.
From my custom fields, I selected ‘Address’, so it will appear on Oxygen Builder. It might take a few seconds to load…
For the image, it’s a bit different. When you add an image element from the left panel, you click ‘data’ from the same panel.
I have an image custom field, and when I select that, Oxygen Builder lets me choose the image size. You might not be able to edit the size on Oxygen Builder so make sure to select your desired size.
Fix the Layout
What I’ll do is add all of the custom fields data that I want to display on the template and then move them around, edit texts, make the layout look more appealing.
Remember I added 2 more post types awhile ago? If you have more than 1 post type, you can preview the others right within Oxygen Builder via the dropdown on the top left.
This is what the page will actually look like…
