Custom Fields In Elementor Archive

Including Custom Fields in an Elementor Archive

This tutorial is for people who need to include custom fields in an Elementor Pro archive template.  Elementor does not have the ability to include custom fields in an archive template, but we can use a free plugin, Elementor Custom Skin, to achieve this.

Video Summary

Setup

page builder framework theme
book single with custom field

I’ve setup a test site using the Page Builder Framework theme.  And I’ve installed a few plugins:  All in One WP Migration for backups and restoring the site, Elementor and Elementor Pro, and Toolset Types and Toolset Views.  I also installed the Elementor Custom Skin plugin. With Toolset I created a Books Custom Post Type and added two records.  The CPT has a custom field called “Format” which shows whether the book reviewed was a print or audiobook.  The goal is to have this custom field show on the book archive for each book. book editor with custom field I created a single book template using Elementor Pro.  It is easy to add custom fields in single templates using the dynamic data options.  Here is a book with the custom field showing:

Default Elementor Pro Book Archive

book archive editor view
book archive loop
book archive with custom skin

To start, I created a list type of archive for the Books Custom Post Type.  You may need to click on the settings cog in the lower left corner and select the Custom Post Type for the previews to show in the editor.  The settings for the archive are shown in the screenshot.  There is no way to add any custom fields. The Elementor Custom Skin plugin allows you to create a template of just one item and then that gets used in the template to create the archive.  The plugin adds a new category to the Elementor Pro theme builder for “Loop”.  Create a new Loop template and give it a name.  I named mine “Book Archive Loop”. As shown in the video, the secret to creating the loop item is to stretch the section to full width and also set the content to full width.  Then add the elements one by one.  Since we are not in the archive template, we have the option to use the dynamic data connectors, so we add the featured image, title, content, our custom field, and a button.  I made the featured image and button link to the post URL.  Here you can see the custom field.   Now, save this and go back to the Book Archive template in Elementor.  We have an option for “Custom” under the skin drop down.  The “Custom” option was added by the Elementor Custom Skin plugin.  When we select that we can now select the Book Archive Loop we created.  Wonderful Elementor shows us the preview and it all looks good.  You can also check it on the front-end. That’s it!  I hope you found this tutorial useful.

0 0 votes
Article Rating

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts

Subscribe
Notify of
guest
15 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Andre
Andre
Guest
November 23, 2019 11:52 am

Thank you that have helped me a lot. I try a long time Anywhere elementor. But I think the most is include in elementor pro and with the loop plugin is perfect I think 🙂 best regards

David
David
Guest
January 7, 2020 1:52 pm

Dear Sir, I have to tell you that I have searched the globe, asking forums, buying several plugins to do this “simple thing” but for months noone told me this extraordinary method. Your video is really treasure if someone understands what useful thing you do! I wanted it to use it in property listing.
Thank from my heart !

Joel
Joel
Guest
April 13, 2020 8:49 pm

Thank you for the tutorial, I wanted my archive in 3 columns but just after the page loads the 3 columns, everything switches back to 1 column

Elina
Elina
Guest
June 18, 2020 8:31 am

im trying to use my archive template on a page but i cant see any content. When i click on preview, everything looks just the way it should, but when i click on insert i only see the “read more” button.. and just once 🙁

Elina
Elina
Guest
Reply to  David McCan
June 19, 2020 1:56 am

so what i did was to create the archive as you did using the custom skin plugin (loop) and it looked fine. After that i created a new page (edit with elementor) and tried to insert my template – is that the wrong way to do it? i did not try the toolset views widget, maybe i should? i will try 🙂 thank you

Elina
Elina
Guest
Reply to  David McCan
June 22, 2020 6:18 am

hmm, still same problem when using the template widget in elementor pro 🙁 i dont see any content, just one read more button and post date. is there some way i can show you what im doing?

Peter
Peter
Guest
July 1, 2020 5:41 am

How can you sort the results by recently added or by category or by title

Peter
Peter
Guest
July 1, 2020 6:51 am

Found the solution, use the edit posts widget instead of the edit archive posts widget!