How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

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

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.