Here is a video overview of the Crocoblock suite for Elementor and a walk-through using JetEngine and JetThemeCore for working with dynamic data. The process is shown in more detail in the video while in the article there are some screenshots taken at important points.
This post is part of a mini-series looking at the Crocoblock Suite for Elementor. In this article I want to look at the Crocoblock Suite of tools for Elementor in relationship to dynamic data. Crocoblock has recently included some new features and plugins in the suite related to dynamic data. Full disclosure, I was given a coupon to try the Crocoblock Suite. I’ve been trying to make this video for a couple of weeks now, but I kept running into issues. The silver lining is that I’ve discovered that the support channel is responsive and helpful. However, I’ve come to the conclusion that we’re definitely dealing with a “version one,” because there are a few rough edges. I’m gonna point those out as I go along so this is a balanced review. I’m gonna to show the strengths and the weaknesses, and there are some nice strength as well.
I’ve got a new install, with the lovely 2017 theme (chuckle). I’m using the Crocoblock theme wizard to do the install because I tried to do go through the process using the development site that I created for the first video about the Crocoblock Suite. I kept running into problems and I was wondering if maybe the problems had something to do with my install, if it got corrupted. I also was using the Astra theme and only installing a few of the Crocoblock plugins. I wanted to eliminate anything that I might be introducing into the process that was leading to issues, so that’s why I have a new install and I’m just went with the Kava theme that comes with the Suite. Also, to make it easy, and I’m gonna go with one of their demo skins. If you watched the first video you saw my comments and experience with these, which was overall pretty good.
The first thing I want to look at are the menu items for the JetEngine plugin. JetEngine is the plugin for creating dynamic data. The first menu item is for importing and exporting your custom post types, and that’s very useful. It is puzzling why it’s called “Skins Manager” as “skins” are the pre-designed themes that come with the Crocoblock Suite. That isn’t a big deal and is probably just some artifact from development.
The second screen is the JetEngine page for Listings. My sense is that “Listings” are related to post archives and we’re going to go through that process, so we’ll be back to this screen later. The next screen is for creating your Custom Post Types (CPTs). Then there is a screen for Custom Taxonomies, and another screen for Meta Boxes, should you want to add custom fields to one of your content types.
Creating a Custom Content Type
I created a “Books” Customer Post Type. For the most part, the screen was pretty straightforward, but there were a few places where there could be some refinements that could make the process easier. For example, I’ve seen other tools where you enter the Name of the CPT and it automatically fills in the slug. Also, there is a text field for where in the WordPress admin menu you’d like the Custom Post Type to appear. There are no constraints or hints about what you should enter here so I typed “after contact”. That saved without error and it appeared at the very top. This was kind of cheating in my part. I knew from my experiments and previous experience that one should enter a number, but even then, there is no clue how the numbering position system works. What I’ve seen other plugins do, is give you a drop-down of these menu items and you pick the one you want it to appear after. This obviously wasn’t a show stopper, just a rough edge.
Another thing to pay attention to is the drop down of the standard WordPress editor features, such as author, featured image (which Crocoblock calls “thumbnail”), comments, etc. The first go-round I did not pick “excerpt” because usually you can dynamically set the number of characters you’d like for your except. However, it appears that a limitation of the Suite is that if you want to use an “excerpt” dynamic field then you need to manually fill in the excerpt box. Most themes and plugins don’t work that way. They use the manually entered excerpt if one has been specified, otherwise they fall back to the first X number of characters.
For my “Books” Custom Post Type I wanted to add an Amazon affiliate link. Looking at the list of fields that JetEngine supports, we have Text, Date, Time, DateTime, Text Area, Switcher, Checkbox, Icon Picker, Media, Radio Button, Repeater, Select Box, and Color Picker. There isn’t one for a link or URL so I went with Text. Normally I think you’d want to have a URL or link type just for the purpose of allowing the plugin to validate the entries, to make sure people don’t enter incorrect data. Also, as seen in the video walk-through, there is a JetEngine widget for Dynamic Links, but since you cannot choose a link field type, your field might not show there. Elementor Pro likewise shows different custom field options in the dynamic data drop-downs based on field type. Anyway, a text box will work for now.
What’s the Big Deal with Dynamic Data?
If you are new to WordPress then I’m sorry to be the one to inform you that a “feature” of WordPress is that the custom fields (such as the “Amazon Link” field above) you fill in on the edit screen don’t automatically show up on the front-end. Now, you can code a PHP theme template file, or you can use one of the many plugins available to help with this. Elementor Pro solves this problem and Crocoblock wants to provide a solution too.
Template for a Single Book Post
You generally use the JetThemeCore plugin to create templates. A “template” is a theme layout that is used over and over for the same type of content. The JetThemeCore plugin adds the “CrocoBlock” menu item. You click on the “My Library” to get started. Here is a screenshot of the interface when creating the template for the Books CPT.
Curiously, there is not the option to select the Post Type that you want to create the Single template for. Consequently, you have to set this in the Elementor editor. I noted that when you use the JetEngine “Listing” interface, you do select which post type you want to work with, so they concept exists, but hasn’t yet been extended.
To specify which post type you are working with and the type of template you are creating, you click on the small “gear” icon in the lower left corner of the Elementor Editor. Then you can select the post type and template type. Note that you might also need to specify a post to use as the preview. After you have made your selections, you have to save and refresh the browser screen. In the video, I showed that this process is cumbersome.
The JetEngine plugin provides several Elementor widgets for working with dynamic data.
Creating the layout for the Single Template was pretty straightforward, until we get to the Amazon Link custom field. Because it is a field defined as a text field, it doesn’t show up in the Dynamic Links widget, but when we use the Dynamic Fields widget, there is no option to specify that we want it to be a link. Ideally, we could use a button widget and set the link for the button to use our custom field. However, the JetElements widget collection, that includes a button, don’t yet support dynamic fields. I imagine that is on the list of things that will be added in the future.
In order to get a button that uses the custom field as a link, I installed Elementor Pro, which works with dynamic data. That eventually worked, but as I show in the video, getting the JetEngine fields to show in the Elementor Pro drop-down was a bit squirrelly — the bottom line seemed to be that you might need to refresh the browser page.
Template for Books Archive
Now that we have a template for a single book, I wanted to create the Books Archive template. I think that way you do that with Crocoblocks is that you go to the JetEngine menu and to the “Listings” sub-menu. In your archive you have a listing of all of the posts of that post type. I created a template for one of the items in the list. This time, because the Listings interface allowed me to select which post type I was working with before going into the Elementor editor screen, Books were already selected.
When you make an archive you want the title of the post to be a link to the actual post. That wasn’t possible with the Dynamic fields, but worked fine using the Heading widget from Elementor.
In the archive listing, you also want to only show an excerpt of the content. Because the first time around I hadn’t included “excerpt”, I had to go back and add that to the Books CPT and manually add an excerpt to each of the Books posts. After that, I had my row layout.
Now, to create the actual archive, we go back to the Crocoblock Library link and select Archive from the list of tabs. Again, we don’t have the option to choose which post type it is an archive for. We need go into the Elementor settings and specify the post type and template type. Now, scroll down the list of Elementor widgets and select the Listing Grid widget. I then selected the Book Listing Template (my row), created using the Listing interface. I changed the Columns Number to 1 and we have the archive layout easily set.
I added a link to the main menu to the books archive and this was the final result. Here is the archive layout:
And here is the single template archive:
In conclusion, the Crocoblock Suite brings a lot of functionality to the table but this is definitely a “version one” of the dynamic data features. The Crocoblock team releases frequent updates, so I imagine they’ll address the rough edges. At that point, these dynamic data features will be a nice addition.
I hope you found this article useful.