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

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)

f66MBkr0jrRpPBuJCuC6bzu65m C JGAcW 2IhbX6qpiUjOE1so9pGwQBMwgOwM8lgm5sLGmtvyAdcjjAKOOliYOeQvOH UomTQ 3lnb8ccWc03z42piYkYn2pVt90uKy4NhoGyqdPg9bcyczg
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’. 

W0537Z6LVadNjLCXmOqxtUQHZ9x

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)

CDXT HsITHe2pWrF5t1oPuwXhnSl5puDuR1rJrbbAF2Gj 3jH4atGyUJtzD480nPt4kQ3JXvybM98fE4A6sC07adosuzOWi3wOiWi092XwGhvVpS9yRA4uJ2IIaY5jtQ6BRprWa8kT OlyORg

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.

sYv5Uo53A1MSF w1XP16Olz1CJkVQDZf2wXDUN4OQfKZ0kN6vZ2wIk1pc92xH ZUvQa76DmaYUjaD hGTw jiONVxBAGSsSCOV fhxKyZeAJc8yGrN8cHUu ep79FldcPW7CcuzooTR7ozjC w

 When you go to Portfolio and Add New, it will show the meta fields you just added (25:08)

elyD8THMBqclx0JLVx7kPxektuhDBB9l4NeTUtVKGIiSRcZBEdijx8h58UqxV1B0LFVY4OoEWgpoKFKLdYx65TRXlp4dmYsZbycoY7sP8pRWGYVGUDfG 8jl8z

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)

4ZZd IMxsnaAfokgCNoRDvtQQVDtb

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).

zAE4RxH3Dgu pbXbSCvTb9E5i4euqDykHiZ5UaI5YXKpyVefRt7RmUpRsuuZZ9NXAKcYLfTOn6xfbCW0m1H2G7eDe FaryQTLyYxCpm5e VkLodtBOK3E gG2RX9h2VMHo6wqNhuUJ4F8aYygw

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).

FahxhamEtDQjDAPB4siwtCNxOQyKMt xEEx GlMIl

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. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

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