In this part of our dynamic web portfolio series, I’m going to show you how to create meta fields in Jet Engine and add to your custom post type that you created in the previous part of this series.
Meta fields are features that extend the amount of data you can add to a specific post type. And they work in such a way that; if you’re creating a website for your client, you can add meta fields so that your client can log into the back end of the website and update data without having to mess with the layout design.
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.
For a brief recap of what was done in the previous part;
After installing and activating the Jet Engine plugin, we went to JetEngine > Post Types and added a new post type named Portfolio, with a title feature and a featured image.
Create Meta Fields in Jet Engine
Go to JetEngine > Post Types and click Edit on your Portfolio post type (15:48). In the Edit Post Type window, go to Meta fields and click the New Meta Field button (15:55)
For the first meta field;
Under Label add Client, do the same under Name/ID
Under Object Type select Field and for Field Type select Text
Under the Description, add ‘Enter the name of the client’.
Under Field Width select 33.3%
Leave everything else on default, then click the New Meta Field button to add the next meta field with these details:
Label = Project Type
Name/ID = Project Type
Object Type = Field
Field Type = Select
Click on New Field Option and add:
Option Value = Web Design
Option Label = Web Design
Enable the Is checked/selected option, then hit the New Field Option to add another field (19:20)
Option Value = Prototype
Option Label = Prototype
And for the third field option:
Option Value = Brand Guideline
Option Label = Brand Guideline
Under Placeholder text (this is the text that appears before someone selects one of the above field options), add “select an option”.
Enable the Multiple options to allow your client to choose multiple fields, and under Description add “kindly enter by selecting the options available”.
Tip:
This information does not appear on the frontend of your website, it’s just meant to guide your user when they’re entering data in the backend.
Select 33.3% under Field Width, then leave everything else on default.
Click the New Meta Field button to add the third meta field with these details:
Label = Duration
Name/ID = Duration
Object Type = Field
Field Type = Number
Step Value = 1
Description = Enter the duration of the project (weeks)
Field Width = 33.3%
When you’re done, click the Update Post Type button.
When you go to Portfolio and Add New, it will show the meta fields you just added (25:08)
Back in the Meta Fields editor, click the New Meta Field button to create the Cost meta field;
Label it Cost, do the same under Name/ID, select Field under Object Type and Number under Field Type.
Under Step value add 50, and under Description add “Add the project cost in $ equivalent ”, and under Field Width select 50%
Click the New Meta Field button to add the next meta field with these details:
Label = Homepage
Name/ID = Homepage
Object Type = Field
Field Type = Text
Description = Enter the website URL of the client/project
Field Width = 50%
Leave everything else on default then add another meta field;
Label = Project Description
Name/ID = Project Description
Object Type = Field
Under Field Type, you can either use Textarea or the Rich text editor (WYSIWYG). Select the text editor (WYSIWYG), because it enables you to format your data in the editor.
Description = Enter the project description below
Field Width = 100%
Leave the rest on default.
Click the New Meta Field button to add the next meta field for the theme used on the project:
Label = Theme
Name/ID = Theme
Object Type = Field
Field Type = Text
Description = Enter the name of the theme used
Field Width = 100%
Click the New Meta Field button to add the next meta field. For the plugins, we’re going to add a list of plugins for users to choose from, plus an option to add a custom value.
Label = Plugins
Name/ID = plugins
Object Type = Field
Field Type = Checkbox
Enable the Allow Custom option
Click the New Field Option with;
Option value = Elementor Page Builder
Option label = Elementor Page Builder
Add a New Field Option;
Option value = Rank Math
Option label = Rank Math
And another one;
Option value = WP Vivid
Option label = WP Vivid
Click the Update Post Type button when you’re done. And when you go back to Portfolio > Add New, your plugins will be showing (33:09)
Click the New Meta Field button to add the next meta field for the software used on the project:
Label = Software
Name/ID = software
Object Type = Field
Field Type = Checkbox
Click the New Field Option with;
Option value = Adobe Photoshop
Option label = Adobe Photoshop
Add a New Field Option;
Option value = Figma
Option label = Figma
And another one;
Option value = Canva
Option label = Canva
And the last one;
Option value = Adobe Illustrator
Option label = Adobe Illustrator
Tip:
You can rearrange your field options to appear the way you want them to. To do this just click the hamburger icon (☰) and drag, for example, the Adobe Illustrator field to be just below Adobe Photoshop (35:03).
Click the New Meta Field button to add the next meta field for the gallery:
Label = Gallery
Name/ID = gallery
Object Type = Field
Field Type = Gallery
Value Format = Media ID
Description = Select your media files to show in the gallery
Field Width = 100%
And with this, we’re done adding the meta fields. Click the Update Post Type button then back to Portfolio, reload the page and preview your meta fields (37:03).
In closing
That’s how you can create meta fields for your custom post types using Jet Engine.
In the next part of this series, I’m going to show you how to add a custom taxonomy and then add content to our website.
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.