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

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.