Create A Custom Archive Loop With Dynamic.ooo

In this tutorial I’m looking at creating an archive with a custom loop using Dynamic Content for Elementor. Surprisingly Elementor doesn’t have a way to create a custom loop for your archives or listings. Even Elementor Pro doesn’t have this feature. This is something you need if you want to control the layout or include a custom field in the output. In this tutorial I’ll show you how simple this is the Dynamic Posts widget that comes with Dynamic Content for Elementor.

Two years ago I wrote a tutorial about using the Elementor Custom Skin plugin with Elementor Pro for this purpose. The Elementor Custom Skin plugin is easy to use and has been a go-to solution. However, it requires Elementor Pro. Also, many people don’t realize that if they have Dynamic Content for Elementor then they don’t need the Elementor Custom Skin plugin. The Dynamic Posts widget gives you the same features and more. You can use the Dynamic Posts widget with Elementor core or Elementor Pro. In the video I show how to create the custom loop archive without Elementor Pro installed. When you do that you don’t get to see the content previews while creating the templates. In the text version of the process, I do have Elementor Pro installed, so previews are showing while building the single loop item.

Video Version

Test Site

I have a test site that is using the free Blocksy theme. It has a number of test posts.

I used Custom Post Type UI and Advanced Custom Fields to create a Custom Post Type called Books. The books Custom Post Type has two custom fields: a URL field with a link to the author’s website and and image field with the author’s photo. I show how to do that in this video.

I entered a number of book records but the archive doesn’t look good because the aspect ratio of the book covers is an unusual size. Also, there was no way to add any of the custom fields to the archive page. These are the problems we will solve in this tutorial.

Creating The Custom Book Archive

Here is the book archive that we want to create. See the author’s photo showing in the archive. It is an ACF custom image field. Showing a custom field in an archive is not something you can do with Elementor or Elementor Pro unless you have an addon.

I going to show how to create the custom loop item template and then we will use the templates with the Dynamic Posts widget and create the book archive.

Creating the Loop Item Template

To start go to the Templates admin menu item, Saved Templates, Sections and click on add new. Here I give the section template the name “Single Book Item”. I save and go into the Elementor editor.

I go to the page settings and set the preview options so I can see the fields we are working with.

The title won’t show as it is a section template. Only what is in the section will show on the front-end. I add a section to the canvas with two columns.

I add an image widget to the left column and using the dynamic data option I pick the featured image. I set the size and alignment.

On the style tab I set the image size.

I add a Heading widget to the right column and use the dynamic data option to pick the Post Title. I go to the Style tab and change the color.

Below the Post Title I add a Text Editor widget and use the dynamic data option to set it to show the post excerpt.

Below the excerpt I add an Inner Section widget with two columns.

I add another image widget and this time pick the ACF filed option from the list of dynamic data fields. I pick the author’s photo. On the Style tab I set the size of this image also.

I add a button widget to the right column, change the text to “Read more”, and set the link to the Post URL using the dynamic data option. On the Style tab I set the button’s background color to gray.

Finally before saving I set the background color of the section to a light blue.

Creating the Archive Template Using Dynamic Posts

Now lets go create an Elementor page template and use the Dynamic Posts widget. I go to Saved Templates and click to add a new Page template. If we only wanted to how a list of book records with a custom loop then we wouldn’t need to use a template, we could just include the Dynamic Posts widget in a post or page. However, we are going to want to set this as the book archive, so you’ll see why we are using a page template a bit further on.

I give it the named Book Archive Template Page. I click Create Template.

In the Elementor editor I got to the page settings by clicking on the cog icon in the lower left corner. I disable the title and set the page layout to Elementor Canvas.

I add a section and give it some top margin.

Now search for the Dynamic Posts widget and add it to the section. By default it is showing posts in a grid.

The Dynamic Posts widgets has a number of different options for the item style, that is the card for each item. I select the last one, which is to use an item template, and then pick the section template we saved earlier with the gray background. This is the old Elementor Custom Skin loop item. Toggle on pagination.

In the next panel down, the Grid panel, I set the number of columns to one.

Then in the Query panel I change the post type to Books and the status to Published.

Starting to look familiar? I save this and exit back to the WordPress admin. At this point we could use the Elementor Pro Theme Builder, if we have pro installed. However, since we have Dynamic.ooo installed, it is not necessary to use Elementor Pro.

I go to the Dynamic.ooo top menu item and the Template System submenu. I go to the Books item in the list and click the archive tab. As you can see, the Dynamic template system is expecting a template, which is why we used one instead of a page. Now, I find the Book Archive Template Page in the list of templates. Make sure the template system is enabled (upper left) and then click save settings.

The one we created from scratch works the exact same. I go back to the Page template and select that Book single item template instead. Here is the final result.

Discussion and Conclusions

To start out we created a custom loop item for books from scratch. Pretty simple stuff, but powerful because the custom loop lets you include custom fields or a special design. If you are starting out today and you have Dynamic Content for Elementor then you wouldn’t use the Elementor Custom Skins plugin.

If you don’t need a custom loop to show a custom field or have a special layout, you could create the archive without creating an item template first. I wanted to use an item template to show how easy it is to have a custom loop with a custom field. Using the Dynamic Posts widget with an item template was just a matter of clicking a few settings.

Because I had Dynamic.ooo installed I no longer needed the Elementor Custom Skin plugin. Also, Dynamic.ooo comes with a template system of its own, so I didn’t need to use the Elementor Pro Theme Builder. I was pleased with how easy it was to use Dynamic Content for Elementor to create a custom loop and I’m always keeping my eyes open for ways to use fewer plugins and work more efficiently. Please let me know in the comments if you find this tutorial helpful.