Best Plugins for WordPress Meta Box

wordpress meta box featured image

WordPress uses a powerful and flexible framework that has wonderful features to help users create a website easily and quickly. WordPress provides necessary features for creating and editing content, but perhaps for a lot of websites, we need to add more information or data. In this situation, WordPress provides a Meta Box feature.

What is a WordPress Meta Box?

WordPress Meta Box is a group of custom fields which allows you to add more information to posts, pages and custom posts types. You can add custom meta boxes via custom codes in your theme/plugin, or use one of the following plugins for easier and faster workflow.

In this article, let’s cover three of the most popular WordPress Meta Box plugins.

Create WordPress Meta Box with Advanced Custom Fields Plugin

WordPress Meta Box 1

Nowadays, this Advanced Custom Fields is the most popular plugin for creating custom fields. The visual builder allows you to add fields to WordPress edit screens conveniently. Furthermore, with the builder, you can add fields all over your WordPress website including posts, pages, user, media, comments, and taxonomies.

Features

  • Simple & Intuitive
  • Powerful Functions
  • Over 30 Field Types
  • Extensive Documentation
  • Millions of Users

Field Types

  • Basic (Text, Text Area, Number, Range, Email, Url, Password)
  • Content (Image, File, Wysiwyg Editor, oEmbed)
  • Choice (Select, Checkbox, Radio Button, Button Group, True / False)
  • Relational (Link, Post Object, Page Link, Relationship, Taxonomy, User)
  • jQuery (Google Map, Date Picker, Date Time Picker, Time Picker, Color Picker)
  • Layout (Message, Accordion, Tab, Group)

Creating a WordPress Meta Box

Now that you have some information about Advanced Custom Fields plugin, it’s time to create four fields for an author of a post, then add the fields to the end of the post edit screen.

Author fields

  • Author age
  • Author profession
  • Author hobby
  • Author wish

1. From the left sidebar of WordPress admin menu, click on Custom Fields > Add New.

WordPress Meta Box 2

2. Click on the Add Field button for creating fields.

WordPress Meta Box 3

3. Fill out the Field Label, Field Name, Field Type and other fields based on your needs.

WordPress Meta Box 4

4. Add three other fields similar to the above step then click on Publish/Update button.

WordPress Meta Box 5

For showing the created fields in the edit post screen, configure the Location settings as shown below.

WordPress Meta Box 6

6. Edit a post to see the fields.

WordPress Meta Box 6

7. For showing the value of these fields, read this article about displaying values in your theme.

Useful Resources:

Awesome ACF lists many extensions for this plugin. For this article, let’s mention some of them.

Admin Columns allows you to display ACF custom fields for posts (post meta) and users (user meta) as columns on your list overview.

Automatically generates the code you need to implement ACF fields in your themes.

Add a Font Awesome icon field type to Advanced Custom Fields.

Allows you to add a Date and Time Picker field type.

Create flexible and developer-friendly forms using the power of Advanced Custom Fields.

Create a WordPress Meta Box with Meta Box plugin

WordPress Meta Box Plugin

Another powerful and lightweight plugin for creating unlimited custom fields is Meta Box. with this plugin, we can add custom fields to post, page, forms, etc. Furthermore, this plugin has over 40 field types.

The free version of Meta Box Plugin doesn’t have an admin page in WordPress dashboard. For creating a meta box, you need to use an Online Generator tool. This tool generates necessary codes to register a meta box in your child theme.

Features

  • Supports 40+ custom field types
  • Powerful options for custom fields
  • Lightweight and well-coded
  • Developer friendly

Field Types

  • Input fields (Text, Number, URL, Email, Range, Text List)
  • Basic fields (Checkbox, Checkbox List, Button, Password, Radio, Select, Select Advanced Textarea, Hidden, Image Select)
  • Advanced Fields (Color Picker, OEmbed, Slider, WYSIWYG, Autocomplete, Fieldset Text, Map, Heading, Divider)
  • Date & Time Fields (Date, Date-Time, Time)
  • WordPress Fields (Post, Taxonomy, Taxonomy Advanced, User)
  • Media Fields (HTML File, File Input, File Advanced, Image Advanced, HTML Image, Video)

How to Create a WordPress meta box

Now, it’s time to create four fields for an author of a post in Meta Box plugin.

Author Fields

  • Autor Phone Number
  • Autor Email
  • Autor Birthday
  • Autor Site Address

1. Go to the Online Generator tool.

2. In the General tab, set the Function Name and Text Domain.

3. In the Meta Box tab, set the ID and Title of your meta box. Configure the other options to show the meta box at an appropriate place.

4. In the Fields tab, create the fields as explained below:

Field 1: Create Field with Number Type and set ID to author_phone_number and NAME to Author Phone Number.

Field 2: Create Field with Email Type and set ID to author_email and NAME to Author Email.

Field 3: Create Field with Date Type and set ID to author_birthday and NAME to Author Birthday.

Field 4: Create Field with Url Type and set ID to author_website and NAME to Author Website.

5. For generating codes, click on the Generate button. Click on the Copy link to copy codes to the clipboard.

6. Go to Function.php of your child theme then paste the codes and save it.
7. Edit a post to see the fields.

8. For showing the value of these fields, read this article about displaying fields.

Useful Resources:

The Meta Box website has a dedicated page for extensions. For this article, let’s mention some of them:

Create and manage custom post types and taxonomies quickly with an easy-to-use interface.

Pull all meta values from posts and terms into the WP REST API responses.

Create and manage custom taxonomies in WordPress with a user-friendly interface.

Add WordPress custom fields to comments in WordPress. It supports all field types and options.

Create WordPress Meta Box with Pods plugin

WordPress Meta Box Pods Plugin

Pods is a framework to manage all your custom content needs in ONE location. This plugin allows you to create and edit custom post types, taxonomy, fields, and even extend existing WordPress objects like users, media, posts, and pages.

Features:

  • Create a type of content in WordPress
  • Extend existing content types
  • Different field types and build your own with extensible field type classes
  • Importers to help your transition from other plugins

Field Types

  • Date / Time (Date, Time, both)
  • Number (Plain Number, Currency)
  • Text (Plain Text, Website, Phone, E-mail, Password)
  • Paragraph Text (Plain Paragraph, WYSIWYG, Code)
  • Color Picker
  • Yes / No
  • File / Image / Video
  • Avatars
  • Relationships

Create a WordPress Meta Box

Now, let’s add a meta box with some author fields in WordPress pages.

Author fields:

  • Author age
  • Author position

1. From the left sidebar of WordPress admin menu, click on Pods Admin > Add New.
2. In the new screen, choose Extend Existing.

3. Set content Type to Post Types (Posts, Pages, Etc) and Post Type to Pages then click on Next Step.

4. Add a Text field type and set the label to Author Age then set Name to author_age.

5. Add a Text field type and set the label to Author Position then set Name to author_position. Click on Save Pod button to save your fields.

6. Edit a post to see the fields.

Useful Extensions:

Pods plugin is a developer-friendly framework so some developers develop extensions to enhance the plugin. For this article, let’s mention some of them:

Easily select Pods fields in Beaver-Themer field connections from a dropdown based on the currently displayed item (CPT).

This extension provides the ability to sync entries from a Form Submission and Entry Edit screen.

This extension provides optimal performance with Pods sites on hosts with no object caching or low limits.

Conclusion

In this article, we introduced three plugins to help you to create, manage and extend WordPress Meta Box easily and quickly. The ACF plugin is the most popular plugin at the moment. Some popular themes like Jupiter X rely on ACF to manage the Meta Box and custom fields.

There are also some other plugins in the WordPress Community for managing Meta Box. Feel free to share your favorite one with us in the comment section!

How to Create Custom Search Results Page via Jupiter X

Customizing the search page is one of the biggest concerns for web designers. When it comes to WordPress, you need to modify your search page template in order to customize your search results. But what if you had the ability to customize your search results in a blink of an eye with a set of premade options?

Jupiter X uses a default search results page which mimics post archives. This is controlled in the theme by the jupiterx/lib/templates/fragments/search.php template file. There’s no option to create a custom template for a search results page, but you have the capability to customize the page with some settings.

By default, when users search for something on your website, it displays the results from all of the post types such as posts, pages, portfolios, and products. But, you may want to filter the search results in your website and show the results from just a specific post type like posts or pages.

It’s especially useful in e-commerce websites when you want to show particular products in the search result page. You can even specify how many posts should be shown per page. Let’s see how easy it is to create a custom search results page via Jupiter X.

Create Custom Search Results Page via Jupiter X

1. From your WordPress left menu, go to Jupiter X > Customize.

Create Custom Search Results Page via Jupiter X 1

2. Select the Pages option.

Create Custom Search Results Page via Jupiter X 2

3. Choose Search, then a new window will show up with the Search settings.

Create Custom Search Results Page via Jupiter X 3

By Disabling/Enabling the post types from the Display section, you can customize the search results. You can change the number of posts per page as well.

Create Custom Search Results Page via Jupiter X 4

4. Close the Search settings panel and then Publish the changes.

Editing Search Result Text

  • Using Poedit software

When you check the search results page, you may want to edit or translate some titles like “Search Results for:”, “New Search”, etc.

Create Custom Search Results Page via Jupiter X 5

It can be done with the Poedit software, which is used for translation. You can read more about Poedit in the article “Translating the theme”.

Just create a .po file as described in the linked article above and name it with your language prefix. If you want just to edit the text in English, you need to name the file en_US.po. This way, you’ll be able to edit any Jupiter X text in the English language.

  • Using the child theme

Another way to override default text is to make changes in the child theme. You’ll need to override the functions of the necessary titles.

You can edit the files through your WordPress dashboard in Appearance > Editor.

1. Look for the file search.php in the parent theme jupiterx/lib/templates/fragments directory.

2. Copy the function name, for example, jupiterx_new_search_title_text if you want to change the text “New search” on a search results page.

Create Custom Search Results Page via Jupiter X 6

3. Go to the child theme folder and open the file functions.php and add this code:

add_filter( 'jupiterx_new_search_title_text_output', function() {

   return 'Some new text of yours';

} );

4. Save the file, and you’re done. The changes will be visible on the frontend.

You can do the same with other functions you find in the file. For example, to change the subtitle text, you can use the same code. Just edit the function name to the one you need, e.g. jupiterx_new_search_subtitle_text for the subtitle, and the code will be:

add_filter( 'jupiterx_new_search_subtitle_text_output', function() {

   return 'If you are not happy with the below results, you may try another keyword.';

} );

Adding a Sidebar on a Search Results page

You can also add or remove the sidebar when you create custom search results page via Jupiter X. To do this, you’ll need to edit Sidebar section in Jupiter X > Customize. You can get comprehensive instructions about how to add a sidebar in this article. It will be applied to all pages, but if you want to add or remove it only for the search result page, do the following:

  1. From the WordPress left dashboard, go to Jupiter > Customize.
  2. From the Customizer left dashboard, go to the Sidebar menu.

In the Sidebar popup, there’s an Exceptions setting which allows you to edit the sidebar for different post types, such as Page, Blog, Search, Shop, Archive, and Portfolio. In our case, we’ll select Search as an exception and configure the sidebar settings to the ones you need.

For how to add widgets to sidebar areas, refer to the article “Adding widgets to a sidebar”.

Customizing Your Search Results Page is Quick and Easy with Jupiter X!

In this article, we learned how we to create custom search results page via Jupiter X. To reiterate, you can customize the search to include/exclude different post types and also change the number of items in the result page. We also explained how to change the text using translation plugins and in the end, we overviewed how we can modify the search page using the powerful Jupiter X API.

In general, with the Jupiter X API, there is nothing you can’t customize. In future posts, we will go through some approaches on how you can easily add or edit some sections using Jupiter X API.

Enjoy A Free Event Website Template From Jupiter Today!

March is the perfect time to start planning out your events. Whether you’re putting together a social, professional, or corporate event, mapping them out for this year is an important task. Why? Because it gives you enough time to prepare for each one – which, to be honest, is crucial. If you don’t get to prepare well for your activities, it might turn out as a bad experience for you and your guests.

Continue reading

Free Designer Website Template: Now Available for Download

How about a free online portfolio for your art or a well-designed website for your architectural firm? Unleash your creative juices and be ready to design and more with this 100% FREE Designer website template by Artbees.

Well, unlike any other template for designers and artists, this induces a very light and contemporary overall vibe. It sets a tranquil mood that helps visitors appreciate your artful creations even more. What makes it more exciting is that it’s totally free!

Plus, you can download the PSD files and you can customize the template without ever having to write or edit a line of code. So why hesitate, right?

Simplicity and art combined!

This newest addition to Jupiter X’s roster of outstanding website templates is all about simplicity and art. It’s a one-page template that mainly uses a monotonous, earthy color combination that blends well with lines and vectors.

At the very onset, you’ll notice the sample title written in a very meek and bold style with the logo on the upper left. The placement of sub-headers suggests a professional and spacious look. There’s no navigation menu so your website visitors will stay focused on the visual appeal of your art.

The whole background is white in color and has many gray lines forming geometric shapes with an unassuming 3D effect. This sleek background helps to accentuate and showcase the photos of your beautiful creations!

As you scroll, you’ll get to see some well-photographed HD images and an image slideshow, perfect for your design portfolios. There’s also a spot for a video player wherein you can showcase your tutorials, reviews, how-tos and any other topics related to your art.

Lastly, a website is not a website without a contact form – how else can your fans or potential clients contact you? It’s always best to have a channel to build connections and nurture relationships. Social media buttons are also present at the bottom of the template where visitors can engage and keep in touch with you outside of your respective website.

This is undoubtedly a good one — perfect for artists and craftsmen who don’t want to put too much time and effort into building their website. With this free Designer website template, you can set up your website in just an hour. It’s truly simple and hassle-free!

This is for you!

The key features and unique elements of this free Designer website template are created primarily for those who have a great love for arts, crafts, and design. People and businesses that can take advantage of this free offering are architects, painters, graphic designers, DIY crafters, calligraphy artists, design firms, structural agencies, and many others.

Wrap Up!

Wait no more and try this out! Spare yourself from paying dimes for expensive website templates and take hold of this amazing opportunity. Feel free to share with us your experience.

Build your digital portfolio and showcase your artful creations. Get to know what this free Designer website template for Jupiter X can do for you.

[abb_downloads file_type=”free_file” title=”Download Designer Template” tweet_text=”Enjoy the free Design webpage template from @artbees_design! Download here: https://bit.ly/2LtykPW #FreeJupiterWPTemplates”]

To enjoy more than 160 advanced templates that are already coded with the highest standards, download Jupiter WordPress Theme!

[call_to_action title=”Download Jupiter WordPress Theme Now” target=”_blank” url=”https://themeforest.net/item/jupiter-multipurpose-responsive-theme/5177775?utm_source=DesignerFreeJupiterWPTemplate&irgwc=1&clickid=Q3XVRp27-Vd-W5SUr%3AxaIR5HUkg0Z4yRFRdWRY0&iradid=275988&irpid=27795&iradtype=ONLINE_TRACKING_LINK&irmptype=mediapartner&mp_value1=&utm_campaign=af_impact_radius_27795&utm_medium=affiliate&utm_source=impact_radius” type=”link”]

***Important Note: Artbees free templates cannot be sold or distributed as it is — only derivative works for end users can be sold.

How to customize your portfolio list with Jupiter X

A portfolio is an essential section in your website for building your professional brand and getting more business to come in. A good-looking portfolio can open a lot of doors to meeting (and impressing) potential clients. Often, you can make a great first impression with your site visitors after viewing your online portfolio, so creating a powerful portfolio page can be extremely crucial to the future of your business.

A decent portfolio must cover a lot of bases. Apart from actually showcasing your work, the text alongside each piece must give the right level of context. Not only that, but it must also be designed well enough to catch people’s attention without shifting focus away from the work itself.

Making a portfolio attractive, organized, and easy to maintain can be challenging, and Jupiter X does just that. Jupiter X helps you create a unique and beautiful portfolio that looks stunning on all devices and screen sizes, in a matter of minutes.

Jupiter X uses the Raven Posts element for creating and displaying Portfolios with Elementor. The Posts element allows you to display posts from Portfolio post type. It also offers many features such as layout, filter by categories, pagination styles, and more. You can also change the featured image size, set excerpt length and change “Read More” button text and other settings.

When you create and customize your portfolio list with Jupiter X, you can:

  • Show/Hide portfolio meta elements such as Featured Image, Title, Category, Excerpt, etc.
  • Show/Hide Portfolios based on Portfolio Name, Category, or Tags.
  • Define the number of columns and rows of portfolios in the list and the space between rows and columns.
  • Enable/Disable pagination option.
  • Enable/Disable portfolio Sorting.
  • Show Portfolios in two layouts — Grid and Masonry.

In this article, we will guide you step by step through learning how you can customize your portfolio list with Jupiter X by a practical example. But before customizing the Portfolio List page, you must create it.

Creating a single Portfolio Post

  • From your WordPress left menu, go to Portfolios and click on Add New.
  • Enter a title and click on Edit with Elementor button or use default WordPress editor to add your content to a post.
customize your Portfolio List with Jupiter X 1
  • Add the needed content to your post.
  • Publish the post and check the result.

Note: If you don’t see Edit with Elementor button in the Portfolio Post editor, you need activate it in Elementor > Settings as described in this article.

After adding portfolio posts, the next step is to add a Portfolio list page by Creating a custom Portfolio page. In order to display the content of the Portfolio post type in your Elementor’s layout:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

customize your Portfolio List with Jupiter X 2

3. From Elementor’s left dashboard, drag and drop the Posts widget into your layout so that a new panel will open on the left side of Elementor with the element’s specific settings.

customize your Portfolio List with Jupiter X 3

4. From the Content tab and within the Content section, set the Source of the posts to Portfolio

customize your Portfolio List with Jupiter X 4

5. Update the page.

Customizing Portfolio List with Posts widget

After creating Portfolio Page, you will be able to customize your portfolio list with Jupiter X Raven Posts widget. To modify the portfolio list you’ve created:

1. From the WordPress left dashboard, go to Pages > Portfolio Page > Edit with Elementor. A new dashboard on the left will open with the element’s settings.

Settings  

Here are the all available options in Raven Posts Widget Content tab:

You can show/hide the element parts in the settings. Here is the list of things you can show or hide on the Posts element:

  • Feature Image
  • Post Title
  • Categories
  • Author
  • Date
  • Comments
  • Excerpt
  • CTA Button
  • Pagination
  • Sortable

When you show/hide these options in settings, they will automatically show/hide in the Style tab.

Styles

Here is the description of all available options for styling elements which can be found in the Styles tab by clicking on Customize for a specific element.

There are also general settings for the options that you enabled in the “Content” tab in the Settings section:

  • Feature Image
  • Post Title
  • Meta
  • Excerpt
  • CTA Button
  • Pagination
  • Sortable

Case Study

Let’s pretend that we want to create a Portfolio List page with 2 columns and 6 posts per page (demo is shown below). Your Sortable option should be enabled as well to sort the portfolios based on Portfolio Categories.

Here’s what you can do:

1. Create a Portfolio List page as described before.

2. Go to WordPress left Menu > Pages > Portfolio Page > Edit with Elementor.

It would look like this:

customize your Portfolio List with Jupiter X 6

3. Edit the Raven Posts Element, and in the Content tab set the Skin to Outer Content, while in the Settings Tab, let’s customize the following Settings:

  • Layout: Grid
  • Image Size: Full
  • Title HTML Tag: H3
  • Hover Effect: None

We also enable the Featured Image, Post Title, Category, Excerpt, Category, and All Title Options.

customize your Portfolio List with Jupiter X 7

4. It’s time to style the elements you’ve enabled for portfolio posts. So, navigate to the Styles tab. You can see all the available items you can customize there.

Let’s start with customizing the Container:

  • Column Spacing: 20px
  • Row Spacing: 20px
  • Font Weight: 700
  • Border: Solid
  • Border Width: 1px
  • Color: #eaeaea

Leave the Padding, Alignment and Background color, Border Radius and Box Shadow as they are.

customize your Portfolio List with Jupiter X 8

Featured Image

  • Image Ratio: 0.63
  • Image Width: 100%
  • Image Position: top
  • Opacity: 1
  • Hover:
  • Overlay Color: rgba(27,188,155,0.63)

Leave other Featured Image Style options as it is.

Post Title

  • Typography:
  • Font Family: Roboto; Size: 14px; Weight: 700;
  • Spacing: 0 0 0 15px
  • Color: #00bc9600bc96

Leave other Post Title Style options as it is.

Meta

  • Typography:
  • Font Family: Roboto; Size: 14px; Weight: 700;
  • Spacing: 15px 0 0 0
  • Links Color: #d6d6d6

Leave other Meta Style options as it is.

Excerpt

  • Excerpt Length: 30
  • Typography:
  • Font Family: Roboto; Size: 14px;
  • Spacing: 0 30px 18px 15px
  • Color: #888888

Leave other Excerpt Style options as it is.

Sortable

  • Container Spacing: 50px 0px 50px 0px
  • Spacing: 10px
  • Padding: 14px 16px 14px 16px
  • Alignment: Left
  • Color:
    • Normal: #323232, Active: #323232, Hover: #1bbc9b
  • Background Color:
  • Normal:None, Active: rgba(0,0,0,0.08), Hover: None
  • Typography:
  • Font Family: Roboto; Size: 14px; Weight: 700;

Leave other Sortable Style options as it is.

5. After you’re done with all the customizations, simply publish or update the page. The page should now look like this:

Summary

In this article, we’ve explained how you can create and customize your  Portfolio List with Jupiter X. Are you ready to wow your site visitors with your own portfolio page?

How to Add Amazing Visual Effects to Your Content with Jupiter X

Visual effects such as parallax, sticky elements, unfolding contents, hotspots, web particle animation, and more. are helpful in almost every kind of website. E-commerce websites, for instance, can present their products better with hotspots on product images.

Landing pages can tell better and shorter stories – which translates to less bounce rate – with sticky elements or unfolding content. Parallax effect is also quite handy when creating eye-catching content. Normally, you would spend extra for different plugins. But with Jupiter X, they are all included for free in one plugin called JetTricks.

Add Amazing Visual Effects to Your Content with Jupiter X 1

Different Ways to Add Amazing Visual Effects to Your Content with Jupiter X

To make your content more useful and interesting to read, the rich library of visual effects available in JetTricks plugin is at your disposal. There are numerous cases where you can use these effects, but here are some of them:

1. Parallax effect is everywhere and it can be used to add a 3D depth to your content. Use it to create your static pages more dynamic and captivating! Parallax Effect Demo

2. Sticky elements are great in creating a custom scrolling experience. Make an important part of your content fixed while the rest scrolls down. Sticky Elements Demo

3. Unfolding columns and view more content effects are what you see in most introductory landing pages. Offering a long description does no good to your page bounce rate. By hiding a chunk of it and make a section optional to read, you can make your pages more effective. Unfolding column demo and View more content demo

4. Hotspot on images is a great addition to your online shop. You can also use it for more descriptive and interactive images across your website. Hotspot on Images Demo

5. Your pages don’t have to be boring. Add some smooth loop animations to your page backgrounds or banners to grab the attention of your site visitors and keep them interested. Loop Animations Demo

6. Use tooltips to create more informative yet less crowded pages. Perfect for eCommerce and product landing pages. Tooltips Demo

Easy Customisation

Working with visual effects in JetTricks is as easy as using Elementor editor! Every change you make is instantly available for preview and deeply customizable. There are also limitless possibilities and combinations you can try when you add amazing visual effects to your content with Jupiter X.

Add Amazing Visual Effects to Your Content with Jupiter X 2
You can use any JSON code to create particles with unlimited characteristics.

How it works

Jupiter X comes bundled with the JetTricks plugin for free. It’s deactivated by default, but you can activate it via the plugin manager in your Jupiter X control panel. When activated it, adds its settings to the existing Elementor elements such as columns, heading, an image, or completely new elements such as view more element and unfolding element.

So, what are you waiting for? You can now add amazing visual effects to your content with Jupiter X, so start vamping up your site today.

Documentation

Meet Jet Engine! Your New Super Power To Create Custom Post Types With Jupiter X

One of the key factors when assessing a WordPress theme’s customizability is the number of post types it offers to its users. Post types enable you to build different types of content on your website. Literally, everything you build into your website should be hosted by a post type.

Posts, pages, and attachments are some WordPress native post types that are readily available upon WordPress installation. Based on the WordPress theme you use, you may have custom post types to create a wider range of content on your website. Some of the usual custom post types themes offer are portfolio, employees, testimonials, client, products, and sliders.

The Problem with Pre-built Custom Post Types

Custom post types are usually built into a theme’s core. It can increase the theme’s size and affect its speed and performance. You may have come across themes that offer custom post types you never use. You may have noticed that they just occupy some space in your WordPress dashboard navigation and reduce your websites admin’s speed. And this is one of the reasons the most customizable themes are the slowest ones, too!

So, is it possible to think about ultimate customizability with an infinite number of post types without affecting the theme’s speed and performance?

YES! Jupiter X, for the first time, turned many of the features that are commonly offered as post types to elements to save users a lot of time and effort. So, instead of creating posts in the WordPress dashboard, you can visually create elements such as employees, clients, and testimonials within Elementor and see the results in real-time.

Your WordPress dashboard sidebar is now free of post type items. You can activate the plugins like Raven and JetElements to access these elements only if you need them. If you don’t need them, you won’t have to import them and you can enjoy your theme at its highest performance.

Is that all?! Are we bound to elements and post types that Jupiter X offers?!

I’m happy to say ‘NO’ this time! 😀 Jupiter X recently added another member from the great Jet plugins family to the arsenal of plugins it offers to its users for free: JetEngine!

What is JetEngine?

JetEngine enables you to create new post types, taxonomies, and custom fields without any programming experience. You are no longer limited to post types built into your theme. You can simply build your own post type, add custom meta fields, customize its appearance and layout, and use them wherever you want.

Imagine: You don’t like the Team Member element in Jupiter X elements library to showcase your team member or you have a wide range of services with special meta fields and design needs. Or let’s say you want to build a website for a client with a wide range of products and you don’t want to add all of the content by yourself. You can simply create custom post types with Jupiter X and use them in your or your client’s website.

What’s more is that there is no coding involved and you will create the custom post types using Elementor page builder, for which you formerly needed to have good PHP skills!

What does JetEngine offer?

JetEngine offers special widgets for pulling dynamic content from the posts and displaying them in your custom post types.

Dynamic field

Display the meta content from a defined source and customize its appearance however you want.

Dynamic image

Display dynamic featured images in your custom post type and customize its appearance.

Dynamic repeater

Display dynamic repeaters in your custom post types using a defined source and enjoy infinite customizability.

Dynamic link

Add dynamic links to any custom post type.

Dynamic terms

The best way for showcasing dynamic taxonomies added to any posts or pages when creating a template with Elementor is using Dynamic Terms widget, that’s specifically cut for these purposes.

Dynamic meta

Display the publication date, information about the author, and/or the number of comments by adding Dynamic Meta widget to the template.

Listing grid

Use eye-catching Grid, Masonry and Justify layouts to display custom posts types and customize its appearance the way you want.

How to create custom post types with Jupiter X?

Let me quickly summarize how to create custom post types with Jupiter X. For a custom post type you need to create:

Post type

From the WordPress navigation bar, try:

JetEngine > Post Types > Add New

In the upcoming page, set the general settings about the custom post type first. For example, if you want to set this post type to public or private, change its appearance in WordPress navigation, or choose the sections you want to be available in the single page, and so on.

Then, you should define the meta fields you want in your custom post type. This can be a custom text, date, time, media, selector, or many other things.

A listing that uses that post type

Second, you need to create a listing in which your post type will be used. For that, try:

JetEngine > Listings > Add New

You can choose the post type you just created and then give its listing a name. Then, click on ‘Create Listing Item’

You will then be taken to the Elementor editor mode where you can create the layout of the listing for your post type however you want, just like your usual building experience with Elementor.

And that’s it! You just created a custom post type with the meta options you wanted and then created a listing where that custom post type can be used. You can now call your custom post inside your page using Listing Grid element:

You can define up to 6 columns for your listing grid within the Listing Grid element.

How to create custom post types with Jupiter X?

In this short post, we introduced the JetEngine plugin and showed you how to create custom post types with Jupiter X. If you want a more thorough explanation of the plugin, you can check the official documentation as well as the video tutorial below. Have fun and let me know if you have any questions regarding this new Jupiter X power ball!

How to create custom 404 pages with Jupiter X

Sometimes, when we surf the internet, we encounter a 404 page (Page Not Found). But, what exactly does it mean? A 404 page is displayed when we want to see a page that does not exist. We may follow a broken link or type an incorrect link so the server responds to the browser request with an HTTP 404 code, hence, we see a 404 page.

For all Content Management Systems (CMS) and websites, there’s a default 404 page that’s displayed on appropriate situations. In this article, we’ll show you how to create custom 404 pages with Jupiter X, and how to improve and customize them the best way.

Key points to have a better 404 page

We can add some helpful sections in a 404 page to improve the usability of the page. In this article, we’ll show you how to optimize sections of your 404 page. Here are some of the things you can do:

  • Display recent posts/portfolios
  • Add a call to action button
  • Add a search form

How to customize default 404 page

Jupiter X is backed by an extremely powerful API for customizations. For developers, it offers lots of opportunities to customize the look and feel of different sections of Jupiter X. Let’s explore some ideas on how to customize Jupiter X’s default 404 pages in a child theme.

We must add our codes in the functions.php file of the child theme. All the codes need to be added inside the following function so that it will only affect the 404 pages.

/**
 * Modify the 404 page.
 */
add_action( 'wp', function() {
    if ( ! is_404() ) {
        return;
    }

    // Add codes here.
} );

By default, the 404 page looks like the one below. Later, at the end of the section, you can see the customized one, after some tweaking.

how to create custom 404 pages with Jupiter X 1

Remove sections from page

Because not all 404 pages require a header, footer and title bar. We can clean the page by removing them.

…

// Remove header.
jupiterx_remove_action( 'jupiterx_header_partial_template' );

// Remove title bar.
jupiterx_remove_action( 'jupiterx_main_header' );


// Remove footer.
jupiterx_remove_action( 'jupiterx_footer_partial_template' );

…

Change the title and description

Almost all of Jupiter X’s texts are changeable via the API. For this page, let’s change the title and description.

… 

// Change title.
add_action( 'jupiterx_no_post_article_title_text_output', function() {
    return 'Ooops! page not found.';
} );


// Change description.
add_action( 'jupiterx_no_post_article_content_text_output', function() {
    return "We can't seem to find the page you're looking for.";
} );

…

Change layout

There are also different layouts in Jupiter X. In this case, let’s set the page to full width.

…

// Remove the sidebar.
add_filter( 'jupiterx_layout', function() {
return 'c';
} );

…

Add a graphic

Graphics play an important role to get the site visitor’s attention, so why not use a nice 404 graphic in our custom 404 page? This graphic is downloaded from the Drawkit website.

But first, we need to add the graphic to the child theme, so we can add it under the assets/img folder. If the img folder is missing, you can easily create it yourself. 

how to create custom 404 pages with Jupiter X 2

Now, we can add the graphic to the 404 page.

… 

// Add the graphic before the title.
add_action( 'jupiterx_post_title_before_markup', function() {
        echo '<img class="jupiterx-child-custom-404-graphic" src="' . 
get_stylesheet_directory_uri() . "/assets/img/error-404-colour.svg" . '"
 alt="Custom 404 graphic" />';
    } );

…

Add some styles

The styles and scripts can easily be added in the child theme. To improve the design, we can add some CSS codes in assets/less/style.css

.error404 {
   text-align: center;

   .jupiterx-main {
       background-color: #f3f2f2;
   }

   .jupiterx-main-content .row {
       height: 100vh;
       align-items: center;
   }

   .jupiterx-content {
       max-width: 700px;
       margin: 0 auto;
   }

   .jupiterx-child-custom-404-graphic {
       max-width: 500px;
   }

   .jupiterx-post-title {
       margin-top: 2rem;
   }
}

How to create a 404 page in Elementor

Elementor allows us to build any layout so let’s use it to create a custom full width 404 page. The final page will look like the following image.

how to create custom 404 pages with Jupiter X 3

Create a new page

1. Create a new page from Pages > Add New menu in WordPress left sidebar then publish the page

how to create custom 404 pages with Jupiter X 4

2. In the page, set the Template to Elementor Canvas from Page Attributes. Update the page and click on Edit with Elementor button.

how to create custom 404 pages with Jupiter X 5

Add a new section in Elementor

1. Add a new Section and select the first structure.

how to create custom 404 pages with Jupiter X 6

2. Edit the section. On the Layout tab, set the following settings.

how to create custom 404 pages with Jupiter X 7

3. On the Style tab in the Background section set the following settings. You can download the image from Unsplash site for free.

how to create custom 404 pages with Jupiter X 8

Add headings in Elementor

1. Add a Heading element. On the Content tab, set the following settings.

how to create custom 404 pages with Jupiter X 9

2. On the Style tab, set Color to rgba(255,255,255,0.58).

3. On the Style tab, set Typography settings as follow.

how to create custom 404 pages with Jupiter X 10

4. Add other new Heading elements. Add the following text to in the Content setting:

– Oops, we can not find the page you are looking for

5. On the Style tab, set Text Color to #ffffff.

6. On Advanced tab, set the following settings.

how to create custom 404 pages with Jupiter X 11

7. Add other new Heading elements. Add the following text to in Content setting:

– You may have mistyped the address or the page may have moved.

8. On Style tab,set Text Color to #ffffff.

9. On the Style tab, set Typography as follow.

how to create custom 404 pages with Jupiter X 12

10. On the Advanced tab, set the following setting.

how to create custom 404 pages with Jupiter X 13

Add a call to action button in Elementor

1. Add a Button element to page.

2. Edit the Button. On the Content tab in the Button section set the following settings.

3. On Style tab in Button section, set Text Color to #ffffff, set Background Color to rgba(153,76,0,0.53) and set Border Color to #e2574d then set the following settings.

Add recent posts/portfolios in Elementor

1. Add a Posts element from Raven elements to page.

2. Edit the Posts. On Content tab set the following settings.

3. On the Style tab in Post Title section, set the Color to #ffffff then set the following setting.

4. On Style tab in Excerpt, CTA Button sections, set Color to #ffffff.

Update the page

We are done with the custom 404 page, let’s update the page to save our changes.

How to assign custom 404 page in the customizer

To assign our page in customizer goes to Appearance > Customize in the left sidebar of the WordPress admin page.

1. In Customizer click on Pages.

In a new section click on 404 menus to open a popup, in the popup on Setting tab choose your page on Template dropdown.

3. Click on Publish button on top of Customize page.

NOTE: If you can’t see your page in Template dropdown perhaps you have not published your page. Go back to your page and hit the Publish button.

Common Issue

There are some common issues in WordPress 404 pages. In this section, we explain an issue and its solution.

Posts/pages returning 404 error

The problem may be related to permalinks cache. To fix the issue go to Permalinks settings (WordPress Admin > Settings > Permalinks) then click on the Save Changes button. In most cases, it solves the issue.

Conclusion

In this tutorial, we explained how to create custom 404 pages with Jupiter X in Elementor. In customizing default 404, you learned how to use Jupiter X actions and filters to modify HTML, attributes, and texts. In creating a custom 404 page via Elementor, we learned some features of Elementor and assigning the page in Jupiter X. If you have any questions please let me know in the comment section below😉

Meet JetTabs! The Best Way to Organize Your Content

Jupiter X comes with a great page builder named Elementor and it has powerful features that let you create advanced layouts and designs. But unfortunately, it lacks one hell of a feature: Nested elements inside the tabs and accordions.

If you’re not using Jupiter X, you will have to design the complex layouts inside your tabs and accordions using HTML and CSS, and put the code directly inside the tab or accordion content.

Fortunately, we came up with the best way to organize content with Jupiter X. You can now benefit from a bundled plugin called Jet Tabs, which adds the following features to your website — totally free of charge!

  • Accordion ( Advanced Accordion lets you add complex layouts inside its content)
  • Image Accordion
  • Switcher (Toggle between two complex contents)
  • Tabs

All of these elements are capable of showing and/or hiding part of your content. Indeed, it’s the best way to organize content for seamless user experience. Now, let’s take a closer look.

JetTabs is a premium plugin that’s free to use for Jupiter X users. It’s good to know that all of the elements added to your website when you install this plugin (except the Image Accordion) will use the Elementor Block Templates, which is also free in the standard version. You don’t need to pay for the Elementor Pro to benefit from it.

Accordion

Not to be confused with Elementor’s Accordion, this element is Classic Accordion. Classic Accordion widget is the perfect tool for adding content templates built with Elementor or adding your text to every accordion item. You can use this widget in your FAQ page or show the long text content in a more appropriate way.

After adding the classic Accordion element, you can add your items, titles, and icons then set the active element.
For adding the accordion items content, you can add simple text or tabs. It’s also possible to set a section template as accordion content.

In General, the process involves creating your complex content in a block template using Elementor, then assigning the template to the accordion items in the Classic Accordion Settings.

Check out the JetTabs documentation to get more information about the best way to organize content with Jupiter X.

[call_to_action title=”Jet Tabs Documentation” target=”_blank” url=”http://documentation.zemez.io/wordpress/index.php?project=jettabs&lang=en&section=jettabs-widgets” type=”link”]

Image Accordion

Image Accordion is a fancy element that lets you showcase your content or categories in a stylish way. You can also use this element to highlight your gallery categories, and so on.

You just need to add the Image Accordion element your page. After that, you can simply add your images with title and description. And in case you would like to add a call-to-action button, it’s possible as well.

There’s a cool option that allows you to change the open and close animation:

Content tab >  Settings > Show Effects

You can see more examples in the JetTabs documentation.

[call_to_action title=”See More Examples” target=”_blank” url=”http://documentation.zemez.io/wordpress/index.php?project=jettabs&lang=en&section=jettabs-widgets#image-accordion” type=”link”]

Switcher

Switcher can be considered as a Toggle element, too. The Switcher widget is the perfect asset for you if you need to display two different content blocks and show them under different circumstances. It’s quite practical to use, and it helps you show your site content in a creative way.

Now, there are two items that you can assign your section templates to and set the switch items effect as well.

Check this page out for more information about the Switcher element.

[call_to_action title=”Learn More About Switcher Element” target=”_blank” url=”http://documentation.zemez.io/wordpress/index.php?project=jettabs&lang=en&section=jettabs-widgets#switcher” type=”link”]

Tabs

And finally, the Tabs! It’s a very useful element, indeed. Tabs is a powerful element that allows you to add your section templates to each tab section. It’s customizable and very easy to use.

First, define your tab contents as a section template in Elementor Templates.

After adding your sections and content, you can assign them into your Tabs element.

Also, in case you would like to add simple text as your tab content, you can change the “content-type” drop-down field to “Editor”.

Feel free to play with the style and design options to get your awesome tab to work exactly the way you imagined.

[call_to_action title=”Learn to use the Tabs Element” target=”_blank” url=”http://documentation.zemez.io/wordpress/index.php?project=jettabs&lang=en&section=jettabs-widgets#tabs ” type=”link”]

Now that you and Jet Tabs introduced to each other, it’s time to install it for free on your website, so you can take advantage of the best way to organize content with Jupiter X.

Just follow up these steps:

  1. From WordPress left menu, go to Jupiter X.
  2. From the control panel left menu, go to Plugins.
  3. Next to JetTabs, click on Activate button.
  4. A new pop-up window will appear. click on the Continue button.
  5. After a couple of seconds, a new pop-up window will appear. Click on OK button.
  6. JetTabs plugin is now installed and activated on your website. It will be displayed above in the Active Plugins section.

In case you’re concerned about the compatibility of this plugin with your website features, you should know that:

JetTabs is Multilingual-ready.

Like any other Elementor plugins, you can freely use it on your multi-language website.

Easy-to-use, No Coding Skills Needed.

You can personalize everything without adding any codes. It’s fully customizable.

Compatible with RTL websites

It’s optimized for right-to-left websites.

Responsive layout

You can create vertical and horizontal layouts without having to worry about responsive challenges.

You can also check out our official bundled plugin overview page to access the plugin author website and community, in case you experience any issues with it.

[call_to_action title=”Check out the Official Bundled Plugin Overview” target=”_blank” url=”https://help.artbees.net/getting-started/plugins/jettabs-plugin-overview” type=”link”]

Watch this video to learn how you can easily organize your content using Jupiter X and JetTabs: