In this part of the dynamic web portfolio series, I’m going to be showing you how to create custom taxonomies and terms in Jet Engine.
Taxonomies help you to group or classify your content in a certain way, using terms.
To explain this in lay language;
You could have for example a Taxonomy of Houses, and under it, you could have the houses classified under flats, bungalows, condos, etc, these are the Terms.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Create a Taxonomy in Jet Engine
To get started on this:
Go to your website’s dashboard, under JetEngine > Taxonomies > Add New.
In the General Settings, go to Taxonomy Name and add Category, under Taxonomy Slug add project-category, and for the Post Type select Portfolio.
Go to Advanced Settings, scroll down and enable the Hierarchical option.
Add Custom Meta Field for your Taxonomy
Under Meta Fields click the New Meta Field button and add these details;
Label = Thumbnail
Name/ID = thumbnail
Object Type = Field
Field Type = Media
Value Format = Media ID
Description = Add a featured image for this term
Field Width = 100%
When you’re done, click the Add Taxonomy button (41:49)
When you reload your page and go over to Portfolio, the Category taxonomy will now be showing (42:00).
Click on Category to open it up and start adding new categories/terms:
Name = Branding
Slug = branding
Leave everything else on default and click the Add New Category button.
Next term;
Name = Featured
Slug = featured
Leave everything else on default and click the Add New Category button.
Repeat the steps and add the next two terms; Recent and Web Design (43:02)
And now you or your user can be able to add projects under these categories or terms to classify or group them.
You can also add a thumbnail for your category if you want.
Add Content to your Web Portfolio
Let’s now add content to our portfolio and see how well it works.
Back under Portfolio > Add New
Add the Title for the project; Sports Rise, Soccer School Inc under Client.
Under Project Type select web design and brand guideline
For Duration add 7 weeks
Add 3800 for Cost, this has to be in dollars
Under Homepage add the project URL; rise.com, and under Project Description paste in your content, remember you can be able to style it because you’re using the text editor.
Under Theme add Astra
Select Elementor page builder and Rank Math under Plugin, then select Adobe Illustrator and Figma under Software.
Under Gallery add your project images from the Media Library or upload them.
Go to Set featured image on the right and add an image
Under Category, select the Branding, Recent and Web design options.
When you’re done click the Publish button (47:16)
When you preview your changes, our content doesn’t show on the front end (47:29). This is because our current theme doesn’t understand the content.
For this reason, we need to create a single page template to display the content.
However, before doing this, we need to create a listing so that when one clicks on it they can access the project. This is what I’m going to show you how to do in the next part of the web portfolio series.
For any questions or comments about this or any other tutorial, let me know in the comments section below. Don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.
