Custom Fields In Elementor Archive

Including Custom Fields in an Elementor Archive

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on email
Email

Table of Contents

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

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. page builder framework theme 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: book single with custom field

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. book archive editor view 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.   book archive loop 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 pluign.  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. book archive with custom skin That’s it!  I hope you found this tutorial useful.

View the Elementor Custom Skin Plugin

 

Filed under:

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.”  

  • 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

  • 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 !

  • 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 🙁

    • Hi Elina,

      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,

      David

      • 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?

  • Elementor Pro

    Current Elementor Sales

    elementor360

    Subscribe to the Newsletter

    Do NOT follow this link or you will be banned from the site!
    >
    Scroll to Top