4 Fun Code Snippets to Add Christmas Cheer to Your WordPress Site

Go to source

With Christmas almost upon us, I’ve coded up some fun holiday snippets to get your website ready for the holidays.

Below you’ll find snippets for a full CSS Santa, falling snow, adding a festive scene to your site, and a subtle Christmas tree background.

If you would prefer to use a plugin, check out our  want to check out 10+ Free WordPress Plugins to Add Christmas Cheer to Your Site.

Enjoy and happy holidays!

Getting Started

For this post, I will be adding all of my code to a child theme, which is WordPress best practice when making modifications to theme files. If you’re not sure how to do this or need a reminder, our post How to Create a WordPress Child Theme contains all you need to know.

All examples in this posts have been tested in the Twenty Sixteen theme, the new default theme for 2016.

To get going with a child theme, create a new folder in your site’s “themes” directory and name it “twentysixteen-christmas-edition.” Create a file named “style.css” and “functions.php” in there and add the following code in each of these files, respectively:

You should now be able to activate the child theme and get to work on the examples below.

1. Full CSS Santa

For my first trick, I’ll rely heavily on the Pure CSS Santa Codepen from Ali Khalilifar, which creates a Santa using CSS.

I want to automatically add this icon to any post that is published on December 24 or 25. Ali has done most of the work for us, so all you need to do is copy and paste.

Here’s an example of what the icon will look like on the front-end of my site:

Santa CSS
Our Santa Icon within the post

We’ll need to attack this problem in a child theme because there’s no good hook to use in the side section of the post lists. Upon some exploration, I found that the function responsible for outputting that aside is named twentysixteen_entry_meta(), and it can be found in the inc/template-tags.php file in the parent theme. The function is wrapped in a function-exists() check, which means we can overwrite it in our child theme. I started by copy-pasting the whole thing into my child theme’s functions.php file. I then added the following code to the end:

This makes sure that the ch2015_santa_icon() function is called only if the month is December and the day is the 24th or 25th. I’ve also excluded our Santa from the search page because the meta section is different there. If you’d like, you can include a smaller variant there.

The ch2015_santa_icon() function simply outputs the HTML structure for Codepen, like so:

The final piece of the puzzle is to add the CSS needed to breathe life into the HTML structure and make it Santa. Copy-paste all but the first two rule blocks into your child theme’s CSS file:

I’ve modified the initial ruleset (applied to .santa) to get the positioning right. This meant removing margins and making sure the icon was aligned to the left.

2. Falling Snow

Twenty Sixteen’s thick bordered design gives us the opportunity to add some snow effects without overwhelming the screen, which means snow just within the border. Since the border is actually the body background showing through, our job will be pretty easy.

We’ll make three backgrounds of different sizes and animate them. This will give a parallax-like effect – the largest image will seem to move fastest because of its size. The three sizes will be 500×500, 400×400 and 300×300. The 500px wide option will need to travel 500 pixels in the same time as the 300px one needs to travel 300pixels, hence the speed difference.

You can even make the snow flake images yourselves! Create a 500×500 image and add a couple of snowflakes to it. I used simple white circles on a black background. I used Photoshop’s offset filter to make sure the image was tileable. This is required to make sure the animation loops smoothly. This filter is in Photoshop under Filters > Other and you should set it to half the size of your image. When you’re done, hide the background black and save the image as a transparent GIF within an “images” folder in your child theme. Repeat the process to make a 400 and 300 pixel version. Feel free to play around with the opacity and blur along the way.

If you’d like to use mine you can grab snow-1.png, snow-2.png and snow-3.png here. You might want to right-click the link and select “save as,” as it will be a lot easier to save.

Now we need to add the images as a background to the body element and add the CSS animations:.

In the body element we reference our “snow” animations, telling the browser to animate linearly, lasting 20 seconds, looping infinitely.

The keyframes make the images move from to the specified pixel positions and since they’re all transparent it will seem like the snowflakes are moving.

Snowfall
Our snowfall animation around the border

3. A Christmas Scene

Let’s continue by adding a Christmas scene and greeting in the website footer. I’ll be using Texx Smith’s cutesy Christmas Animation 2014 as the basis for this snippet, but this time we’ll be modifying the code a bit.

Let’s start by copying footer.php from the parent theme to the child theme of your site.

Once done, open up the copy of the file in yourchild theme and find the end of the site footer. It should look like this: </footer><!-- .site-footer --> Right after, paste the following HTML structure:

I’ve removed the elf character and the snowfall elements from Texx’s code and renamed two classes, otherwise it’s much the same.

The next step is to add the required CSS to make the scene come alive:

This is fairly standard stuff, note the animations for the window light at the end followed by the styling of the text at the bottom.

Once you’re done you should get a nice Christmas scene in the footer of your site.

Christmas Scene
Christmas Scene

4. Subtle Christmas Tree Background

This is a simple one, a subtle background image. I found a great little pattern over at Subtle Patterns. Download it now and add the PNG file to the “images” folder in your child theme.

Despite it’s subtlety, it is still a bit strong to put behind text so we’ll bump down the opacity. Due to this, we can’t simply add it to the #page element of your site(the large white container). We’ll attach it to the :before pseudo-selector and make it stretch all the way.

Here’s the CSS that will make it happen:

Play around with the opacity value to get the strength of the pattern just right.

Subtle Tree Background
Subtle Tree Background

And there you have it, four great festive code snippets to get your site ready for the holiday season.

If you add any of the snippets above to your site, leave a link in the comments below. I’d love to see how you use them on your site!

Related posts:

  1. 10+ Free WordPress Plugins to Add Christmas Cheer to Your Site The countdown to Christmas has begun! As stores crank up…
  2. Advent Calendar: Useful WordPress Snippets ‘Til Christmas Elliot Richmond over at Square One Marketing & Design has…
  3. How to Create a WordPress Child Theme WordPress themes can be amazing but there are so many…