Create a directory using Elementor, ACF & CPT UI

[Music] hey there it's ash from elemental wordpress has evolved from a simple blogging platform into a sophisticated content management system and we often find the need to create more and more customized and unique website experiences but how can we achieve this the answer is by using custom post types taxonomies and custom fields in this tutorial we will learn first of all what all these elements are and then we'll 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 will contain information about services and businesses that they recommend the website is going to have a new area which will show a grid of recommended businesses from the website owner 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 mindy 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 find out 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 third-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 the 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 while 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 that we're showcasing this not only provides great organization 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're able to easily select this dynamic content to display on our website let's get started by creating our first 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 and add edit taxonomies if we select add edit post types we're 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 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 we also have new tabs at the top of this page to view previously created post types select the edit post types tab then use the drop down to select the post type that you wish to amend because we've only created one post type so far this is all that 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 also 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 minimize these first two sections to tidy up the screen a little the third and final areas allow 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 will switch to true as we would like to build an archive for our new custom post type the next aspect that 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 as this allows 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 dash icon link opens this useful reference where you can copy then paste a new dash icon into your settings the preview shows instantly and when we save these settings the icon will show in the menu under supports we're 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 and featured image and we'll be sure to add our own custom fields soon the final two options here will 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 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 for all businesses and 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 that 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 type but more importantly we'll be adding 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 plural name singular name and then auto-populate the fields just like we did with the custom post type and if we scroll down we can see that all 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 minimize these first two sections 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 allow us to create as many entries as we like let's add a few now to get things started okay great now it's time to create some custom fields and add them to our new custom post type before we learn how to do this we must first install the 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 sure 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'll 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 drop down change post to business now select the add field button to create our first custom field 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 and 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'll set the width to 50 which will help us keep the edit screen organized once finished close the field and add another one let's now create the custom field for our website link add the filled label and then change the fill type to url again we'll set the width here to 50 this time we'll enter telephone number and then leave it as text we'll leave the width blank this time as it will default to 100 if left unpopulated next we'll add address and choose text area from the field type which will give us some more room to enter the company's address let's now add in our social media links add the name change it to url and set the width to 33.3 percent 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 names 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 eighty percent 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 five star rating widget we must apply some rules to ensure that it works correctly the minimum value will set to 0 maximum value will set to 5 and step size will set to 0.1 which will allow for these increments we'll also enable conditional logic and then set it to show only if information has been entered into the review field set the width here to 20 and then let's update and check out just what we've created go to directory add new and as you can see we 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 into the review editor the rating field appears and allows us to enter a value up to five 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 twitter and linkedin urls review rating featured image and finally as you can see we have an industries drop down here we can select the category which our post applies to 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 and advanced custom fields now that we've learned how to set up and configure these aspects it's time to learn how to display these custom values on our website we'll 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's 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 that 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 do a search for a post that you've created select apply and preview and then the elementor editor will reload to show you the 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 then 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 minus 30 pixels and the z index to 2 this will ensure that 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 its width and apply some margin now select the column and adjust its padding drop in the heading widget and then change the html tag to p now in the style tab change the typography and wait 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 that we've previously set up which in our instance is industries if we have 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 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 then remove the existing dynamic rule by selecting the cross open the dynamic tags and scroll to the bottom until you see acf and then 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 that we're presented with select the wrench icon and choose the rating custom field now that we have the three elements which will populate the 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 onto 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 we'll set this manually okay 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 then 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 link 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 into a new window now change the phone number so that it displays the address finally let's remove the ratings and then add in a social icons widget set this 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 the widget automatically opens this into 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 its width margin and padding now add the post title widget change the html tag to h2 typography to secondary add 20 pixels margin to the bottom and amend the padding open the border tab set the border type to solid bottom to one pixel 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 now we'll drop in the post content widget this will automatically display the content entered into 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 now add some margin to the top the very last step is to drop in the text editor widget let's set the styles first of all 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 okay 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 pop-up choose add condition first of all then use the drop down to find and select our business's custom post type doing so will ensure this template is applied to all posts created with 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 then 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 learn 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 types in the url bar if we remove the slug for this particular company and then 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 then choose archive dismiss the library and then add a new section define your styles and then add in a heading widget and do the same now open up the widgets panel and drop in the archive posts widget just like with our 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 and preview ok great now that 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 however we'd like a more customized approach here which will allow us to display additional elements like the star rating review we added to our custom post type but how do we achieve this the answer is to create a custom loop by creating a custom loop we're able to design our post archive items exactly how we would like them to appear let's name our archive template and then save it as a draft let's now enable the functionality that 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'll 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 width and then remove any gaps now we'll drop in the featured image widgets 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 and now set the width we can also apply a subtle hover effect 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 and then 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 under dynamic tags choose the post summary option this option will automatically populate the text editor with content entered into the default wordpress editor selecting the wrench icon allows you to adjust just how many words are displayed we'll set ours to 20 we'll then set the styles and then add in a button widget set the dynamic link alignment amend the text set your typography and hover styles okay great let's now 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 and close let's now open our directory archive by typing command or control e to open the elementor finder if we now select our archive post widget and then select the skin drop down we can 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 this 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 conditions to businesses archive we have one final step to ensure that our website visitors can access our new custom post type with ease and that's to add a link to 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'll 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 learned what custom posts taxonomies and fields are and the possibilities of what they can achieve next we learned how to create these elements using a series of free plugins all of which are available from the wordpress plugin repository then in part two of our course we dived into the elementor theme builder to create our single archive and loop templates we learned just how efficient elementor is at displaying our custom data and linking our designs to our custom posts creating custom fields and post types in wordpress is made extremely easy thanks to acf and custom post types 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 subscribe to our channel for more amazing tutorials [Music] you

Channel: Elementor

Views: 18,845

Keywords:

Id: SIuLFU1pD-8

Length: 32min 2sec (1922 seconds)

Published: Thu Oct 07 2021