Create a directory using Elementor, ACF & CPT UI

Hey there, it’s Ash from Elementor.

WordPress has evolved from a simple blogging platform into a sophisticated Content Management System and often we find the need to create more and more customised and unique website experiences.

But how can we achieve this? The answer is by using custom post types, taxonomies & custom fields.

In this tutorial we will learn first of all what all of these elements are, and then we will show you how to create and implement these features into your own website.

So, grab a coffee, get comfy and let’s take your website building knowledge to the next level.

Before we get started, let’s first take a look at what we’re going to build.

Our website is a health and wellness blog.

As the website has grown, so has the need for more unique content. The business owner has decided they would like to add a directory which contains information about services and businesses they recommend.

The website is going to have a new area which shows a grid of recommended businesses from the website owner, including contact details, company information, a review and rating.

These recommendations will be displayed first of all on an archive page.

Selecting one of the recommendations will take the visitor to a dedicated single post, which will display a whole host of information…all created with custom fields.

Throughout this tutorial we’ll be using the ‘Mindey’ template kit which you can install via the ‘Kit Library’ so you’re able to follow along with ease. If you’re unsure how to install a kit from the library, please follow the link in the description below to learn how.

And finally before we get started, you will need Elementor Pro for this tutorial and ideally you should have ample experience using Elementor, which includes using the theme builder. If you need to brush up on these aspects, you’ll find some useful resources below.

So what exactly are custom post types, fields and taxonomies?

Let’s explore what these are in order, starting with custom post types.

By default, WordPress comes with these post types:

We have…

Post
Page
Attachment
Revision
…and Navigation Menu

These default post types may be suitable for many website projects, but if you need to create something a little more unique, then you’ll need to create a custom post type.

For example in this tutorial we’re going to create a directory post type, which will display contact information and content about specially selected companies.

We can create a custom post type by manually adding some PHP to our functions.php file, or a much simpler way is to install a 3rd party plugin. In our tutorial, we’re going to use a free plugin called ‘Custom Post Type UI’.

This plugin will allow us to create and manage custom post types which can be used for a whole range of requirements.

We’ll then use the same plugin to create a custom taxonomy for our new post type.

But what is a taxonomy?

Within WordPress, a taxonomy is a means of putting posts together based on a set of connections. A typical WordPress post will contain two taxonomies which are by default, ‘Categories and Tags’.

Categories allow for broad grouping of content, whilst tags allow for specific grouping.

These are a useful method to ensure that related material on your website is easy to locate for users.

We’re going to create a new taxonomy for our directory to easily identify the type of businesses we’re showcasing.

This not only provides great organisation in our admin panel, but also provides additional navigation options on the front end of our website.

And last but not least we have custom fields.

So what exactly are custom fields?

Custom fields allow users to add more data and information when creating posts.

WordPress stores this information so that it can be displayed on the front end of a website…and this is where Elementor comes in.

By using the Elementor Editor we are able to easily select this dynamic content to display on our website.

Let’s get started by creating our custom post type.

As mentioned, we’re going to install a free plugin called ‘Custom Post Type UI’.

This plugin provides a user-friendly and simple way of creating custom post types for your website.

Once installed and activated you will see a new menu item called ‘CPT UI’.

There are many options shown here, but for the purpose of this tutorial we’ll be focusing on the top two options…’Add/Edit Post Types & Add/Edd Taxonomies’.
If we select ‘Add/Edit Post Type’ we are presented with the following screen.

Here we can enter all of the necessary details required to create our new custom post which will allow us to create a specific and unique area on our website to display our directory.

The first and and the most important settings are located at the top of the page and as you can see these are all mandatory.

We only need to focus on the basic settings initially and we’ll start by giving our custom post type a slug. This should be lower case and if you wish to use multiple words, separate them with an underscore.

We’re going to call ours “directory”.

Next we need to add the plural and single labels which are used in the admin menu…in these fields we’ll enter “Businesses” for the plural label, and “Business” in the singular label.

If we now select ‘Add Post Type’ the page reloads and a couple of things have changed.

We can now see the new custom post type in the admin menu and also we now have new tabs at the top of this page.

To view previously created custom post types select the ‘Edit Post Types’ tab. Then use the dropdown to select the post type you wish to amend. Because we’ve only created one custom post type so far, this is all we see.

Let’s continue configuring this post type.

Scroll down until you see the section titled ‘Additional Labels’.

Here we can specify the text used in the labels for our post type. Scrolling back up allows us to ‘Auto-populate the labels with a connection to the single and plural fields previously entered.

We can also amend any of these fields manually if we like.

Let’s minimise these first two sections to tidy the screen up a little.

The third and final area allows us to configure the settings of our post type.

There are a couple of important configurations we need to make for our website, so let’s scroll down to the ‘Has Archive’ section. This we will switch to ‘True’ as we would like to build an archive for our new custom post type.

The next aspect we’ll amend is to set ‘Hierarchical’ to true. This will allow us to have parent-child relationships with our post type. Even if you don’t plan on using this structure initially, it’s a good idea to enable it in case you need to make changes in the future.

Next up we have some options for how our post type appears in the menu. We can set a number here if we would like to position our post type at a specific position in the menu.

We’ll leave ‘Show in Menu’ as ‘True’ and this will allow us to quickly add a new company via the top menu.

And here we can change the icon associated with the menu item.

Selecting the dashicon link opens this useful reference where you can copy and then paste a new dashicon into your settings. The preview shows instantly and when we save these settings, this icon will show in the menu.

Under ‘Supports’ we are able to choose which built in editor features we would like to enable for our post type.

We’ll leave the three default options, which are ‘title, editor & feature image’ and we’ll be sure to add our own custom fields soon.

The final two options we’ll leave blank, but if you need to add support for the built in WordPress taxonomies, you can control that here.

Once finished, let’s save our post type and explore just what we’ve created.

In the main menu, we can see our new ‘directory’ post type…with our new updated icon, and if we hover over this item we can see two options which are ‘All Businesses & Add New’.

Select ‘All Businesses first of all and you’ll see a blank table, this is where all of our posts will appear once we’ve added them.

Select ‘Add New’ now and you’ll see we have the three default supports enabled, which are for the ‘Title…Editor and under the business tab… Featured Image’.

We’ll be using the default fields for our new directory post, but most importantly we’ll be addings some unique custom fields.

Before we explore how to create and add these, let’s first set up a taxonomy for our directory.

Navigate your way to ‘CPT UI > Add/Edit Taxonomies’ and here we can create and assign our new taxonomy.

First give it a slug…

A Plural Label…

Singular Label…

And then auto populate the labels just like we did with the custom post type…and if we scroll down, we can see all of the fields have been populated.

Now the important part…be sure to select the custom post type you would like to assign this taxonomy to. In our case we’ll select ‘Businesses’.

Once done, select ‘Add Taxonomy’ to save your progress so far.

Now, head to the ‘Edit Taxonomies’ tab and select your new taxonomy.

Let’s minimise these first two sections…

And if we now scroll to the bottom, we can see many additional settings, all of which can be amended at a later stage if required.

Scroll down and change ‘Hierarchical’ to ‘True’ for the same reasons we did when creating the ‘Directory’ post type, now let’s create our new taxonomy.

In the menu now we can see the new taxonomy has been created and added to our ‘Directory’ post type. Selecting this will now allow us to create as many entries as we like.

Let’s add a few now to get things started…ok great.

Now it’s time to create some custom fields and add them to our custom post type.

Before we learn how to do this, we must first install a free plugin which will allow us to create new custom fields.

The plugin we’re going to install is called ‘Advanced Custom Fields’ or ACF for short. ACF as you can see has over 1 million installations with a 5 star rating…so you should feel pretty confident it’s a great plugin.

Install and then activate the plugin.

Once this is done you will see a new menu item called ‘Custom Fields’.

Let’s now head to ACF to create our contact information, social media links, rating and review custom fields.

Select the add new button and let’s first add a title (type Directory Fields) and then set a location rule so that these custom fields appear on the correct post type.

Using the dropdown, change ‘Post’ to Business.

Now select the ‘+ Add Field’ button to create our first custom field.

We must remember that we have some default fields applied already, which include the ‘Title, Editor & Featured Image’.

These three fields will populate the ‘Company Name, Company Information & Company Image’ for us. So we do not need to create them again.

And the category will be populated by a taxonomy.

So this leaves the website display text, website link, phone number, address, social media links, review & rating.

Starting with the website, enter ‘Website Display Text’ in the title field and hit tab, which will automatically populate the field name for us. We’ll leave the field type as text, and we can now choose if we would like to add instructions…whether it is required or not…a default value…placeholder text…text to show before & after the field…and a character limit.

These options will appear for most custom fields and for the purpose of our tutorial, we’re going to leave them blank, but feel free to configure these if you so wish.

We set the width to 50%, which will help us keep the edit screen organised.

Once finished, close the field and add another one.

Let’s now create the custom field for our website link.

Add the field label…and change the field type to ‘URL’ again we’ll set the width to 50% here.

This time we’ll enter ‘Telephone Number’ and leave it as ‘Text’. We’ll leave the width blank this time as it will default to 100% if left unpopulated.

Now we’ll add ‘Address’ and choose ‘Text Area’ from the ‘Field Type’ which will give us more room to enter the company’s address.

Let’s now add in our social media links…

Add another field…add the name…change it to URL…and set the width 33.3% so that it takes up a third of the space available on the edit screen. Close this field and then use the helpful duplicate option twice more for the other social media links….then update the label and name accordingly.

Now, close and add another one. This time we’ll enter ‘Review’ and under ‘Field Type’ choose WYSIWYG Editor. This stands for ‘What you see is what you get’ and adds the default WordPress editor which allows you to apply formatting to text as well as media to your content. Let’s set the width of this field to 80%.

Now close this field and then add one last one.

This one will be called ‘Rating’ and we’ll set the ‘Field Type’ to number. Because we’re going to link this to a 5 star rating, we must apply some rules to ensure it works correctly.

The minimum value we’ll set to ‘0’… maximum value we’ll set to ‘5’…and step size we’ll set to 0.1…which will allow for these increments.

We’ll also enable ‘Conditional Logic’ and set it to only show if information has been entered into the ‘Review’ field.

Set width here to 20% and let’s update and check out just what we’ve created.

Go to ‘Directory > Add New’ and as you can see we now have a whole host of new fields to populate.

We of course have our default title, editor and featured image, but we also now have fields for the website display text, website link, telephone number, address, social media links, review…and if we type something in the review editor the rating field appears and allows us to enter a value up to 5.

Now that all of our custom fields, taxonomy and post type have been created, let’s create a post so that we can jump into the Elementor Editor and create our single post template.

We’ll add the company name…

The company description…

Website Display Text…

Website Address Link…

Telephone Number…

Address…

Facebook URL…Twitter URL…Linkedin URL

Review…

Rating…

Featured image…

And finally, as you can see we now have an ‘Industries’ dropdown. Here we can select the category which our post applies to…or add a new one if needed.

Once finished, publish your first custom post.

We’ve made great progress so far by first of all learning what custom posts, taxonomies and fields are and what they’re capable of doing.

We then created these using the free plugins from Custom Post Types UI & Advanced Custom Fields.

Now that we’ve learnt how to set up and configure these aspects, it’s time to learn how to display these custom values on our website.

We will now focus on the Elementor side of things by heading to the theme builder. Here we can create the template files associated with our custom post type. This will allow us to display the custom fields on our website.

In the theme builder select ‘add new’ and choose ‘single post’. Dismiss the library and let start adding our elements to populate our custom post type.

Start with adding a new one column section…set the width…gap…and then add some margin.

Now add the post title widget. This widget will automatically populate the field with the name of the post.

But hold on, we’re not seeing the company name we’ve just created. Well, luckily Elementor makes this very easy to fix.

Select the gear icon located in the bottom left hand corner…and under ‘Preview Settings’ choose ‘Business’ first of all and then search for a post you’ve created. Apply and preview and then the Elementor editor will reload and show you content pulled from our custom post type.

Now set your alignment…and typography.

Next we need to add the featured image, and we’re going to do it by using the spacer widget. Drop this into position…set the height….and then switch over to the advanced tab and open the background settings.

Enable ‘Classic’ and then if you hover over the image box you’ll see the dynamic tags icon. Select this and choose ‘featured image’. Now set the position…attachment…repeat…and size.

Let’s head back to our heading and apply a couple more tweaks to achieve our design requirements.

In the advanced tab, set the bottom margin to -30px… and the z-index to 2. This will ensure it appears on top of our featured image.

OK, that’s a great start.

Moving on, let’s now create the elements which will display the contact information, star rating and social media links.

Add a new section…set it’s width…and apply some margin. Now select the column…and adjust it’s padding.

Drop in the heading widget and change the HTML Tag to p. Now in the style tab change the typography…and weight.

Switching back to the content tab, let’s now update this to automatically display the taxonomy.

Select ‘Dynamic Tags’…choose post terms…then click the wrench icon and under taxonomy we’re going to choose the custom taxonomy we’ve previously set up, which in our instance is ‘Industries’.

If we had multiple taxonomies set up, we can decide what separates them, we can also choose to enable a link which will take the user to all posts under this category.

Open the advanced tab next, and you’ll see we’re able to enter text to show before, or after our dynamic content, as well as fallback text.

We’ll add ‘Category’ followed by a colon and a space. And if we now check out our widget, you can see the dynamic data is displaying for us.

Let’s duplicate this widget so that we don’t need to apply the styles again, and remove the existing dynamic rules by selecting the cross.

Open the dynamic tags and scroll to the bottom until you see ACF, and select ACF field.

Selecting the wrench icon now allows us to choose one of our custom fields. In this instance we’ll select ‘Telephone Number’.

To complete this first section, we’ll now drop in the star rating widget.

We’ll style it first by setting the size…spacing…and color.

Then in the content tab choose the dynamic tags icon next to the rating field. Because this field can only be populated with a number, these are the only options we’re presented with.

Select the wrench icon and choose the rating custom field.

Now that we have the three elements which will populate this first section, let’s make some adjustments so that they all appear on the same line.

Select the category and head over to the advanced tab. Under positioning, change this to inline. Now copy the styles of this element and paste them into the telephone number to mimic the inline styling.

Because the rating widget is a different element, we can’t simply paste the same inline style…so let’s set that manually.

OK, that’s all of the elements on the same line, let’s now space them out. Select the column which holds all of these…and set the vertical align to ‘Middle’…and the Horizontal Align to ‘Space Between’.

Fantastic! Let’s now duplicate this entire section to give us a head start on the next elements. We’ll just remove the margin on this second section.

Now choose the duplicated category and amend the dynamic tags to display our website instead.

We’ll set the display text first of all…and then in the link field, we’ll set the website link. If we select the gear icon, we can also choose to open this link in a new window.

Now change the duplicated phone number so that it displays the address.

Finally, let’s remove the duplicated ratings and add in a social icons widget.

Set it as inline first of all…and then amend the styles…starting with the colors…then size…padding…spacing…and row gap. Now set the hover color.

Next open the Facebook social icon and let’s set the dynamic link. If we select the gear icon we can see that this widget automatically opens links in a new window, so we’ll leave this as it is.

Let’s now repeat the process for the Twitter icon.

And finally we’ll update the YouTube icon to be Linkedin instead…and then we’ll set the link.

Moving on we’ll now add the sections which will display the company information and review.

Add a new section and set it’s width…margin…and padding.

Now add the post title widget…change the HTML Tag to h2….typography to secondary….add 20px margin to the bottom…and amend the padding. Open the border tab…set the border type to solid…bottom to 1px…and color.

Now back in the content tab, select the wrench icon, and in the advanced area add “About” in the before field followed by a space.

Next, we’ll add the ‘Post Content’ widget. This will automatically display the content entered in the WordPress editor. The only amendment here is to adjust the padding.

Now for the review section.

Drop in a heading widget…amend the text…change the HTML Tag….then copy the styles from our first heading and paste them onto this one, then add some margin to the top.

The very last step is to drop in a text editor widget. Let’s set the styles first by copying them from the previous block of text.

And now select the dynamic tag…head to acf field…and then choose the review field.

OK, great. Things have really come together for our template.

Let’s now set a template name and then configure our display settings.

Select the gear icon in the bottom left corner and rename your template to something that will help you easily identify it.

Let’s now publish our template and as you can see we’re presented with the ‘Publish Settings’ popup.

Choose ‘Add Condition’ first of all.

Then use the dropdown to find and select our ‘Businesses’ custom post type.

Doing so will ensure this template is applied to all posts created within this post type.

Save and close, and now let’s test it out.

Back in the WordPress dashboard, let’s navigate our way to our directory post…hover over the item and select view.

As you can see our new post is appearing correctly and looks great.

Whilst we’ve made great progress with learning how to create a custom post type with custom fields, and then learnt how to create a single post template within the Theme Builder, we still have a crucial step to take.

And that is to create an archive template for our custom post type. In the URL bar, if we remove the slug for this particular company and hit enter, we can see the default screen for displaying posts. As you can see, it’s not the most visually pleasing design and certainly doesn’t fit in with the rest of our website.

Let’s jump back into the WordPress dashboard to discover just how to fix this.

First, let’s create some more posts so that we have ample content to properly preview our archive template.

Now head back to the theme builder.

Select ‘Add New’ first of all…and choose ‘Archive’.

Dismiss the Library and add a new section….define your styles…and then add a heading widget and do the same.

Now open up the widgets panel and drop in the ‘Archive Posts’ widget.

Just like with the single template file, we need to amend the preview settings to properly preview the content.

Open the settings…preview settings…select Businesses Archive’…and then ‘Apply & Preview’.

OK, great. Now we can see the correct posts, it will be much easier to style this page.

The archive widget has many options to configure and style our post previews and certainly provides an easy to use method for creating a grid layout of posts for us.

However, we’d like a more customised approach here which will allow us to display additional elements, like the star rating review we added to our custom post type, so how do we achieve this?

The answer is to create a custom loop design. By creating a custom loop, we are able to design our post archive items exactly how we’d like them to appear.

Let’s name our archive template…and then save it as a draft.

Let’s now enable the functionality we need to create a custom loop.

Head back to the WordPress dashboard and navigate to the plugins area.

We’re going to install a plugin called ‘Elementor Custom Skin’. Once installed and activated head back to the Theme Builder and you will see a new item called ‘Loop’.

Let’s add a new loop.

Dismiss the library and as you can see we’re presented with the default Elementor Editor.

Before we start creating our loop, let’s first rename our template file…and then update the preview settings to display content from one of our custom posts.

We’ll add a section first…set our desired width…and then remove any gaps.

Now we’ll drop in the featured image widget.

Change the image size…and under link choose ‘Custom URL’…

Select the dynamic tags option and choose ‘Post URL’.

This will ensure that when clicked the visitor is taken to the post page.

Switch to the style tab next and set the width. We can also apply a subtle hover style to add interactivity to our design.

Now add a heading widget…then use the dynamic tag option to populate this with the ‘Post Title’. Next, set the dynamic link to ‘Post URL’, again, to ensure that when this is clicked it takes the visitor to the post page.

Let’s now center the text…change the global font (secondary)…and apply some margin.

Next, we’re going to add our star rating.

Find and drop in the widget underneath our heading…we’ll populate it first with our ‘Rating Custom Field’…center it…amend the size…spacing…and color.

Fantastic, this is really coming together now. Just a couple more elements and then we’re ready to see how this works in our archive template.

Drop in the text editor widget and under dynamic tags choose the ‘Post Summery’ option.

This option will automatically populate the text editor with content entered in the default WordPress editor. Selecting the wrench icon allows you to amend just how many words are displayed, which is extremely useful. We’ll set this to 20. Set your styles and then add a button widget.

Set the dynamic link……alignment…amend the text…set your typography…and hover styles.

OK, great. Now let’s hit the publish button and as you can see we’re presented with the ‘Publish Settings’ popup. We actually do not need to assign any specific conditions, so we’ll simply select ‘Save & Close’.

Let’s now open up our Directory Archive by using typing Cmd/Ctrl + E to open the Elementor Finder.

And if we select our archive posts widget and select the ‘Skin’ dropdown, we now see an option called ‘Custom’. Choosing this opens a new field where we can select our new loop template.

With our custom skin enabled, we still have access to amend the pagination and advanced settings…and as you can see Elementor Custom Skin has an array of premium options available in the Pro version of their plugin.

We can amend the columns though, so let’s do that now.

Let’s now publish our archive and we’ll set the display condition to ‘Businesses Archive’.

We have one final step now to ensure our website visitors can access our new custom post type with ease, and that’s to add a link in our menu.

Let’s use the Elementor Finder again, and this time we’ll search for ‘Menu’. Once the menu screen has loaded, we can see on the left hand side a tab which contains our custom posts.

If we select ‘View All’ we can see the archive link appears. Check this option, and then ‘Add to Menu’.

Drag to rearrange, and then rename the menu item if you so wish.

Save your menu and if we now visit our website you can see the new directory link appears in the menu.

Selecting this takes us to our archive page, and then if we select one of the companies we can see the single post page with all of the auto populated content.
Throughout this course, we’ve explored multiple aspects which will allow you to create some truly unique website experiences.

We first learnt what custom posts, taxonomies and fields are, and the possibilities of what they can achieve.

Next, we learnt how to create these elements using a series of free plugins, all of which are available from the WordPress plugin repository.

Then in part 2 of our course we’ve dived into the Elementor Theme Builder to create our single, archive and loop templates.

We learnt just how efficient Elementor is at displaying our custom data and linking our designs to custom posts.

Creating custom fields and post types in WordPress is made extremely easy thanks to ACF and Custom Post Type UI.

And with the fantastic capabilities brought in by using Elementor Custom Skin, you have an extensive toolkit to be able to create truly bespoke website creations.

Be sure to share your websites in the comments below and let us know if you have any questions about using Elementor with these additional tools.

Thank you for watching and don’t forget to subscribe to our channel for more amazing tutorials.