Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

Dynamic Web Portfolio Series (3/9): Create Meta Fields in Jet Engine

Dynamic-Portfolio2

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)

Create Meta Fields in Jet Engine

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.

Also Read. . .

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

Elementor is the WordPress most popular page builder with over 10 million active users

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG