Super Advent Calendar
Add a flexible advent calendar for any holiday to your WordPress site.
Links
Introduction
With Super Advent Calendar you can add flexible advent calendars to your WordPress website. You can use it for festive giveaways or simply for counting down to the holidays. You can define how many entries/days your calendar has, select a pre-built style (or add your own), add content and define when the content can be accessed, add animations and special effects to elevate your site.
Getting started
To get started with this plugin please follow the instructions below.
1. Install and activate the plugin
Download and install the plugin from the WordPress plugin directory.
2. Using the Gutenberg blocks
After activating the plugin you can use the Advent Calendar block inside a post, page or custom post type.
After choosing the Gutenberg block you’ll see a inner block appear which you can use to add days to your calendar. You’ll also see the settings at the panel in sidebar.
You can move over to the styles tab to select a default theme such as Christmas.
Or you can create your own theme using the color / gradient selection.
Note that each day (or door) in the calendar is an individual Gutenberg block which has its own settings panel allowing you to control the settings and customizations for that day. Such as when the day can be unlocked.
The date times are based on the timezone settings of your WordPress installation. Which you can find at Settings > General.
The same block also allows you to change other settings such as background- and text color, column span, height, typography and so on.
3. Next steps
There is a lot more you can change to customize your advent calendar. We will discuss those topics in the subpages of the documentation.
Changing layout
1. Controlling block width
By default, the Advent Calendar uses the default content size to display its contents but you can change the width of the block.
Select the Advent Calendar parent block to highlight the settings and click on the align icon as displayed below.
A dropdown will appear allowing you to select more width options to make the block wider or even full width.
Note that these options may vary based on the theme.json inside your WordPress theme.
2. Grid layout
Super Advent Calendar also allows you to set the column width.
Just select the Advent Calendar block and change the minimum column width settings and the columns will align accordingly.
Or if you want you can manually define how many columns you want per row.
This works, but the doors are still quite flat… we can change this by selecting a day in our calendar. Each day represents an individual block with its own block settings. If we select the "Styles" tab in our block settings we can control its dimensions such as the padding.
Help! I am missing some of the block controls!
Super Advent Calendar seamlessly integrates with native WordPress block settings, including dimensions and other customization controls. However, some of these controls may not be available in your current WordPress version or theme.
If you're using a third-party theme, you can request the theme developer to enable these advanced Gutenberg features. Alternatively, if you’re comfortable editing your theme’s functions.php file, you can enable them yourself.
Simply add the following lines to your functions.php file:
add_theme_support( 'appearance-tools' );
add_theme_support( 'custom-spacing' );We can also define column and row spans to maintain a grid layout, allowing you to highlight specific days in your calendar as special.
By utilizing columns we can create a masonry layout such as the example below.
Changing colors
Super Advent Calendar will let you customize the background and text colors for your calendar.
1. Changing the calendar background
When you select the Advent Calendar block and move over to the "Styles" tab on the block settings. You can choose between a few (default) thematic styles. In the example below we’ve selected the Christmas theme. Each theme has it’s own pattern but you can also choose "Custom" to resume without a pattern.
You can also change the background color to your own liking. The color dropdown will let you choose a color powered by your WordPress theme, or you can use the color wheel to select (or insert) an HSL, RGB or Hex value yourself.
And you can use gradients! These can also be powered by your WordPress theme or you can customize one yourself by choosing a type, angle and colors.
2. Changing the colors of a specific day in the calendar
When you select a day in the calendar you’ll see the block settings – you can use the colors panel to adjust the background and text colors for that specific day.
The color component allows you to select a color or supply one in RGB, HSL or Hex format.
Need more control?
With premium, you can upload images to your calendar and customize the calendar even further.
Changing typography
The block settings for a day in the calendar allow you to change the font size of your typography. Simply select the "Styles" tab and change the size beneath the "Typography" menu item.
You can enter a custom value by clicking the toggle icon, this allows you to set any value in px, em, rem, vw and vh.
1. Changing the font family
At this moment in time the Advent Calendar inherits the font from the theme. We have plans to add a font family selector in the future. Do you need this right now? Consider making a support request to get this higher up on our list of priorities.
Adding content
The Super Advent Calendar plugin lets you add content to the front and back of a day by selecting a particular day and opening the block panel settings.
Select a presentation style
You can choose to show the content directly on the card, in a modal or open a link to another website or internal page.
Extend the content
You can use shortcodes inside the text field to add more functionality e.g. a form, quiz, image gallery and so on. Read more about using shortcodes.
Adding images
You can add images to fully customize and style your Advent Calendar.
Please note
This is a premium feature, don't have premium yet? You can buy a license here.
Using shortcodes
Did you know you can use shortcodes inside Super Advent Calendar? By using shortcodes you can further customize your calendar and add extra functionality such as a quiz, forms, rewards etc!
1. Example using a form
The Super Advent Calendar supports in-modal submissions with plugins like Contact Form 7. If you encounter any issues with a specific form plugin, please let us know.
WordPress has a built-in shortcode for showing image galleries for instance you could add the following code inside the back content where ID is the ID of the image on the WordPress media library.
[gallery ids="538" columns="4" size="medium"]2. Example using a video
WordPress also has a built-in shortcode for embedding videos. Example usage:
[video src="video-source.mp4"]There are more arguments available such as autoplay, width, height and poster, see the aforementioned link for documentation.
3. Example using a link
The plugin ships with a link shortcode which you can use to insert links to the back content of the door. It takes two attributes url and text.
[super-advent-calendar-link url="https://www.verdant.studio" text="My link"]Please note
This feature is available since version 1.12.0.
Scheduling
You can define when a certain door can be accessed by selecting it, going to the block settings and opening the schedule panel. This is where you can insert a start and end date / time. Insert a value in these values to define between which date the door can be opened.
Leaving them empty means the door can be accessed at any time.
Click on the input field to open the date / time popup.
The date times are based on the timezone settings of your WordPress installation. Which you can find at Settings > General.
Page builders
Super Advent Calendar is a Gutenberg block plugin, however, you can use it with pages created with page builders such as Divi and Elementor.
Page builders without Gutenberg support
If your page builder does not support Gutenberg blocks you can use a shortcode to show the advent calendar.
1. Create a Gutenberg page
Most page builders allow you to switch between their page builder and Gutenberg. Create a new Gutenberg page and add the Super Advent Calendar to it. Take a mental note of the ID of the page which you can see in the address bar while editing the post e.g. /post.php?post=724&action=edit in our case 724 is the post ID.
2. Create or edit a page with your page builder
Now head over to the page you want to use Super Advent Calendar on it and edit it with your page builder, we're using Elementor in the example below.
3. Leverage the shortcode in the page builder
While in the edit mode add a shortcode block and use the shortcode. Change the ID to the ID which has the original Gutenberg block on it, in our case 724.
Note that this post has ID 861 (the Elementor page) and we're using ID 724 (the Gutenberg page).
4. Save the page
The Advent Calendar should now show up on the front-end of your page.
FAQ
Do you offer refunds?
We stand by the quality of our plugins and will refund 100% of your money within 14 days of the original upgrade date if you experience issues which make the plugin unusable and we are unable to fix it.
Can I cancel my subscription at anytime?
Yes, you can cancel your subscription at any time from your personal account.
I have other pre-sale questions, can you help?
Yes! You can get in touch with us via the contact page.
Do I get updates for the premium plugin?
Yes, automatic updates are available for our premium plugin as long as you have an active license.
Changelog
1.15.0: Apr 11, 2025
- Add: controls for inserting custom tooltip text
- Change: tooltips are now rendered on demand/click
- Change: access is now checked directly through an api call
- Change: update various dependencies
1.14.0: Jan 27, 2025
- Change: update various dependencies
1.13.4: Dec 9, 2024
- Fix: safari blocking target blank links from opening
1.13.3: Dec 3, 2024
- Fix: extend not override the view settings
1.13.2: Dec 2, 2024
- Fix: snowfall under certain circumstances not working
[Premium] - Fix: enqueue order of the shortcodes
1.13.1: Nov 29, 2024
- Fix: overlay offset on mobile devices
1.13.0: Nov 27, 2024
- Add: controls to change modal width
- Add: controls to change modal font sizes
- Add: apply vertical scroll inside modal when content becomes too large
- Change: swap deprecated gutenberg api controls with their replacements
- Change: upgrade libraries
- Fix: linebreaks being applied inside shortcodes
- Fix: centering the modal on the page relative to current position
1.12.1: Nov 16, 2024
- Fix: opening a door in deeply nested blocks
- Fix: make sure post exists
1.12.0: Nov 14, 2024
- Add: super-advent-calendar shortcode to display the Gutenberg block via a shortcode
- Add: super-advent-calendar-link shortcode to insert links within the back content
1.11.2: Nov 13, 2024
- Change: upgrade libraries
- Fix: new lines / breaks on the back content of the card
1.11.1: Nov 6, 2024
- Fix: re-init wpcf7 after content render (if contact form 7 is used)
1.11.0: Oct 31, 2024
- Add: controls to change text and background color for the back of the card
- Add: controls to change text and background color for the modal
- Change: move advent calendar day colors to the styles panel
- Change: improvements to colors panel
- Change: upgrade libraries
- Fix: force focus color on dialog content to prevent theme conflicts
1.10.0: Oct 21, 2024
- Add: ability to open a link when opening a door
- Change: upgrade libraries
1.9.1: Oct 12, 2024
- Fix: incorrect wp version requirement
1.9.0: Oct 07, 2024
- Change: improve date validation
- Change: make start and end time optional when either are set
- Change: improve style of dialog exit button, remove outline and apply default color
- Fix: iOS Safari/Chrome bug where modal would sometimes immediately close
1.8.1: Sep 27, 2024
- Fix: bad path construction on Windows hosts
- Change: upgrade libraries
1.8.0: Sep 17, 2024
- Add: background and gradient color selection to advent calendar block
- Change: upgrade libraries
1.7.0: Aug 26, 2024
- Add: ability to adjust font size via block settings
- Change: upgrade libraries
1.6.1: Aug 11, 2024
- Change: advent calendar block open effects panel by default
- Fix: select default block style on advent calendar block
1.6.0: Aug 02, 2024
- Add: allow usage of shortcodes inside the content
- Change: improve the styling of the default themes
- Change: update help text below back content on the editor panel
- Change: wordpress.org screenshots
- Fix: duplicating a calendar does not reset ids
1.5.0: Jul 28, 2024
- Add: grid layout and padding controls
- Add: aspect ratio control to day block
- Change: upgrade libraries
- Fix: rest api call for opening an entry when not logged in
1.4.0: Jun 30, 2024
- Add: advent calendar block alignment options (e.g. none, wide, full)
- Change: remove unneeded slot fills
1.3.0: May 28, 2024
- Change: make slot info private (cannot be viewed from the page source)
- Change: update installation instructions
1.2.0: May 23, 2024
- Add: color picker and change colors of the cards
- Add: extra special effects such as falling snow and 4 extra types of emoji confetti
[Premium]
1.1.0: May 20, 2024
- Add: option to open content in a modal
- Add: option to add/upload images to the front of the cards
[Premium] - Change: certain labels and descriptions
- Change: screenshots
- Fix: make sure premium code can only be used with an active license
[Premium]
1.0.1: May 9, 2024
- Fix: spelling error
- Fix: missing icon on opt-in screen
1.0.0: May 6, 2024
- First release!