If you’re seeking a suggestion to add a personal touch to your website for your visitors, you’ve come to the correct place. Customizing the default WordPress moderation message is one method for adding a distinctive touch to your website.
This article will show you how to change the default WordPress moderation message (“Your comment is awaiting moderation”) in WordPress comments. In addition to providing a personal touch to your website, customizing the default WordPress moderation message can also build your users’ trust, reassure them that their comments are reviewed and moderated before appearing publicly;
Steps to Customize the Default WordPress Moderation Message
Before we start the tutorial, we will inform you that the moderation message for comments is automatically activated by default when you enable an option to approve the comments manually. You can find that option in the WordPress Discussion Settings.
So, once that option is enabled, whenever a comment is submitted on your website, it requires moderation before being displayed publicly.
Step 1: Add the Code Snippet to the functions.php File
First, we will add the simple PHP snippet to the functions.php file to customize the default WordPress moderation message.
On your WordPress dashboard, go to Appearance -> Theme File Editor. You can find Theme File Editor under the Tools menu if you’re using a block theme.
Once enter the Theme File Editor page, select the functions.php file. Afterward, paste the PHP snippet below at the end of the functions file content. Next, update the theme file by clicking the Update File button.
add_filter( 'gettext', function( $text ) {
if ( 'Your comment is awaiting moderation.' === $text ) {
$text = 'Your custom moderation message here';
}
return $text;
} );
Note: Replace “Your custom moderation message here” with your desired text.
Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can create a child theme or custom plugin. Read here to learn more.
Once you add the PHP snippet to the functions.php file, go to your WordPress comments, and you can see the text of your message moderation for your WordPress comments has changed.
If you’re happy with the result, you can keep it like this and skip the next step. But, if you want advanced customization of your moderation message for comments, such as adding the background and text color, editing the font family and size, etc., please continue to step two.
Step 2: Add the Custom CSS
Find out the Class Name of the Moderation Message Element
Before adding the custom CSS, you must find the class name of your moderation message element. The class name depends on the WordPress theme you use. So, how to find out the class name of the moderation message?
To find out the name of the class of the moderation message element, you can use the built-in Developer Tools of your web browser (nearly all web browsers have this feature). If you use Google Chrome, you can click the menu icon (three-dot icon) and select More Tools -> Developer Tools.
Once you’ve entered the Developers Tools window, click the arrow icon to inspect an element in your page (see the image below).
Next, point the cursor to the moderation message element to determine the HTML class name.
As in the image above, the class name appears when you hover over the moderation message element. In this example, our class name is “.moderation“
Adding the simple CSS Snippet
Once you’ve recognized the class name of the moderation message element, we will use it to write the simple CSS snippet to the WordPress Additional CSS.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS.
Note: If you’re using a block theme, click here to learn how to enable a theme customizer on your WordPress.
Copy the CSS snippet below and paste it into the CSS input field if your class name of the moderation message element is the same as what we have “.moderation“. But, if you have a different class name, you must replace it first with your class name of the moderation message element.
.moderation{
border: solid 1px #E6DA55;
border-radius: 5px;
background-color: #afc9cb;
font-family: "inter";
font-size: 13px;
color: #000000;
padding: 4px 8px;
margin-top:20px;
text-align: center;
}
The Code Explanation:
This CSS code defines a style for an HTML element with the class name “moderation”.
border: solid 1px #E6DA55;: This sets a solid border around the element with a width of 1 pixel and a color of #E6DA55 (a shade of yellow).border-radius: 5px;:This rounds the corners of the element’s border, giving it a border radius of 5 pixels.background-color: #afc9cb;: This sets the background color of the element to #afc9cb (a shade of light blue).font-family: "inter";: it will attempt to use the “Inter” font if it is available on the user’s device. If the font is not available, the browser will fall back to the next font specified in the font stack or to the default serif or sans-serif font specified by the user’s browser settings.padding: 4px 8px;: This sets the padding space around the content inside the element. It has 4 pixels of padding on the top and bottom and 8 pixels on the left and right.margin-top:20px;: This sets a margin space above the element, pushing it down by 20 pixels from the elements above it.text-align: center;: This aligns the text inside the element to the center.
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
That’s it. Your moderation message has been customized; the text has been changed and styled. You can edit the properties and values on the CSS snippet to get the best moderation message for your WordPress comment on your site.
The Bottom Line
This article shows how easily you can change the default WordPress moderation message for comments. If you only want to change the text, you can stop at the step one. But, if you’ll style up your moderation message, follow the tutorial until step two.
We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.
