Enjoy and happy holidays!<\/p>\n
<\/p>\n
Getting Started<\/h3>\n
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\u00a0How to Create a WordPress Child Theme<\/a> contains all you need to know.<\/p>\n All examples in this posts have been tested in the Twenty Sixteen theme, the new default theme for 2016.<\/p>\n 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:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n You should now be able to activate the child theme and get to work on the examples below.<\/p>\n For my first trick, I’ll rely heavily on the\u00a0Pure CSS Santa<\/a> Codepen from Ali Khalilifar, which creates a Santa using CSS.<\/p>\n 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.<\/p>\n Here’s an example of what the icon will look like on the front-end of my site:<\/p>\n 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 Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This makes sure that the The Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n 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:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n I’ve modified the initial ruleset (applied to 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.<\/p>\n We’ll make three backgrounds of different sizes and animate them. This will give a parallax-like effect \u2013 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.<\/p>\n 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<\/strong> 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.<\/p>\n If you’d like to use mine you can grab snow-1.png<\/a>, snow-2.png<\/a> and snow-3.png<\/a> here. You might want to right-click the link and select “save as,” as it will be a lot easier to save.<\/p>\n Now we need to add the images as a background to the body element and add the CSS animations:.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n In the body element we reference our “snow” animations, telling the browser to animate linearly, lasting 20 seconds, looping infinitely.<\/p>\n 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.<\/p>\n 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<\/a> as the basis for this snippet, but this time we’ll be modifying the code a bit.<\/p>\n Let’s start by copying 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: Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n I’ve removed the elf character and the snowfall elements from Texx’s code and renamed two classes, otherwise it’s much the same.<\/p>\n The next step is to add the required CSS to make the scene come alive:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n 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.<\/p>\n Once you’re done you should get a nice Christmas scene in the footer of your site.<\/p>\n This is a simple one, a subtle background image. I found a great little pattern over at Subtle Patterns<\/a>. Download it now and add the PNG file to the “images” folder in your child theme.<\/p>\n 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 Here’s the CSS that will make it happen:<\/p>\n1. Full CSS Santa<\/h3>\n
![\"Santa](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/santa-css.png\")
twentysixteen_entry_meta()<\/code>, and it can be found in the inc\/template-tags.php<\/code> file in the parent theme. The function is wrapped in a\u00a0function-exists()<\/code> 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:<\/p>\nch2015_santa_icon()<\/code> 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.<\/p>\nch2015_santa_icon()<\/code> function simply outputs the HTML structure for Codepen, like so:<\/p>\n.santa<\/code>) to get the positioning right. This meant removing margins and making sure the icon was aligned to the left.<\/p>\n2. Falling Snow<\/h3>\n
![\"Snowfall\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/snowfall.gif\")
3. A Christmas Scene<\/h3>\n
footer.php<\/code> from the parent theme to the child theme of your site.<\/p>\n<\/footer><!-- .site-footer --><\/code> Right after, paste the following HTML structure:<\/p>\n![\"Christmas](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/christmas-scene.jpg\")
4. Subtle Christmas Tree Background<\/h3>\n
#page<\/code> element of your site(the large white container). We’ll attach it to the :before<\/code> pseudo-selector and make it stretch all the way.<\/p>\n
![\"Subtle](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/tree-background.png\")