Have you ever tried to show an alert message when users input data on the back end? What would you do to have it? If you’re using Meta Box plugin, there’s a pretty simple method to create a notification using Custom HTML field type and then styling to make it display like an alert message.
In this post, I will make an example to input information for dietary supplements like this.
To do it, we need these plugins:
- Meta Box plugin: a framework to create custom fields. This plugin is free and available on wordpress.org.
- Meta Box Conditional Logic: an extension of Meta Box plugin. Because I’ll set the condition to show the alert message only when users choose Yes in the Contraindication section on the backend, I need this extension. If your message display does not depend on any condition, you can skip it.
- Meta Box Group: another extension of Meta Box plugin. In my example, I group fields to display them beautifully. If you have many custom fields that display together with a message line, you should use Meta Box Group. But if you just have one, you don’t need to use it.
- Additionally, I’ll use Meta Box Builder to have an easy-to-use UI to create custom fields on the backend. If you don’t want to buy this extension, you can use the Online Generator (free) of Meta Box instead.
Now, let’s get started.
Step 1: Create Custom Fields for Products
First of all, go to Meta Box > Custom Fields > Add New to create a meta box containing custom fields like this:
Explanation:
Custom_html
field type is the one used to display the message.- "Subject" is the text field that allows users to enter the information of those who shouldn’t use the products.
I put these fields in one group so that it’ll be more convenient for setting conditions. Follow the below guidelines to create and set up these fields:
Create a “Contraindication” Field
In Edit Field Group sections, find and select Radio in the left column to create a radio field type, name it and then fill in the Choices section like this:
Create a Field for an Alert Message
To create the alert message, we need a Custom HTML
field type. Similar to the Contraindication field above, choose the Custom HTML and fill in this information to the Content (HTML allowed) box.
<div class="alert alert-info"><span class="dashicons dashicons-warning"></span> Write all detailed information about contraindication subjects. Each subject is in one box below</div>
Note: I set the classes for this field as <div class="alert alert-info">
. We will use these classes in the next step to style the message.
Create a “Subject” Field
I’ll choose a text field for Subject and set it up as cloneable in order to add more kinds of subject and make it sortable. At the same time, set the label for the Add more button as Add More Subject.
Create a Group and Set a Condition to Display Fields
Next, I’ll create a group and set the message field and Subject field in this group. You just need to choose the Group type for the field in the left column, and then drag and drop these two fields into it.
After that, go to the settings for the group and choose the Advanced tab. You have to set the condition in the Conditional Logic as following:
In the image:
radio
: is the ID of the Contraindication field I created above.radio = yes
: means that the Contraindication box is selected asYes
.
Save these settings and try modifying any product’s information, you will see the field display like this:
However, the message doesn’t look good so we will need to style it a bit.
Step 2: Style the Custom HTML Field
In the css
folder of theme, create a file named admin.css
with the content:
.alert-info { background-color: #d9edf7; border-color: #bcdff1; color: #31708f; } .alert { padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; font-weight: bold; line-height: 2; display: flex; align-items: center; }
That is the rule for styling that we set for two classes: alert
and alert-info
of the Custom HTML field.
Next, go to functions.php
file and add this code to declare admin.css
file.
add_action( 'rwmb_enqueue_scripts', 'enqueue_custom_style' ); function enqueue_custom_style() { wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/css/admin.css' ); }
Now, you will see that the message has a totally different layout and color compared to the previous version in step 1.
Final Thought
This is another new tip to display and format content beautifully on the backend and help user input data more conveniently. You can even use CSS to style these custom fields to have a better look. If you have any questions or concerns, leave a comment, and don’t forget to follow our next tutorial.
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display a User List On the Frontend with Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Author in WordPress using Meta Box (Part 1)
- How to Add Guest Author in WordPress using Meta Box (Part 2)
- How to Add Related Posts to WordPress Using Meta Box
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download Buttons Using Custom Fields with Meta Box Plugin
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views
- How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
- How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS