Using Custom Post Types and Advanced Custom Fields with Elementor

Creating Custom Post Types
with Advanced Custom Fields,
Custom Templates and Loops
with Conditions!
With Angela Bowman and Dave Warfel

Welcome to
Elementor Boulder Meetup

● The meetup is 1.5 hours (approx)
● Let’s keep it personal (if possible use
video when you are speaking)
● Please mute your mic, when you are
not speaking.
● If you would like to speak, please use
the “Raise hand” feature
Please note that this session might be
recorded and will be shared with you after
the session is terminated.
For more information: legal@elementor.com
Welcome Notes
1. Press on the participants button
2. Than press “Raise Hand” button in this window
Julie Pires
Tom V

Meet the Boulder Leaders!!
Sharing Knowledge and Resources
Angela Bowman
@askpwgirl
Bethany Siegler
@uniquethink
Dave Warfel
@davewarfel
Ron Broome

Where do you live?
Please put in chat and say hi!
Building Community

Agenda
Elementor Pro is required to create single post and archive templates.
● What is a custom post type and custom taxonomy?
● Why use CPT UI plugin?
● What are custom ﬁelds?
● How do you create custom ﬁelds?
● What is a Theme Builder template?
● How is a Theme Builder template different than editing a single page with
Elementor?
● What are the Display Conditions for Elementor templates?
● What is a loop? Why do you need custom loops? Where do you use loops?
● When you do you need to use conditional visibility?
Our demo site for today is: https://askwpgirldemo.sitedistrict.com/

What is a Custom Post Type (CPT) and why do
you need one?
1. By default, WordPress has three post types: Pages, Posts, and Attachment, as well as Revision and
Navigation Menus.
2. Custom post types are used to organize and manage discrete content better.
3. Many popular plugins use custom post types for their content:
a. Products (WooCommerce)
b. Events (The Events Calendar)
c. Lessons and Courses (LearnDash)
4. Other examples might be: Staff, Testimonials, Sponsors, Webinars. In today’s demo, we created one
for Hiking Trails.
5. Post types are stored in the WordPress database in wp_posts, just like all other posts and pages.
Learn more: https://kinsta.com/blog/wordpress-custom-post-types/

How do you create your own Custom Post Type?
1. We like to use Custom Post Type UI (CPT UI) Plugin.
CPTs can be created with a PHP function, but the
plugin makes it so easy to set all options!
2. Some important options you might want to check:
a. Title
b. Editor (optional if only using Advanced Custom
Fields)
c. Featured Image
d. Excerpt (handy for post grids or lists)
e. Author
We recommend this plugin: https://wordpress.org/plugins/custom-post-type-ui/

What is a Custom Taxonomy and why do you
need one?
1. By default, WordPress has two primary taxonomies: Category and Tag.
2. The default WordPress Category is hierarchical (i.e. parent and child categories).
3. WordPress Tags are not hierarchical (no checkboxes, you must type them).
4. Custom Taxonomies allow you to group your content logically, for example:
a. Events might have their own event taxonomy.
b. Products have a product taxonomy.
c. Books and movies would have a genre taxonomy.
d. In our demo, we created a taxonomy for trail difﬁculty level.
Learn more: https://kinsta.com/knowledgebase/what-is-taxonomy/

How do you create your own Custom
Taxonomy?
1. We like to use Custom Post Type UI Plugin (though
it can be done with PHP code)..
2. Some important options you might want to check:
a. Which post type this taxonomy should be
used with?
b. Is it hierarchical? (Will use checkboxes.)
We recommend this plugin: https://wordpress.org/plugins/custom-post-type-ui/

What are custom fields and why do you need
them?
1. By default, WordPress has title, excerpt, content, author, date, featured image as the primary
content for your posts in the wp_posts table.
2. Custom fields allow you to store other content with the post to help you better organize and
format your content:
a. For a book custom post type, you might have ISBN, Number of Pages, Publisher.
b. For our demo, we have "length," "elevation," and "time to complete" fields.
3. Custom fields are referred to as “meta data” for a post. Meta data for all post types are stored in
the wp_postmeta table.
4. Custom fields allow you to create more robust templates and eliminate time-consuming,
manual formatting of content.
Learn more: https://metabox.io/what-is-custom-fields-in-wordpress/

How do you create custom fields?
1. PHP code or plugin.
2. We like using Advanced
Custom Fields plugin.
Note: Pro version will allow
you to take advantage of
more robust fields, such
as Repeater, Gallery,
Flexible Content, Options
pages, and
Clone field.
We recommend this plugin: https://www.advancedcustomfields.com/

Should you use a custom field or a taxonomy?
1. Use a custom field if the content is unique to each post, e.g. ISBN number.
2. Use a taxonomy if the content will be common among many posts, e.g. Genre.
3. Taxonomies have their own auto generated pages in WordPress called Archives. The
query for this content happens automatically when the URL for the taxonomy is
used, so it doesn’t require extra queries to happen on the database. This is good!
4. Taxonomies allow for a lot of flexibility in your layouts! You can use the Elementor
Post List widget anywhere to pull posts from a specific taxonomy anywhere! We did
this on our demo home page to show a post grid of Trails.
5. Each item in a taxonomy is called a “term”, e.g. Horror, Romance, Sci-Fi, are “terms” in
the Genre Taxonomy.
Learn more: https://kinsta.com/knowledgebase/what-is-taxonomy/

How do you create a custom single post
template for your custom post type?
1. Be default, all posts are formatted the same and use your theme’s
settings and styles.
2. You can create a custom layout for your custom post type and add the
custom ﬁelds you’ve created to it.
3. Go to Elementor > Templates > Theme Builder > Single Post and create a
new template.
4. Use the Single elements to build your template: Post Title, Post Content,
Featured Image, etc. You can use Dynamic Tags in most elements to
add your custom ﬁeld values to the template. (See link below for
instructions.)
5. Publish the template (see slide 17).
Link: https://elementor.com/help/dynamic-tags-pro/

How do you create a custom Archive template
for your custom taxonomy?
1. Be default, taxonomy archive pages show the posts in a list
formatted per your theme settings.
2. You can create a custom layout for your custom taxonomy
term pages and the overall post type archive page (which
shows all posts regardless of taxonomy).
3. Go to Elementor > Templates > Theme Builder > Archive
and create a new Archive template.
4. Use the Archive elements to build your page: Archive Title
and Archive Posts. (See link below for details.)
5. Publish the template (see slide 17).
Link: https://elementor.com/help/create-archive-template/

Elementor Display Conditions
When you publish your single post or archive template, you will be prompted to choose
where you want this template to be used.
Link: https://elementor.com/help/conditions/
Display conditions for Single Post
template for Trails:
Display conditions for Difﬁculty
Archive and All Trails Archive:

What is a loop and why do you need custom
loops?
● A loop shows the content of a single post in a query for posts.
● Custom loops are used in Elementor to customize the look of an item in a Post List,
Post Grid, or Post Archive.
● Custom loops determine how the individual item in a grid or list looks.
● Custom loops are needed if you want to show custom ﬁelds in a post grid or post list
item.
● Custom loops require a plugin, like Ele Custom Skin.
● Custom loops are created under Elementor > Templates > Theme Builder > Loops.
● Custom loops do NOT have conditions. They are chosen on your Archive template for
the skin for the Archive list (or post list on other pages).
We recommend this plugin: https://wordpress.org/plugins/ele-custom-skin/

How do you conditionally display content in
your templates?
The two best plugins for hiding/showing content in your templates based on speciﬁc
conditions are:
https://wordpress.org/plugins/dynamic-visibility-for-elementor/ by Dynamic.ooo
Or
https://wordpress.org/plugins/dynamicconditions/ by RTO GmbH
Note: The pro version of Dynamic.ooo’s plugin is quite extensive and will allow you to use
complex ACF ﬁelds in your layouts as well as do many other developer-level “coding” in
Elementor: https://www.dynamic.ooo/

Example: Hide Gallery
Heading on single
trail post if no images.
Using Dynamic Visibility plugin in the
Advanced tab of the Heading widget:
1. Enable Visibility set to Display
mode: hide.
2. Choose Dynamic Tags.
3. Choose the ACF Gallery Field >
Photos ﬁeld.
4. Set Status to “is empty.”
5. Now the heading will be hidden if
no gallery images are uploaded.

Helpful Resources
● Custom Post Type UI: https://wordpress.org/plugins/custom-post-type-ui/
FREE For creating the "trails" post type & "difficulty" taxonomy
● Advanced Custom Fields (ACF): https://wordpress.org/plugins/advanced-custom-fields/
FREE For creating "length," "elevation," and "time to complete" fields
● Elementor-ACF Integration: https://elementor.com/help/elementor-acf/
Included w/ Elementor Pro
● Elementor Pro Dynamic Tags: https://elementor.com/help/dynamic-tags-pro/
This is how we added the custom field values to our template. Included with Elementor Pro.
● Elementor Custom Skin: https://wordpress.org/plugins/ele-custom-skin/
FREE For adding “length” and “time to complete” to the grid.
● Elementor Dynamic Visibility:
https://wordpress.org/plugins/dynamic-visibility-for-elementor/
FREE For hiding items in your template based on specific criteria.

Helpful Resources
● Elementor Documentation: https://elementor.com/help/
● Elementor Tutorials: https://elementor.com/learn/
● Elementor tutorial on custom post types:
https://elementor.com/blog/wordpress-custom-post-types/
● Add Image sizes: https://developer.wordpress.org/reference/functions/add_image_size/
● Code Snippets (for adding the add_image_size function):
https://wordpress.org/plugins/code-snippets/
● Past Meetup Videos and Slides:
○ Introduction to Creating Elementor Layouts
○ Introduction to Elementor Theme Builder
○ Making Popups with Elementor
○ How to Convert an Existing Site to Elementor
○ Going Live After Building Site Locally or in Staging

Using Custom Post Types and Advanced Custom Fields with Elementor

Related slideshows

More Related Content

Using Custom Post Types and Advanced Custom Fields with Elementor