How to automatically add pretty messages on your WordPress blog

Downloading and inserting FontAwesome

The first thing you need to do is to download FontAwesome, since we’ll use it for our icons.

Once you’ve downloaded FontAwesome, include it in the head tag of your header.php file:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

The CSS

Let’s continue by adding the necessary CSS classes. Open your theme’s style.css file and append the following to it:

.box{
	background: #E4F0FC;
	margin: 1em 0px 1.5em;
	padding: 12px 10px 12px 15px;
	color: #555;
	text-shadow: none;
	font-weight: bold;
}

.box i.fa{
	background: #5999cf;
	color:#fff;
	padding:7px 10px 8px 11px;
	border-radius:50%;
}

.box a{ color:#5999cf !important}

.box.red{ background: #FFD9C8; }
.box.red a{ color:#E97373 !important}
.box.red i.fa{ background: #E97373; }

.box.green{ background: #edfcd5}
.box.green a{ color:#80b42b !important}
.box.green i.fa{ background: #80b42b; }

Pretty self-explanatory, the first class defines the message box, and the two others allow you to change the box color from its default blue to red and green respectively. Please note that you might need to adjust the padding on .box i.fa because FontAwesome icons might have different sizes.

Add custom content after each single post

Many blogs are automatically displaying a message after the post content. It can be used to display related posts, author info, or like in the example below, to suggest considering a Bitcoin donation.

This code goes in your theme’s functions.php file.

function cwc_aftersinglepost( $content ) {    
    if( is_single() ) {
		$message = '<div class="box"><i class="fa fa-btc" aria-hidden="true"></i>Enjoyed this article? Please consider donating: <a href="bitcoin:3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK">3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK</a></div>';
        $content .= $message;
    }
    return $content;
}
add_filter( 'the_content', 'cwc_aftersinglepost' );

The result will look like this:

Add custom content before each single post

Now that we saw how to automatically add content after a post, it’s super easy to adapt the code to display a custom message before the post as well.

Paste the following code into your functions.php file:

function cwc_beforesinglepost( $content ) {    
    if( is_single() ) {
		$custom_content = '<div class="box green"><i class="fa fa-info" aria-hidden="true"></i> Display some info here.</div>';
		$custom_content .= $content;
	}
    return $custom_content;
}
add_filter( 'the_content', 'cwc_beforesinglepost' );

It will look like this:

Add a warning after each single post that is older than 2 years

If you started blogging a long time ago, there’s most probably some content on your blog which is now a bit out of date with the latest technologies.

For that reason, it’s a good thing to warn your readers about it. Using the is_old_post() function created by the folks at WP Engineer, it’s really simple to take one of the examples above and modify it a bit to fit this need.

function is_old_post($days = 5) {
	$days = (int) $days;
	$offset = $days*60*60*24;
	if ( get_post_time() < date('U') - $offset )
		return true;
	
	return false;
}

function cwc_oldpostwarning( $content ) {    
    if( is_single() && is_old_post(730) ) {
		$custom_content = '<div class="box red"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Warning: This article is over 2 years old and might not be up to date.</div>';
		$custom_content .= $content;
	}
    return $custom_content;
}
add_filter( 'the_content', 'cwc_oldpostwarning' );

Result:

Creating a shortcode for custom messages

This article wouldn’t be complete without a solution to easily display custom messages within your blog posts or pages. To do so, let’s create a shortcode.

Simply paste the code below into the functions.php file from your theme:

function cwc_message( $atts, $content = null ) {
    return '<div class="box"><i class="fa fa-info" aria-hidden="true"></i> '.$content.'</div>';
}
add_shortcode('message', 'cwc_message');

Once saved you can easily insert custom messages in posts by using the shortcode we just created:

[message]Test[/message]

The result:

That’s all for today – Have fun experimenting with the message boxes!