How to Display Announcements in Your WordPress Blog

Yesterday, we asked our twitter (@wpbeginner) users which plugin would they like to see? Ninja Announcement was one of the plugins that caught our attention. The Ninja Announcements plugin displays small portions of text/images/video on pages and posts in your WordPress blog. These announcements are used to let your visitors know about something special. They can be scheduled so that they are only displayed between specified dates/times (for example when you are running a contest). In this article, we will show you how you can display announcements in your WordPress theme on various locations.

First, you need to install the plugin: Ninja Announcements. (Read our Step by Step Guide to Install a WordPress Plugin for Beginners).

Upon activation, you would need to go under your Settings » Ninja Announcement Tab, where you will see a screen like this.

That is the setting page where you can create announcements. When you click on the Add New Announcement Button, it will take you to a page where you can create your custom announcement.

First you see in the option to ignore dates. If you select that option, that means the announcement will be activated unless you deactivate it manually. If you leave that option unchecked, then you are given the option to pick the Begin Date, and the End date. This is a great option if you are running a special promotion, contest, or a giveaway on your blog. Next option you see is the location. For now, we will leave it as the Default (Header). Then you see a Rich Text Editor, where you can add the text for your announcement. Note, you can add images, and videos as well because this is the same editor that you use for writing your posts. All media in your WordPress gallery will work in this text editor. Once you are done writing your announcement, you can press the Submit button. This will bring you back to the original settings page, where you would need to activate the announcement.

This will display an announcement at the top of your WordPress blog like this:

This will be added to all pages of your WordPress blog. If you do not like this location, then there is another location to display it (in the sidebar widget). For this, you would need to go back to Settings page of the plugin, and click on Edit link for the announcement. Then you will need change the location from Default (Header) to Sidebar (Widget) like shown in the image below:

After this, you will need to click on your dashboard’s Appearance » Widgets tab and then drag the announcement widget to the sidebar:

There are no settings for that widget, so you will just save the sidebar and refresh the page. Now you will see the announcement where your dynamic sidebar is located.

For advanced users, there is an option to place this announcement at a custom location in your WordPress theme. First, you will have to edit the announcement again, and select the Manual (Function) option. Then, you will need to place the following code in one of your WordPress theme’s file:

<?php if (function_exists('ninja_annc_display')) { ninja_annc_display(2); } ?>  

*Note: The 2 number in the code above is the ID of the announcement. This number will change as the announcement ID changes. You can see the announcement ID when you are editing the announcement.*

Custom Styling the Announcements

Ninja Announcement Plugin comes with its own style file located in the plugin folder. But there is an option to style each announcement differently using your theme’s css file. All you need to do is create a id in your css file ‘ninja_annc_2′ where 2 is the ID of your announcement. Example CSS

#ninja_annc_2{width: 520px; height: 200px; background: #000; color: #fff; font-size: 14px;}

It is highly recommended that you add this in your theme’s style.css file or custom.css file rather than modifying the plugin’s css file (because when you upgrade the plugin, the CSS file will be overwritten wiping out your customizations).

Disabling Plugin Stylesheet

If you read our past article on How WordPress Plugins Affect your Site Load Time, then you must have seen that WordPress plugins can slow your site down with additional HTTP Requests such as adding their own stylesheet. For advanced users, who are adding custom styles for the announcement, you do not need to have an additional HTTP request for a useless stylesheet. First, you would need to copy the codes from their ninja_annc_display.css file and paste it in your style.css file. Then add the following function in your theme’s functions.php file:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'ninja-annc-css' );
}

If you have any questions / comments about this plugin, feel free to add it in the comments below.