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.

I input information for dietary supplements using Meta Box plugin.

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:

You create a meta box containing custom fields.

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:

You find Radio button and fill in the Choices section.

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>

You choose the Custom HTML and fill in this information to the Content (HTML allowed) box.

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.

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

You 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:

You set the condition in the Conditional Logic.

In the image:

  • radio: is the ID of the Contraindication field I created above.
  • radio = yes: means that the Contraindication box is selected as Yes.

Save these settings and try modifying any product’s information, you will see the field display like this:

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.

You 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

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Author in WordPress using Meta Box (Part 1)
  13. How to Add Guest Author in WordPress using Meta Box (Part 2)
  14. How to Add Related Posts to WordPress Using Meta Box
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page using Meta Box Plugin
  26. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  27. How to Create a Recipe - P3 - Using Meta Box and Elementor
  28. How to Create a Recipe - P4 - Using Meta Box and Bricks
  29. How to Create a Recipe - P5 - Using Meta Box and Zion
  30. How to Create a Recipe - P6 - Using Meta Box and Brizy
  31. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  32. How to Create a Recipe with Meta Box Plugin
  33. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  34. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  35. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  36. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  37. How to Create a Team Members Page - P4 - Just Meta Box
  38. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  39. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  40. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  41. How to Create a Video Gallery Page Using Meta Box + Oxygen
  42. How to Create ACF Flexible Content Field with Meta Box
  43. How to Create an Auto-Updated Cheat Sheet in WordPress
  44. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  45. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  46. How to create an FAQs page - P4 - Using Meta Box and Bricks
  47. How to Create an FAQs Page -P3- Using Meta Box
  48. How to Create Buttons with Dynamic Link using Custom Fields
  49. How to Create Category Thumbnails & Featured Images Using Custom Fields
  50. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  51. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  52. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  53. How to Create Online Admission Form for School or University
  54. How to Create Online Reservation Form for Restaurants using Meta Box
  55. How to Create Relationships - P1 - Using Meta Box and Oxygen
  56. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  57. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  58. How to Display Images from Cloneable Fields - P2 - with Oxygen
  59. How to Display Images from Cloneable Fields - P3 - with Elementor
  60. How to Display Images from Cloneable Fields - P4 - with Bricks
  61. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  62. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  63. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  64. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  65. How to Display Product Variations - P3 - Using Meta Box and Bricks
  66. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  67. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  68. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  69. How to Display the Most Viewed Posts - P1 - using MB Views
  70. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
  71. How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
  72. How to Manually Reorder Posts with Meta Box
  73. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  74. How to Show Posts With a Specific Criteria - P3 - Using MB Views
  75. How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
  76. How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
  77. How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
  78. How to Show the Featured Restaurants - P4 - Using MB Views
  79. How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
  80. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

Leave a Reply

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