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.
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. 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
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.
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
I’m happy it was useful. Thanks.
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 !
You are very welcome.
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
Hi Joel, Try not setting the content to full width. Its possible the plugin author made a change due to a change in Elementor. Please let me know if that helps and I’ll update the post.
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 🙁
I’m not sure the exact steps you are taking. I think you are trying to insert a Toolset archive template into a page created with Elementor. Did you try using the Toolset Views widget? Or, you can go into a post or page using the classic editor and insert the archive using the button and popup and then copy the shortcode and paste it into a Text widget in Elementor.
Hope that helps,
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
You use the El Custom Skin template in the Elementor Posts and Post Archive widgets. If you have Toolset you can use that. If you have Elementor Pro there is a Template widget and I think you can insert the archive template in a page with that also.
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?
Hi Elina, You can only use the El Custom Skin Loop in the Elementor Post and Post Archive widgets. Is that what you tried?
How can you sort the results by recently added or by category or by title
Found the solution, use the edit posts widget instead of the edit archive posts widget!
Glad you found the solution.