custom post types and theme builders elementor pro

Introduction

This post is part four of a series looking at Custom Post Types and the theming functionality of page builders. Premium page builders now the ability to create theme templates, but the process, difficulty, and limitations are different for each page builder. This series provides a walk-through of options so you can see what is involved, the strengths and weaknesses, and so that you can choose and can get a running start with the page builder of your choice. In part one I created a Custom Post Type using CPT UI and Advanced Custom Fields. Part two looked at how to create the single template and archive template for the Custom Post Type using the new Divi 4 theme builder and part three showed the process using Beaver Builder and Beaver Themer. Now, part four looks at how to create theme template using Elementor Pro.

Video Version

Setup

In the first part we created a Custom Post Type called Books that has an associated taxonomy called Genres. I have added several books records.

list of book records

Each record has some custom fields: the author’s photo and a link to the author’s website.

book record in the editor

However, due to the way WordPress works, these custom fields don’t show by default on the front-end. In the image below we can see that our custom fields are missing, so we need to create some theme templates in order to include them.

book on front end

Creating Theme Templates with Elementor Pro

Elementor Pro is actually an addon to the free version of Elementor, so you will need to have both installed. Once they are installed and activated, click on the “Theme Builder” menu item under the “Templates” top level menu.

elementor template builder menu

Creating the Single Template

Click the “Add New” button to add a new template.

Theme Builder add new button

The first drop down shows the types of templates you can create: page, section, popup, header, footer, single or archive. In the second drop down you can select the content type that the template will be used for. And in the text box we give the template a name. We want to start by creating the single template for individual books.

Initial template type settings

After you click the “Create Template” button, you go into the Elementor editor. In the bottom left corner there is a gear icon. Click on it to access the page settings.

empty elementor editor - page settings gear icon

Access the “Preview Settings” to select the type and record to be used for preview during layout. Then click the “Apply & Preview” button. This way we will see some sample content when laying out the template.

editor preview settings

Now, in the big empty space in the editor there are two icons. A “folder” icon to access pre-designed templates that come with Elementor, and a “plus” icon for adding a row.

plus icon and folder icons

Click on the plus icon to select a row / column preset. It is possible to adjust the number of columns and their size, but selecting one close to what you want gives you a quick start. I selected the row with two columns, a narrower one on the left.

default row and column options

Sometimes when starting you end up with your row too close to the header.

spacer for top of page

In that case, drag the Spacer icon onto the plus sign, and then click on it and use the small blue grid icon to drag and drop it above the row. Alternatively, you can go to the Advanced tag of the row and add some pixels to the top margin.

grid icon for dragging the spacer

When working on a single template, Elementor automatically brings the group of widgets for the Single template to the top of the available widget area. These are the most often used widgets for single templates. Drag the Featured Image widget and drop it onto the plus sign on the left.

single template widgets

Because we set a preview earlier, we see a featured image show automatically. I set it to be centered in the column and a medium sized image.

featured image added

A quick look at the other types of settings available with Elementor widgets. These settings may be different for each widget, but generally, the Style tab has styling settings like colors, typography, backgrounds and so on. For the Featured Image widget it has style settings related to images.

featured image style settings

The Advanced tab typically has margin and padding settings, effects, border, positioning, responsive display, and CSS settings.

featured image advanced settings

When looking at the settings, we get back to the list of widgets by either clicking on one of the column plus signs, or clicking on the grid icon at the top right of the widget sidebar.

Now, drag and drop the Post Title, Post Info, and Post Content widgets one after another, one under the previous, into the column on the right.

content widgets

Naturally, you could adjust the options on any of these are you go along, but for this demo, I’m just accepting the defaults.

content widgets added

So far, so good. Now, lets add the custom fields content. Click on the Image widget in the group of “Basic” widgets and drag and drop it under the featured image. Change the size to medium and the alignment to centered. Note the “Dynamic” link over the place holder image.

adding author image

Clicking on the Dynamic link, and we get a list of dynamic data options. The author’s photo is an ACF image field and Elementor shows is that in the list.

image dynamic data options

Click on the ACF Image Field and then a dialog opens to pick one. Click on the wrench icon to select the field.

acf image field options

Find the ACF field name in the list and click on it.

select the field

The author’s image has now been added.

author's image added

Now, let’s add a button to go to author’s website. From the list of “Basic” widgets on the left, select the Button widget and drag and drop it under the author’s photo. Change the button text to say “Visit Author’s Website” and change the alignment to Centered. Note the “Dynamic” link option above the Link area. Click on that so we can select the URL to the author’s website.

Button dialog

Scroll down the list of dynamic data options to the bottom. Elementor knows we are looking for a URL field for the button link and shows us the ACF URL field. Click on that.

acf url field

Now click on the wrench icon and select the Key drop down.

acf url field wrench icon

From the drop down, select the Author’s Website field.

acf url field key

Here is the book single with the custom fields added.

book single completed in the editor

It should be noted that there are also no options in Elementor Pro for conditional display. Say for example that some of the records did not have a link to the author’s website. In those cases, we wouldn’t want the button to show, but there is no way to conditionally display that in Elementor itself. There are, however, a number of 3rd party addons that provide conditional display of sections, but it is an important feature that is missing.

We are almost done. Let’s check the display conditions for the template by clicking the small green arrow at the bottom of the widget sidebar and then clicking the Display Conditions button.

check display conditions

Mine was already set to show all books. If your’s wasn’t then adjust the settings from the drop downs. The click ‘Save & Close.”

display condition settings for book single

Now, click the hamburger icon in the upper left and then the “View Page” page link. Congratulations, we have created a template for a Custom Post Type and have used custom ACF fields also.

book single done

Note, it is a template because if we look at other books, they will have the same layout.

another book record showing the same layout

Creating the Archive Template

Now let’s create the archive template. An archive is a listing of the posts of the same time. Go back to the dashboard, Templates, and click on the Theme Builder menu. We see the book single listed. Now click on the Add New button.

back to the theme builder menu

Select “Archive” from the type drop down and give it a name. Then click the Create Template button.

template settings for archive

When you go into the Elementor you will see the list of already designed pages. Close that by clicking the X and let’s build it from scratch. Note that now we have the widgets most often used in archives at the top.

empty archive template

First thing, like we did previously, click the gear icon in the lower left and go into the Preview Settings. Set the preview for Books Archive and click the Apply & Preview button.

preview settings for book archive

Back to the list of widgets, there is not going to be space at the top again, so drag and drop a Spacer widget onto the plus sign first to add some space to the top of the page.

You can use the “Archive Posts” widget or the “Posts” widget here. For our demo, drag and drop the Archive Posts widget over into the editor under the Spacer. In the Layout options, the first option is for the “Skin.” You can select the classic, card, or full content style. I’ll just stick for classic. Next there is the option for number of columns. The little computer icon is where you can click to see the options for tablet and mobile. By default Elementor is going to use 3 columns on desktop, 2 on tablet, and 1 on mobile, which is good for our demo. There are other options also, but right off we can see that we will need to adjust the image settings.

archive layout settings

I changed the image settings to 1.5 ratio and 70% width. One thing to note here is that with Elementor Pro there are only two options for displaying an archive, using the Archive Posts or the Posts widget. One reason you might need to use the Posts widget is that it lets you filter by taxonomy and set the display order of the posts. The Archive Posts widget is less flexible.

With both there are plenty of layout and styling options, but there is no way in the interface to modify the query to include, for example, custom fields. Say we wanted to show a row before the excerpt with the author name? That is not possible. There are some ways with a bit of PHP to modify the query, but that is not something many people would tackle. There are, however, several third party addons to Elementor that provide different options for customizing the archive using custom fields and that is a more likely scenario, but those are not a part of Elementor proper.

image adjustments

To continue, below the layout options are the Pagination options. We don’t have that many records in the demo, but it is something that you will want to set.

pagination options

The Advanced options is where you can set a message if no results are found.

advanced section for a message if no records are found

As before, go down to the green arrow at the bottom button of the widget sidebar and click on the Display Conditions link. This time we will need to add a condition, so click on that button and set the condition to Books Archive. Then click on the Save & Close button.

archive display conditions

Back in the editor, click on the hamburger menu in the upper right and then the View Page link.

final display of the book archive

There is our final archive display.

Summary and Conclusions

Creating the Single and Archive templates was easy to do. Both allow the user to see real data when creating templates. This makes a huge difference as it allows the user to style and adjust the layout in real time while working. The Single book template made it easy to access the custom fields to show the author’s photo and create a link to the author’s website. The Archive template was also easy to create. All of the Elementor widgets offer a large number of options for layout and styling, more than any other page builder.

The archive template options did not provide a way to include custom fields in the archive. Also, Elementor Pro does not have any conditional display options. While it is not everyday someone needs to include custom fields in an archive or conditionally display content in templates, if you do need one of those features it will be frustrating to not have it.

In addition to being easy to layout and style the templates, Elementor Pro has another strength: the large number of 3rd party addons which extend it. The huge number of 3rd party addons dwarfs the number of addons available for any other builder. The inability to include custom fields in the archive layout, for example, can be overcome using any one of several Elementor addons. Also, almost every addon pack includes several widgets for displaying content lists, though it should be noted that not all of them have the dynamic data option, so choose carefully. Some of the Post display addons offer additional styles and others offer additional features, such as front-end filtering. Likewise with conditional display of content, there are a number of 3rd party solutions that fill in the gaps.

Elementor’s ease of use, extensive layout and styling options, and large 3rd party ecosystem, make it the first choice for many site builders.

Visit the Elementor Website

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