Crocoblock Suite for Elementor: Custom Post Types & Templates – JetEngine & JetThemeCore

In this article I’m going to take a look at the Crocoblock Suite, especially in relation to dynamic data and creating theme templates.

Video

Here is a video walk-though of the using JetEngine and JetThemeCore for working with dynamic data.  I also use the JetSearch and JetSmartFilters plugins for search and filter pages.  The process is shown in more detail in the video while in the article there are some screenshots taken at important points.

Background

I took a look at the Crocoblock Suite back in August when the JetEngine plugin was first released.  The JetEngine plugin is the one you use to create Custom Post Types (CPT) and add fields to those CPTs.  At the time I thought that the features of the Crocoblock Suite were pretty good, but there were a few rough edges and there were a few things that I was surprised that we’re missing.  Fast-forward five months till today and so much has changed with a Crockblock Suite. The team is continually releasing updates and even adding additional plugins to the Suite. The review I did back in August is no longer accurate and there are a lot of new features that I can demonstrate, so I wanted to do another review.

In this review I’m going to look at not only creating a CPT, but creating two CPTs and having a relationship between them, and show how you can display content from a related post type in your templates.  Additionally there are two search plugins that have been added and so I’ll briefly demonstrate those as well.

Getting Started

I’ve got here a fresh install of the Astra Pro theme and I’ve installed a bunch of the plugins from the Crocoblock Suite, as well as a few others.  Let’s take a look. I’m using All in One WP Migration to backup and restore the site, Astra Pro, the Classic Editor, and Elementor free and Pro. Elementor Pro strictly isn’t required, but I like to use it also.

JetEments for Elementor is the basic add-on pack of widgets with the Crocoblock Suite, the JetEngine plugin is used for creating CPTs and fields, JetSearch and JetSmart Filters are search related plugins.  JetThemeCore is used for creating the templates and the JetTheme core compatibility kit is used for adding compatibility to Astra, OceanWP, and GeneratePress.

If you are going to create templates with JetThemeCore and have Elementor Pro installed, then one thing I recommend doing when you start out is going into the Crocoblock settings and toggling on the locations registration setting.  What this does is it says that Crocoblock is going to be the plugin responsible for creating the theme templates.  Because you can create templates with Elementor Pro, and you could have a conflict. Enable this first so that you don’t get some unexpected behavior.

Creating the CPTs, Relationship, and Taxonomy

You create the CPTs using the JetEngine plugin.  I will create one called “Books” with a slug of “book”.   I generally go with the defaults on the post type creation screen.  I’ll add one custom field, which is going to be the Amazon link, the affiliate link.   There are a number of field types, but they don’t have a URL field type, so I’ll use “Text.” Something new they added is that you can add columns to show in the Admin listing, but I’ll just go with what we have here now.  That’s the first CPT.

Now I want to create a second CPT called “Author Bios” and this will be our related post type.  Again, we’re gonna go with the defaults labels and options. For this post type we’ll add a custom field called “Authors Website.”  Again we’ll use “Text” for field type.

Okay, so so we have two CPTs and we want to relate them.  You go to the menu item under JetEngine, to “Post Relations” and click “Add New.”  “Books” will be the parent and the child will be “Author Bios.”

Now, you have a choice of if you want a one-to-one, a one-to-many, or a many-to-many relation.  A one-to-one means that for each book there would be one author.  You you know that books can have more than one author and you can also have authors that write more than one book.  So we’re going to go with many to many.  We want to add the metabox to be able to choose the related CPT to both the parent and child pages.  This is it’s just a select box where you can choose the related post.

One more thing I want to do, is create a taxonomy and we’ll call this “Genres” and this is going to be for books.  If it’s “hierarchical” it’s like categories, if not it’s tags, so I’ll make it hierarchical. I don’t need any extra fields on it.

I added some “Books” and some “Author Bios”.  Here are some screenshots that highlight the custom field link on each one, the Genre for Books, and the box where you select the related post for the related post type.  In other words,  I created the Author Bios first and then was able to pick them when add the Book records.  One thing to note is that Crocoblocks doesn’t automatically create an except for you, so you need to paste one in when creating the records.

Here is an example “Book” record:

And here is an example Author Bios record:

Creating the Templates for the Custom Post Types

I’ve got four authors, six books, and three genres so the fun begins.  We start working on creating the templates.  Why are templates important and why are they such a big deal?  Yes, you can do your own theme look and feel, but there’s another reason when it comes to CPTs and custom fields.  If you take a look at the default template for WordPress you’ll see that it does not show the the custom field we added.  So, we need a template which will show that for us and in WordPress you have a few options:

• You can create a theme template, a PHP file, that includes a PHP call to output the custom field or
• You can use tools like Elementor Pro or the Crocoblock Suite to do that for you.

I’ll just tell you it’s a lot quicker to use the tool, the GUI tool, than it is to code the PHP file by hand.  Even if you know PHP, HTML and CSS and you don’t feel that’s a big deal, there’s still a maintenance issue.  If you want to make changes, it’s a lot easier to go back and use the GUI than it is to go back and edit the PHP file, especially once you’ve gone live with a site.

When you create the templates you have to create an archive template, which is the multiple view, and the template for the single view.  In Crocoblocks you create the archive using the “Listing Item.”  The archive is a list of multiple posts in that post type and so you create a template for one of the rows.  That’s what a listing item is, so we’re going to create one for books.  From the JetEngine menu, select the “Listings” sub-menu, select “Books” from the “From Post Type” drop down, and gave it the name “Book Archive.”

We’re taken into the Elementor page builder.  I’m going to create a two column layout.  We’ll start with a “Dynamic Image” widget, which is near the bottom of the list of widgets, and this will be the “Post Thumbnail”, or featured image from the Book CPT.  I selected the medium sized image.  Then we will add the “Post Title with Link” by using the Elementor “Heading” widget.  Notice the “Dynamic” links.  Anywhere you see those you know you have choices for pulling in dynamic data.  For the Title I pull in the “Post Title” option and for the Link I selected that Post URL option.

Next, we’ll pull in the excerpt and we’ll use the Crocoblock “Dynamic Field”  for that.  Then we need a “Read more” button or link, so we’ll go to the “Dynamic Link” widget and add that.  So that’s done.  We’ve created one row as a model for the archive template.  Save that and exit out.

Now, let’s go create the template for the archive.  Go to the Crocoblock, My Library menu, select the “Archive” tab, and click “Add New.”  I gave the template the name of “Book Archive.”  When you go into the Elementor GUI, the first thing to do is to click the gear icon in the lower left corner.  We need to tell Elementor what template we are creating.

Now on the next tab, the “Preview” tab, select “Books” so that we can preview our work in the GUI.  Save and refresh the page.

Now, what we do is we use the Crocoblock “Listing Grid” widget and choose the listing that we made, which is the “Book Archive” one.  Now in our layout we can set how many we want to show and publish it.

Let’s go back to the front-end and check.  Here’s our archive.  First step done.

Now I want to create another listing.  This one will be for an author box on the single book template.  Go back to the JetEngine, Listings menu.  Click “New Listing” and give it the name “Author Box Listing.”  So this one I created as a single column.  We’ll add a “Dynamic Image” widget for the author’s picture, which is the “Post Thumbnail” and we’ll center that.  Then we’ll add the title using the Heading widget and center that.  Now I want to use that the link to the author’s website using the Dynamic Link widget, and center that.  Save and exit.

Now let’s go create the single template for books.  We want to go the Crocoblock, My Library, menu, click the “Single” tab, and “Add New.”  I gave it the name of Book Single.

In Elementor, remember to click the gear icon in the lower left corner and set the conditions.  In the Preview section, select a book to preview.  Then save and refresh the page.

Again, I went with a two column layout and put the book cover on the left.  I used the Heading widget on the right for the title, and added in the Dynamic Meta widget for the post meta.  Then I added the content.

Under the book cover image, I used a Crocoblock button to add the Amazon link.  So, those were the fields from the Book post type.  Now, to add the author box that we created earlier.  I added the “Listing Grid” widget under the Amazon button.  I set it to only show one record.

To make sure that we show the Author Bio associated with this book, we have to add a condition in.  In the screenshot below, see the “Include posts by IDs” field.  Here I’ve used a “magic tag.”

I suggest you check the Crocoblock documentation because there are some magic tags that we have to use.  Here’s a link to the JetEngine Post Listing documentation.   If you go to “Post Relations” section there are magic tags here for the Listing Grid.   Here is a screenshot:

So, the Author Bios post type relation was setup as a child of the Book post type, so I copied the first magic tag and put in “book” where it says “post-type-slug”.  This was the result:

Taking a look on the front-end, this is what it looks like:

So, we can see that we pulled in the author box from the related post type.

Now there’s one more thing I want to do.  I want to create the author single.  Let’s go back to the Crocoblock, My Library menu, select the Single tab, and give it a name of Author Single and click Add New.  Remember to click the gear and do the song and dance to select the post type template we are making.

Again, I started with a two column layout and put the author image in the left side, the Heading widget with the Post Title on the left, with the content next and then the link to the author’s website.  Now, add another single column row and drag in the Crocoblock Listing Grid widget.  Select the “Book Archive” so we can show the author’s books below their bio.

For the Post Query, it is similar to what we did for the Book Single, but this time, the magic tag we use is the one were we pull in the parent (since Book is parent to Author Bio).

Save that and go look on the front-end:

So, those are the templates.  It was pretty easy to set them up.

New Search Features

There are a couple more things I’m going to show you.  The first is with searching.  Let’s add a page let’s call it “Book Finder”.  Save that and click the “Edit with Elementor” button.

Now, in Elementor, I added a heading of “Book Finder – Enter search term” and then I scrolled down until the Crocoblock “Ajax Search” widget.  Drop that into your layout.  Now, select that you want to search in “Books” and that’s all we have to do!  Here it is on the front-end:

So, I imagine you’d want to style that, but you get the idea.

Finally, I want to look quickly as the JetSmartFilters plugin that is part of the Suite.  Before we can create a page with a search filter, we have to go to the “Smart Filters” menu and add one.  I named mine “Search by Genre.”

I kept it simple and picked the “Select” type of filter, taxonomy source, and the book Genre category.  That’s it.

Now, I went and created a page and named it Book Filter:

I put a Heading widget at the top with the heading of “Filter by Genre” and then dragged in the Select Filter widget.  Crocoblock comes with several types of filter widgets.  It is important to match the filter widget with the Filter Type that was used when setting up the filter previously.  I selected the “Search by Genre” filter.

I then grabbed the Listing Grid widget and put that in under the Select Filter.  I set the listing to Book Archive.

Now to go to the front-end and see it in action:

When we pick a Genre, the list if filtered to only show books that have that genre assigned.

Dynamic Options Added to More Widgets

Before I wrap-up, I just want to point out that many of the JetElement widgets now allow you to use them with dynamic text.  You can use the fields from your dynamic text in a large number of these, though not all of them.  This is something that the Crocoblock team has been adding and means that you can use these other widgets in your templates.

For example, here is the Crocoblock Video Player widget.  You could use this in a template and have a custom field for the video URL.

Conclusion

There have been some nice changes and additions with the Crocoblock Suite as regards dynamic data and templates since last August when I did the initial look.  All the squirreliness and rough edges are gone.

The features have been extended quite a bit.  They added the post relationships for linking post types together and added the query fields in the widgets for using the linked post types.  They added the search related plugins.  They also added in the ability to use dynamic data with a lot of the widgets.  As a user, it is always good to see the product being improved.  In terms of dynamic data and creating templates for CPTs, the Suite has really matured and is looking good.  I hope you found this article helpful.

Checkout the Crocoblock Suite