How To Add Holiday Notices To Your WordPress Site

The festivities are upon us and what better way to spread the cheer than putting up a holiday-themed notice on your site? You might be going on vacation soon, you might want to greet your visitors with a special card, or you might just want to display a special message.

There are lots of WordPress Christmas plugins out there we’ve already looked at, but how about doing it on your own? Do you have a bit of time for a short WordPress project over the holidays? Follow along to learn how to add some Christmas notices to your website via text widget, sticky bar and a counter widget.

Creating A Text Widget

There’s no rocket science here, sorry! You can add a quick message and display it in a widget area by going to Appearance > Widgets, dragging a text widget into a sidebar and entering your message in the box. You can use HTML in there, so you could spice things up with an image if you like.

I agree, this is a bit boring but it could be just the right amount of festiveness to add. Many more serious sites such as e-Commerce sites or personal portfolios would be impacted negatively by dancing Santas but people still appreciate a little holiday cheer nonetheless.

Sticky Bar

How about a stick bar, similar to the Quick Notice plugin but one we coded ourselves? We can also make it stick to the top of the page on scroll easily.

The first step is creating a plugin, let me show you how:

In your plugins directory, create a new folder named “my-sticky-bar”. Inside that folder create a file named “my-sticky-bar.php” and paste the following content into it:

<?php /**
 * Plugin Name: My Sticky Bar
 * Plugin URI: http://yourwebsite.com
 * Description: My Christmas Project - creating a sticky bar
 * Version: 1.0.0
 * Author: Your Name
 */

Once you save this file you should be able to activate the plugin via the Plugins section in the WordPress admin. It doesn’t do anything yet but we’ll soon fix that!

We need to do two things: use PHP and HTML to output our message and use CSS to style it.

In the “my-sticky-bar.php” file use the following code to add the necessary HTML in the correct place:

add_action( 'wp_footer', 'my_sticky_bar_display' );
function my_sticky_bar_display() {
	echo "<div id='my-sticky-bar'>Merry Christmas Everyone!</div>";
}

The first line is a WordPress hook, it tells WordPress to execute the “my_sticky_bar_display” function just before the end of the body. It’s fine to load the HTML for our bar at the end of the page. It isn’t that important and can be repositioned via CSS.

At this stage you should be able to see your message at the bottom of your site, without any formatting. To add formatting we’ll have to attach a stylesheet by enqueueing it.

In the same file:

add_action( 'wp_enqueue_scripts', 'my_sticky_bar_styles' );
function my_sticky_bar_styles() {
	wp_enqueue_style( 'my-sticky-bar', plugin_dir_url( __FILE__ ) . '/my-sticky-bar.css');
}

Enqueueing is a way of adding scripts and styles modularly to WordPress. No need to understand all that though — if you paste this into the plugin file and create the “my-sticky-bar.css” file you can start adding your styles. Let’s do that now.

#my-sticky-bar {
	position: absolute;
	top: 0px;
	width: 100%;
	text-align: center;
	color: #fff;
	background: #810400;
	padding: 11px 0;
	text-transform: uppercase;
	letter-spacing: 2px;
}

Best of all, if you replace “absolute” with “fixed” the message will stick to the top of the window and will follow users around when they scroll.

This method is great because you have full control over everything! For example, how about keeping this plugin active all the time but only showing the message on the 25th of December? No problem, just modify the my_sticky_bar_display function slightly.

add_action( 'wp_footer', 'my_sticky_bar_display' );
function my_sticky_bar_display() {
	if( date( 'd' ) == 25 && date( 'm' ) == 12 ) {
		echo "<div id='my-sticky-bar'>Merry Christmas Everyone!</div>";
	}
}

Counter Widget

We’ve already added some simple text into our text widget, but what about creating a countdown for our users?

The first step is to let WordPress know that we want to create a custom widget. We need to define a function and hook it to widgets_init. Create a new plugin, just like before, and in the main file, paste the following:

add_action( 'widgets_init', 'christmas_countdown_widget' );
function christmas_countdown_widget() {
    register_widget( 'Christmas_Countdown_Widget' );
}

We will need to create a class named Christmas_Countdown_Widget with a few functions within it. Let’s start by creating a constructor function. Paste everything below into the main plugin file as well.

class Christmas_Countdown_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'christmas_countdown_widget',
            'Christmas Countdown Widget',
            array( 'description' => 'A simple Christmas countdown' )
        );
    }

}

The constructor function contains some important information that is used to build the widget. It contains the id of the widget (christmas_countdown_widget), the name which will apear in the backend UI (Christmas Countdown Widget) and the description which is also shown.

We can add a function named form() which can be used to output some settings for the widget. We won’t be using it here, but keep it in mind for future projects. I’ll just add an empty function for now.

We will use the widget() function to output the widget to the front end. Let’s add a simple countdown now. Paste the following code inside the class, below the __construct() function. Note that I’m also adding the empty form() function now.

function form() {}

function widget() {
    echo "Time to Christmas: " . human_time_diff( time(), mktime( 0, 0, 0, 12, 25, date( 'Y' ) ) );
}

We use the human_time_diff() function offered by WordPress to figure out the time between today and Christmas day. This will display something like: “Time to Christmas: 5 days”.

This is pretty basic, but you can use any sort of images, text, styles and Javascript to make this look awesome. The final and complete code for our widget is as follows:

add_action( 'widgets_init', 'christmas_countdown_widget' );
function christmas_countdown_widget() {
    register_widget( 'Christmas_Countdown_Widget' );
}

class Christmas_Countdown_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'christmas_countdown_widget',
            'Christmas Countdown Widget',
            array( 'description' => 'A simple Christmas countdown' )
        );
    }

    function form() {}

    function widget() {
        echo "Time to Christmas: " . human_time_diff( time(), mktime( 0, 0, 0, 12, 25, date( 'Y' ) ) );
    }


}

Happy Holidays!

I hope I’ve given you a few ideas to add some Christmas cheer to your website! If you don’t celebrate Christmas you can always use these methods and apply them to your own culture.

Eating and celebrating all throughout the holidays? Be sure to read our article on Christmas WordPress Plugins for tons of great ideas and quick access to great holiday stuff!