{"id":6643,"date":"2021-10-08T07:00:03","date_gmt":"2021-10-08T07:00:03","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=6643"},"modified":"2023-02-21T09:49:12","modified_gmt":"2023-02-21T09:49:12","slug":"create-a-directory-using-elementor-acf-cpt-ui","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/","title":{"rendered":"Create a directory using Elementor, ACF &amp; CPT UI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6643\" class=\"elementor elementor-6643\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7c1ff63b thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c1ff63b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-549efe4d\" data-id=\"549efe4d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a496ef elementor-widget elementor-widget-video\" data-id=\"a496ef\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=SIuLFU1pD-8&amp;t=44s&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-19682aaf thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"19682aaf\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7c164f67\" data-id=\"7c164f67\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-723341de elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"723341de\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1911\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1911\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1912\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1912\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1911\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1911\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1911\" tabindex=\"0\" hidden=\"false\"><p>In this mini course we learn how to build a directory using Custom Post Type UI (CPT UI), Advanced Custom Fields (ACF), Elementor Custom Skin &amp; Elementor Pro.<\/p><p>We\u2019ll first create a custom post type and taxonomy using CPT UI, followed by creating the custom fields required for our listings using ACF.<\/p><p>We\u2019ll then use a combination of Elementor and Elementor Custom Skin to create the design for our directory template files, so that it fits in perfectly with our existing website.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e The difference between custom post types, taxonomies &amp; custom fields<br \/>\u2714\ufe0e How to create custom posts, taxonomies &amp; custom fields<br \/>\u2714\ufe0e Creating single post and archive templates<br \/>\u2714\ufe0e Creating a loop template<br \/>\u2714\ufe0e And much more!<\/p><p>Plugins used in this tutorial:<br \/><a href=\"https:\/\/en-gb.wordpress.org\/plugins\/advanced-custom-fields\" target=\"_blank\" rel=\"noopener\">Advanced Custom Fields<\/a><br \/><a href=\"https:\/\/en-gb.wordpress.org\/plugins\/custom-post-type-ui\" target=\"_blank\" rel=\"noopener\">Custom Post Type UI<\/a><br \/><a href=\"https:\/\/en-gb.wordpress.org\/plugins\/ele-custom-skin\" target=\"_blank\" rel=\"noopener\">Elementor Custom Skin<\/a><\/p><p>Useful links:<br \/><a href=\"https:\/\/elementor.com\/help\/learn-what-are-site-kits\/\" target=\"_blank\" rel=\"noopener\">How to install a template kit<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/?playlist=72a4e67b&amp;video=08f9296\" target=\"_blank\" rel=\"noopener\">Getting started with Elementor<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/theme-builder-collection\/?playlist=76011151&amp;video=08f9296\" target=\"_blank\" rel=\"noopener\">Theme builder tutorials<\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1912\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1912\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1912\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Ash from Elementor.<\/p><p>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.<\/p><p>But how can we achieve this? The answer is by using custom post types, taxonomies &amp; custom fields.<\/p><p>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.<\/p><p>So, grab a coffee, get comfy and let\u2019s take your website building knowledge to the next level.<\/p><p>Before we get started, let\u2019s first take a look at what we\u2019re going to build.<\/p><p>Our website is a health and wellness blog.<\/p><p>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.<\/p><p>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.<\/p><p>These recommendations will be displayed first of all on an archive page.<\/p><p>Selecting one of the recommendations will take the visitor to a dedicated single post, which will display a whole host of information&#8230;all created with custom fields.<\/p><p>Throughout this tutorial we\u2019ll be using the \u2018Mindey\u2019 template kit which you can install via the \u2018Kit Library\u2019 so you\u2019re able to follow along with ease. If you\u2019re unsure how to install a kit from the library, please follow the link in the description below to learn how.<\/p><p>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\u2019ll find some useful resources below.<\/p><p>So what exactly are custom post types, fields and taxonomies?<\/p><p>Let\u2019s explore what these are in order, starting with custom post types.<\/p><p>By default, WordPress comes with these post types:<\/p><p>We have\u2026<\/p><p>Post<br \/>Page<br \/>Attachment<br \/>Revision<br \/>&#8230;and Navigation Menu<\/p><p>These default post types may be suitable for many website projects, but if you need to create something a little more unique, then you\u2019ll need to create a custom post type.<\/p><p>For example in this tutorial we\u2019re going to create a directory post type, which will display contact information and content about specially selected companies.<\/p><p>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\u2019re going to use a free plugin called \u2018Custom Post Type UI\u2019.<\/p><p>This plugin will allow us to create and manage custom post types which can be used for a whole range of requirements.<\/p><p>We\u2019ll then use the same plugin to create a custom taxonomy for our new post type.<\/p><p>But what is a taxonomy?<\/p><p>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, \u2018Categories and Tags\u2019.<\/p><p>Categories allow for broad grouping of content, whilst tags allow for specific grouping.<\/p><p>These are a useful method to ensure that related material on your website is easy to locate for users.<\/p><p>We\u2019re going to create a new taxonomy for our directory to easily identify the type of businesses we\u2019re showcasing.<\/p><p>This not only provides great organisation in our admin panel, but also provides additional navigation options on the front end of our website.<\/p><p>And last but not least we have custom fields.<\/p><p>So what exactly are custom fields?<\/p><p>Custom fields allow users to add more data and information when creating posts.<\/p><p>WordPress stores this information so that it can be displayed on the front end of a website&#8230;and this is where Elementor comes in.<\/p><p>By using the Elementor Editor we are able to easily select this dynamic content to display on our website.<\/p><p>Let\u2019s get started by creating our custom post type.<\/p><p>As mentioned, we\u2019re going to install a free plugin called \u2018Custom Post Type UI\u2019.<\/p><p>This plugin provides a user-friendly and simple way of creating custom post types for your website.<\/p><p>Once installed and activated you will see a new menu item called \u2018CPT UI\u2019.<\/p><p>There are many options shown here, but for the purpose of this tutorial we\u2019ll be focusing on the top two options\u2026\u2019Add\/Edit Post Types &amp; Add\/Edd Taxonomies\u2019.<br \/>If we select \u2018Add\/Edit Post Type\u2019 we are presented with the following screen.<\/p><p>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.<\/p><p>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.<\/p><p>We only need to focus on the basic settings initially and we\u2019ll 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.<\/p><p>We\u2019re going to call ours \u201cdirectory\u201d.<\/p><p>Next we need to add the plural and single labels which are used in the admin menu\u2026in these fields we\u2019ll enter \u201cBusinesses\u201d for the plural label, and \u201cBusiness\u201d in the singular label.<\/p><p>If we now select \u2018Add Post Type\u2019 the page reloads and a couple of things have changed.<\/p><p>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.<\/p><p>To view previously created custom post types select the \u2018Edit Post Types\u2019 tab. Then use the dropdown to select the post type you wish to amend. Because we\u2019ve only created one custom post type so far, this is all we see.<\/p><p>Let\u2019s continue configuring this post type.<\/p><p>Scroll down until you see the section titled \u2018Additional Labels\u2019.<\/p><p>Here we can specify the text used in the labels for our post type. Scrolling back up allows us to \u2018Auto-populate the labels with a connection to the single and plural fields previously entered.<\/p><p>We can also amend any of these fields manually if we like.<\/p><p>Let\u2019s minimise these first two sections to tidy the screen up a little.<\/p><p>The third and final area allows us to configure the settings of our post type.<\/p><p>There are a couple of important configurations we need to make for our website, so let\u2019s scroll down to the \u2018Has Archive\u2019 section. This we will switch to \u2018True\u2019 as we would like to build an archive for our new custom post type.<\/p><p>The next aspect we\u2019ll amend is to set \u2018Hierarchical\u2019 to true. This will allow us to have parent-child relationships with our post type. Even if you don\u2019t plan on using this structure initially, it\u2019s a good idea to enable it in case you need to make changes in the future.<\/p><p>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.<\/p><p>We\u2019ll leave \u2018Show in Menu\u2019 as \u2018True\u2019 and this will allow us to quickly add a new company via the top menu.<\/p><p>And here we can change the icon associated with the menu item.<\/p><p>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.<\/p><p>Under \u2018Supports\u2019 we are able to choose which built in editor features we would like to enable for our post type.<\/p><p>We\u2019ll leave the three default options, which are \u2018title, editor &amp; feature image\u2019 and we\u2019ll be sure to add our own custom fields soon.<\/p><p>The final two options we\u2019ll leave blank, but if you need to add support for the built in WordPress taxonomies, you can control that here.<\/p><p>Once finished, let\u2019s save our post type and explore just what we\u2019ve created.<\/p><p>In the main menu, we can see our new \u2018directory\u2019 post type&#8230;with our new updated icon, and if we hover over this item we can see two options which are \u2018All Businesses &amp; Add New\u2019.<\/p><p>Select \u2018All Businesses first of all and you\u2019ll see a blank table, this is where all of our posts will appear once we\u2019ve added them.<\/p><p>Select \u2018Add New\u2019 now and you\u2019ll see we have the three default supports enabled, which are for the \u2018Title&#8230;Editor and under the business tab&#8230; Featured Image\u2019.<\/p><p>We\u2019ll be using the default fields for our new directory post, but most importantly we\u2019ll be addings some unique custom fields.<\/p><p>Before we explore how to create and add these, let\u2019s first set up a taxonomy for our directory.<\/p><p>Navigate your way to \u2018CPT UI &gt; Add\/Edit Taxonomies\u2019 and here we can create and assign our new taxonomy.<\/p><p>First give it a slug&#8230;<\/p><p>A Plural Label\u2026<\/p><p>Singular Label\u2026<\/p><p>And then auto populate the labels just like we did with the custom post type&#8230;and if we scroll down, we can see all of the fields have been populated.<\/p><p>Now the important part&#8230;be sure to select the custom post type you would like to assign this taxonomy to. In our case we\u2019ll select \u2018Businesses\u2019.<\/p><p>Once done, select \u2018Add Taxonomy\u2019 to save your progress so far.<\/p><p>Now, head to the \u2018Edit Taxonomies\u2019 tab and select your new taxonomy.<\/p><p>Let\u2019s minimise these first two sections&#8230;<\/p><p>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.<\/p><p>Scroll down and change \u2018Hierarchical\u2019 to \u2018True\u2019 for the same reasons we did when creating the \u2018Directory\u2019 post type, now let\u2019s create our new taxonomy.<\/p><p>In the menu now we can see the new taxonomy has been created and added to our \u2018Directory\u2019 post type. Selecting this will now allow us to create as many entries as we like.<\/p><p>Let\u2019s add a few now to get things started&#8230;ok great.<\/p><p>Now it\u2019s time to create some custom fields and add them to our custom post type.<\/p><p>Before we learn how to do this, we must first install a free plugin which will allow us to create new custom fields.<\/p><p>The plugin we\u2019re going to install is called \u2018Advanced Custom Fields\u2019 or ACF for short. ACF as you can see has over 1 million installations with a 5 star rating&#8230;so you should feel pretty confident it\u2019s a great plugin.<\/p><p>Install and then activate the plugin.<\/p><p>Once this is done you will see a new menu item called \u2018Custom Fields\u2019.<\/p><p>Let\u2019s now head to ACF to create our contact information, social media links, rating and review custom fields.<\/p><p>Select the add new button and let\u2019s first add a title (type Directory Fields) and then set a location rule so that these custom fields appear on the correct post type.<\/p><p>Using the dropdown, change \u2018Post\u2019 to Business.<\/p><p>Now select the \u2018+ Add Field\u2019 button to create our first custom field.<\/p><p>We must remember that we have some default fields applied already, which include the \u2018Title, Editor &amp; Featured Image\u2019.<\/p><p>These three fields will populate the \u2018Company Name, Company Information &amp; Company Image\u2019 for us. So we do not need to create them again.<\/p><p>And the category will be populated by a taxonomy.<\/p><p>So this leaves the website display text, website link, phone number, address, social media links, review &amp; rating.<\/p><p>Starting with the website, enter \u2018Website Display Text\u2019 in the title field and hit tab, which will automatically populate the field name for us. We\u2019ll leave the field type as text, and we can now choose if we would like to add instructions&#8230;whether it is required or not&#8230;a default value&#8230;placeholder text&#8230;text to show before &amp; after the field&#8230;and a character limit.<\/p><p>These options will appear for most custom fields and for the purpose of our tutorial, we\u2019re going to leave them blank, but feel free to configure these if you so wish.<\/p><p>We set the width to 50%, which will help us keep the edit screen organised.<\/p><p>Once finished, close the field and add another one.<\/p><p>Let\u2019s now create the custom field for our website link.<\/p><p>Add the field label&#8230;and change the field type to \u2018URL\u2019 again we\u2019ll set the width to 50% here.<\/p><p>This time we\u2019ll enter \u2018Telephone Number\u2019 and leave it as \u2018Text\u2019. We\u2019ll leave the width blank this time as it will default to 100% if left unpopulated.<\/p><p>Now we\u2019ll add \u2018Address\u2019 and choose \u2018Text Area\u2019 from the \u2018Field Type\u2019 which will give us more room to enter the company&#8217;s address.<\/p><p>Let\u2019s now add in our social media links\u2026<\/p><p>Add another field&#8230;add the name&#8230;change it to URL&#8230;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\u2026.then update the label and name accordingly.<\/p><p>Now, close and add another one. This time we\u2019ll enter \u2018Review\u2019 and under \u2018Field Type\u2019 choose WYSIWYG Editor. This stands for \u2018What you see is what you get\u2019 and adds the default WordPress editor which allows you to apply formatting to text as well as media to your content. Let\u2019s set the width of this field to 80%.<\/p><p>Now close this field and then add one last one.<\/p><p>This one will be called \u2018Rating\u2019 and we\u2019ll set the \u2018Field Type\u2019 to number. Because we\u2019re going to link this to a 5 star rating, we must apply some rules to ensure it works correctly.<\/p><p>The minimum value we\u2019ll set to \u20180\u2019&#8230; maximum value we\u2019ll set to \u20185\u2019&#8230;and step size we\u2019ll set to 0.1&#8230;which will allow for these increments.<\/p><p>We\u2019ll also enable \u2018Conditional Logic\u2019 and set it to only show if information has been entered into the \u2018Review\u2019 field.<\/p><p>Set width here to 20% and let\u2019s update and check out just what we\u2019ve created.<\/p><p>Go to \u2018Directory &gt; Add New\u2019 and as you can see we now have a whole host of new fields to populate.<\/p><p>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&#8230;and if we type something in the review editor the rating field appears and allows us to enter a value up to 5.<\/p><p>Now that all of our custom fields, taxonomy and post type have been created, let\u2019s create a post so that we can jump into the Elementor Editor and create our single post template.<\/p><p>We\u2019ll add the company name\u2026<\/p><p>The company description\u2026<\/p><p>Website Display Text\u2026<\/p><p>Website Address Link&#8230;<\/p><p>Telephone Number\u2026<\/p><p>Address\u2026<\/p><p>Facebook URL&#8230;Twitter URL&#8230;Linkedin URL<\/p><p>Review\u2026<\/p><p>Rating\u2026<\/p><p>Featured image\u2026<\/p><p>And finally, as you can see we now have an \u2018Industries\u2019 dropdown. Here we can select the category which our post applies to&#8230;or add a new one if needed.<\/p><p>Once finished, publish your first custom post.<\/p><p>We\u2019ve made great progress so far by first of all learning what custom posts, taxonomies and fields are and what they\u2019re capable of doing.<\/p><p>We then created these using the free plugins from Custom Post Types UI &amp; Advanced Custom Fields.<\/p><p>Now that we\u2019ve learnt how to set up and configure these aspects, it\u2019s time to learn how to display these custom values on our website.<\/p><p>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.<\/p><p>In the theme builder select \u2018add new\u2019 and choose \u2018single post\u2019. Dismiss the library and let start adding our elements to populate our custom post type.<\/p><p>Start with adding a new one column section&#8230;set the width&#8230;gap&#8230;and then add some margin.<\/p><p>Now add the post title widget. This widget will automatically populate the field with the name of the post.<\/p><p>But hold on, we\u2019re not seeing the company name we\u2019ve just created. Well, luckily Elementor makes this very easy to fix.<\/p><p>Select the gear icon located in the bottom left hand corner&#8230;and under \u2018Preview Settings\u2019 choose \u2018Business\u2019 first of all and then search for a post you\u2019ve created. Apply and preview and then the Elementor editor will reload and show you content pulled from our custom post type.<\/p><p>Now set your alignment&#8230;and typography.<\/p><p>Next we need to add the featured image, and we\u2019re going to do it by using the spacer widget. Drop this into position&#8230;set the height\u2026.and then switch over to the advanced tab and open the background settings.<\/p><p>Enable \u2018Classic\u2019 and then if you hover over the image box you\u2019ll see the dynamic tags icon. Select this and choose \u2018featured image\u2019. Now set the position&#8230;attachment&#8230;repeat&#8230;and size.<\/p><p>Let\u2019s head back to our heading and apply a couple more tweaks to achieve our design requirements.<\/p><p>In the advanced tab, set the bottom margin to -30px&#8230; and the z-index to 2. This will ensure it appears on top of our featured image.<\/p><p>OK, that\u2019s a great start.<\/p><p>Moving on, let\u2019s now create the elements which will display the contact information, star rating and social media links.<\/p><p>Add a new section&#8230;set it\u2019s width&#8230;and apply some margin. Now select the column&#8230;and adjust it\u2019s padding.<\/p><p>Drop in the heading widget and change the HTML Tag to p. Now in the style tab change the typography&#8230;and weight.<\/p><p>Switching back to the content tab, let\u2019s now update this to automatically display the taxonomy.<\/p><p>Select \u2018Dynamic Tags\u2019&#8230;choose post terms&#8230;then click the wrench icon and under taxonomy we\u2019re going to choose the custom taxonomy we\u2019ve previously set up, which in our instance is \u2018Industries\u2019.<\/p><p>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.<\/p><p>Open the advanced tab next, and you\u2019ll see we\u2019re able to enter text to show before, or after our dynamic content, as well as fallback text.<\/p><p>We\u2019ll add \u2018Category\u2019 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.<\/p><p>Let\u2019s duplicate this widget so that we don\u2019t need to apply the styles again, and remove the existing dynamic rules by selecting the cross.<\/p><p>Open the dynamic tags and scroll to the bottom until you see ACF, and select ACF field.<\/p><p>Selecting the wrench icon now allows us to choose one of our custom fields. In this instance we\u2019ll select \u2018Telephone Number\u2019.<\/p><p>To complete this first section, we\u2019ll now drop in the star rating widget.<\/p><p>We\u2019ll style it first by setting the size&#8230;spacing&#8230;and color.<\/p><p>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\u2019re presented with.<\/p><p>Select the wrench icon and choose the rating custom field.<\/p><p>Now that we have the three elements which will populate this first section, let\u2019s make some adjustments so that they all appear on the same line.<\/p><p>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.<\/p><p>Because the rating widget is a different element, we can\u2019t simply paste the same inline style&#8230;so let\u2019s set that manually.<\/p><p>OK, that\u2019s all of the elements on the same line, let\u2019s now space them out. Select the column which holds all of these&#8230;and set the vertical align to \u2018Middle\u2019&#8230;and the Horizontal Align to \u2018Space Between\u2019.<\/p><p>Fantastic! Let\u2019s now duplicate this entire section to give us a head start on the next elements. We\u2019ll just remove the margin on this second section.<\/p><p>Now choose the duplicated category and amend the dynamic tags to display our website instead.<\/p><p>We\u2019ll set the display text first of all&#8230;and then in the link field, we\u2019ll set the website link. If we select the gear icon, we can also choose to open this link in a new window.<\/p><p>Now change the duplicated phone number so that it displays the address.<\/p><p>Finally, let\u2019s remove the duplicated ratings and add in a social icons widget.<\/p><p>Set it as inline first of all&#8230;and then amend the styles&#8230;starting with the colors&#8230;then size&#8230;padding&#8230;spacing&#8230;and row gap. Now set the hover color.<\/p><p>Next open the Facebook social icon and let\u2019s 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\u2019ll leave this as it is.<\/p><p>Let\u2019s now repeat the process for the Twitter icon.<\/p><p>And finally we\u2019ll update the YouTube icon to be Linkedin instead&#8230;and then we\u2019ll set the link.<\/p><p>Moving on we\u2019ll now add the sections which will display the company information and review.<\/p><p>Add a new section and set it\u2019s width&#8230;margin&#8230;and padding.<\/p><p>Now add the post title widget&#8230;change the HTML Tag to h2\u2026.typography to secondary&#8230;.add 20px margin to the bottom&#8230;and amend the padding. Open the border tab&#8230;set the border type to solid&#8230;bottom to 1px&#8230;and color.<\/p><p>Now back in the content tab, select the wrench icon, and in the advanced area add \u201cAbout\u201d in the before field followed by a space.<\/p><p>Next, we\u2019ll add the \u2018Post Content\u2019 widget. This will automatically display the content entered in the WordPress editor. The only amendment here is to adjust the padding.<\/p><p>Now for the review section.<\/p><p>Drop in a heading widget&#8230;amend the text&#8230;change the HTML Tag\u2026.then copy the styles from our first heading and paste them onto this one, then add some margin to the top.<\/p><p>The very last step is to drop in a text editor widget. Let\u2019s set the styles first by copying them from the previous block of text.<\/p><p>And now select the dynamic tag&#8230;head to acf field&#8230;and then choose the review field.<\/p><p>OK, great. Things have really come together for our template.<\/p><p>Let\u2019s now set a template name and then configure our display settings.<\/p><p>Select the gear icon in the bottom left corner and rename your template to something that will help you easily identify it.<\/p><p>Let\u2019s now publish our template and as you can see we\u2019re presented with the \u2018Publish Settings\u2019 popup.<\/p><p>Choose \u2018Add Condition\u2019 first of all.<\/p><p>Then use the dropdown to find and select our \u2018Businesses\u2019 custom post type.<\/p><p>Doing so will ensure this template is applied to all posts created within this post type.<\/p><p>Save and close, and now let\u2019s test it out.<\/p><p>Back in the WordPress dashboard, let\u2019s navigate our way to our directory post&#8230;hover over the item and select view.<\/p><p>As you can see our new post is appearing correctly and looks great.<\/p><p>Whilst we\u2019ve 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.<\/p><p>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\u2019s not the most visually pleasing design and certainly doesn\u2019t fit in with the rest of our website.<\/p><p>Let\u2019s jump back into the WordPress dashboard to discover just how to fix this.<\/p><p>First, let\u2019s create some more posts so that we have ample content to properly preview our archive template.<\/p><p>Now head back to the theme builder.<\/p><p>Select \u2018Add New\u2019 first of all&#8230;and choose \u2018Archive\u2019.<\/p><p>Dismiss the Library and add a new section&#8230;.define your styles&#8230;and then add a heading widget and do the same.<\/p><p>Now open up the widgets panel and drop in the \u2018Archive Posts\u2019 widget.<\/p><p>Just like with the single template file, we need to amend the preview settings to properly preview the content.<\/p><p>Open the settings&#8230;preview settings&#8230;select Businesses Archive\u2019&#8230;and then \u2018Apply &amp; Preview\u2019.<\/p><p>OK, great. Now we can see the correct posts, it will be much easier to style this page.<\/p><p>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.<\/p><p>However, we\u2019d 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?<\/p><p>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\u2019d like them to appear.<\/p><p>Let\u2019s name our archive template&#8230;and then save it as a draft.<\/p><p>Let\u2019s now enable the functionality we need to create a custom loop.<\/p><p>Head back to the WordPress dashboard and navigate to the plugins area.<\/p><p>We\u2019re going to install a plugin called \u2018Elementor Custom Skin\u2019. Once installed and activated head back to the Theme Builder and you will see a new item called \u2018Loop\u2019.<\/p><p>Let\u2019s add a new loop.<\/p><p>Dismiss the library and as you can see we\u2019re presented with the default Elementor Editor.<\/p><p>Before we start creating our loop, let\u2019s first rename our template file&#8230;and then update the preview settings to display content from one of our custom posts.<\/p><p>We\u2019ll add a section first\u2026set our desired width&#8230;and then remove any gaps.<\/p><p>Now we\u2019ll drop in the featured image widget.<\/p><p>Change the image size&#8230;and under link choose \u2018Custom URL\u2019&#8230;<\/p><p>Select the dynamic tags option and choose \u2018Post URL\u2019.<\/p><p>This will ensure that when clicked the visitor is taken to the post page.<\/p><p>Switch to the style tab next and set the width. We can also apply a subtle hover style to add interactivity to our design.<\/p><p>Now add a heading widget&#8230;then use the dynamic tag option to populate this with the \u2018Post Title\u2019. Next, set the dynamic link to \u2018Post URL\u2019, again, to ensure that when this is clicked it takes the visitor to the post page.<\/p><p>Let\u2019s now center the text&#8230;change the global font (secondary)&#8230;and apply some margin.<\/p><p>Next, we\u2019re going to add our star rating.<\/p><p>Find and drop in the widget underneath our heading&#8230;we\u2019ll populate it first with our \u2018Rating Custom Field\u2019&#8230;center it&#8230;amend the size&#8230;spacing&#8230;and color.<\/p><p>Fantastic, this is really coming together now. Just a couple more elements and then we\u2019re ready to see how this works in our archive template.<\/p><p>Drop in the text editor widget and under dynamic tags choose the \u2018Post Summery\u2019 option.<\/p><p>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\u2019ll set this to 20. Set your styles and then add a button widget.<\/p><p>Set the dynamic link&#8230;&#8230;alignment&#8230;amend the text&#8230;set your typography&#8230;and hover styles.<\/p><p>OK, great. Now let\u2019s hit the publish button and as you can see we\u2019re presented with the \u2018Publish Settings\u2019 popup. We actually do not need to assign any specific conditions, so we\u2019ll simply select \u2018Save &amp; Close\u2019.<\/p><p>Let\u2019s now open up our Directory Archive by using typing Cmd\/Ctrl + E to open the Elementor Finder.<\/p><p>And if we select our archive posts widget and select the \u2018Skin\u2019 dropdown, we now see an option called \u2018Custom\u2019. Choosing this opens a new field where we can select our new loop template.<\/p><p>With our custom skin enabled, we still have access to amend the pagination and advanced settings&#8230;and as you can see Elementor Custom Skin has an array of premium options available in the Pro version of their plugin.<\/p><p>We can amend the columns though, so let\u2019s do that now.<\/p><p>Let\u2019s now publish our archive and we\u2019ll set the display condition to &#8216;Businesses Archive\u2019.<\/p><p>We have one final step now to ensure our website visitors can access our new custom post type with ease, and that\u2019s to add a link in our menu.<\/p><p>Let\u2019s use the Elementor Finder again, and this time we\u2019ll search for \u2018Menu\u2019. Once the menu screen has loaded, we can see on the left hand side a tab which contains our custom posts.<\/p><p>If we select \u2018View All\u2019 we can see the archive link appears. Check this option, and then \u2018Add to Menu\u2019.<\/p><p>Drag to rearrange, and then rename the menu item if you so wish.<\/p><p>Save your menu and if we now visit our website you can see the new directory link appears in the menu.<\/p><p>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.<br \/>Throughout this course, we\u2019ve explored multiple aspects which will allow you to create some truly unique website experiences.<\/p><p>We first learnt what custom posts, taxonomies and fields are, and the possibilities of what they can achieve.<\/p><p>Next, we learnt how to create these elements using a series of free plugins, all of which are available from the WordPress plugin repository.<\/p><p>Then in part 2 of our course we\u2019ve dived into the Elementor Theme Builder to create our single, archive and loop templates.<\/p><p>We learnt just how efficient Elementor is at displaying our custom data and linking our designs to custom posts.<\/p><p>Creating custom fields and post types in WordPress is made extremely easy thanks to ACF and Custom Post Type UI.<\/p><p>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.<\/p><p>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.<\/p><p>Thank you for watching and don\u2019t forget to subscribe to our channel for more amazing tutorials.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this mini course we learn how to build a directory using Custom Post Type UI (CPT UI), Advanced Custom Fields (ACF), Elementor Custom Skin &amp; Elementor Pro. We\u2019ll first create a custom post type and taxonomy using CPT UI, followed by creating the custom fields required for our listings using ACF. [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":6645,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[41],"class_list":["post-6643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamic-design","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a directory using Elementor, ACF &amp; CPT UI - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a directory using Elementor, ACF &amp; CPT UI - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this mini course we learn how to build a directory using Custom Post Type UI (CPT UI), Advanced Custom Fields (ACF), Elementor Custom Skin &amp; Elementor Pro. We\u2019ll first create a custom post type and taxonomy using CPT UI, followed by creating the custom fields required for our listings using ACF. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-08T07:00:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:49:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/acf-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a directory using Elementor, ACF &amp; CPT UI - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/","og_locale":"en_US","og_type":"article","og_title":"Create a directory using Elementor, ACF &amp; CPT UI - Academy","og_description":"Overview Transcript Overview In this mini course we learn how to build a directory using Custom Post Type UI (CPT UI), Advanced Custom Fields (ACF), Elementor Custom Skin &amp; Elementor Pro. We\u2019ll first create a custom post type and taxonomy using CPT UI, followed by creating the custom fields required for our listings using ACF. [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/","og_site_name":"Academy","article_published_time":"2021-10-08T07:00:03+00:00","article_modified_time":"2023-02-21T09:49:12+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/acf-cover.png","type":"image\/png"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"Create a directory using Elementor, ACF &amp; CPT UI","datePublished":"2021-10-08T07:00:03+00:00","dateModified":"2023-02-21T09:49:12+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/"},"wordCount":5387,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/acf-cover.png","keywords":["Guides and Tutorials"],"articleSection":["Dynamic Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/","url":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/","name":"Create a directory using Elementor, ACF &amp; CPT UI - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/acf-cover.png","datePublished":"2021-10-08T07:00:03+00:00","dateModified":"2023-02-21T09:49:12+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/acf-cover.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/acf-cover.png","width":2560,"height":1440,"caption":"Create a directory using Elementor, ACF & CPT UI"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-directory-using-elementor-acf-cpt-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Dynamic Design","item":"https:\/\/elementor.com\/academy\/dynamic-design\/"},{"@type":"ListItem","position":4,"name":"Create a directory using Elementor, ACF &amp; CPT UI"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","url":"https:\/\/elementor.com\/academy\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=6643"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6643\/revisions"}],"predecessor-version":[{"id":9610,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6643\/revisions\/9610"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/6645"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=6643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=6643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=6643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}