When input data to custom fields, you definitely can use the field's description to notice or warn users about something. But it is not attractive enough so they can skip it. That’s when you should use an alert message for your custom fields. With Meta Box, you can do it easily with the help of the Custom HTML field type. Let’s explore how to create a notification using this field.

This is a notification that I created for example.

An example of notification was created by custom HTML field from Meta Box

Video Version

Before Getting Started

The content of the alert is from the one saved in a Custom HTML field. To have the framework to create it and other custom fields, we need the Meta Box core plugin. You can install it directly from wordpress.org.

Besides, you may need some Meta Box extensions for its advanced features to have custom fields as your wish. You can install them individually or use Meta Box AIO. In this case, I use these ones:

  • Meta Box Builder: to have a UI on the back end to create custom fields;
  • Meta Box Conditional Logic (optional): to show or hide custom fields based on the data users fill in another field. It is just optional if you need to show or hide fields in your case.
  • Meta Box Group (optional): to group together the fields along with the Custom HTML field that we use for the notification. This is optional as well. In fact, you obviously can set the Custom HTML field stand alone.

Create Custom Fields

Go to Meta Box > Custom Fields and create some custom fields.

Go to Meta Box > Custom Fields to create some custom fields

For the first field, choose the type as the Radio field. Then, you can fill in some options for choosing into the Choices box.

choose the type as the Radio field, then fill in some options for choosing into the Choices box.

Since I want the alert message to go along with another field, I will put both of them into a group. There is no need to have a label for this group, so leave it blank.

the alert message to go along with another field, so put both of them into a group with blank label

This group will appear only when the user chooses the Yes option in the Radio field, so we will set a conditional logic for this group. Go to the Advanced tab in the settings of the group and add the rule.

Go to the Advanced tab in the settings of the group and add the rule to set the rule when does the alert message apear

Fill in the ID of the Radio field and the value of the Yes option.

Fill in the ID of the Radio field and the value of the Yes option

Now, add a Custom HTML field for the alert. It’ll be a subfield of the group.

Add the first subfield of the group which has the type as Custom HTML

Add content for it in the box named Content (HTML allowed).

Add content for it in the box named Content (HTML allowed)

I also added a div tag and classes for this text as <div class="alert alert-info"> for styling this notification later.

Add the remaining field.

Add the remaining field. Here is the Text field with the Label is Subject

Let’s set the location for these fields. Go to the Settings tab, set Location as Post Type, then choose any post type you want.

Go to the Settings tab, set Location as Post Type, then choose any post type to set the location of created custom fields

Go to the post editor, you will see the fields with the notification.

the fields with the notification displayed in the post editor

The notification is quite not prominent compared to other texts. So, let's style it a little bit.

Style the Notification

I will use CSS to style the notification. So, go to the theme's files, add this code to declare and create a file named admin.css:

add_action( 'rwmb_enqueue_scripts', 'enqueue_custom_style' );
function enqueue_custom_style() {
    wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/assets/css/admin.css' );
}

add the code to declare and create a file named admin.css

Next, go to the file and add some CSS code with the content as follows:

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

The alert and alert-info are two classes that I added in the content of the notification when creating its custom field.

go to the file, add some CSS code for 2 classes to style the notification

Now, go back to a post editor, you will see the message has a new look.

the final look of the notification

Last Words

It’s easy to create notifications with the help of the Custom HTML field from Meta Box. This is just a small tip but we hope that it can help you in your own application in real cases. Let’s try it and give us the result. Keep track of us to see more useful practices. Thanks for reading!

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 The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  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 - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page -P3- Using Meta Box
  61. How to Create Buttons with Dynamic Link using Custom Fields
  62. How to Create Category Thumbnails & Featured Images Using Custom Fields
  63. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  64. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  65. How to Create Download and Preview Buttons - P3 - Using MB Views
  66. How to Create Download Buttons in WordPress - Using Custom Fields
  67. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  68. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  69. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  70. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  71. How to Create Notification Using Custom HTML Field
  72. How to Create Online Admission Form for School or University
  73. How to Create Online Reservation Form for Restaurants using Meta Box
  74. How to Create Relationships - P1 - Using Meta Box and Oxygen
  75. How to Create Relationships - P2 - Using Meta Box and Bricks
  76. How to Create Relationships - P3 - Using MB Views
  77. How to Create Relationships - P4 - Using Meta Box and Breakdance
  78. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  79. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  80. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  81. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  82. How To Display All Listings On A Map With Meta Box
  83. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  84. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  85. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  86. How to Display Images from Cloneable Fields - P3 - with Elementor
  87. How to Display Images from Cloneable Fields - P4 - with Bricks
  88. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  89. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  90. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  91. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  92. How to Display Product Variations - P3 - Using Meta Box and Bricks
  93. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  94. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  95. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  96. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  97. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  98. How to Display the Most Viewed Posts - P1 - using MB Views
  99. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen

Leave a Reply

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