Super Advent Calendar

Add a flexible advent calendar for any holiday to your WordPress site.

Links

• Plugin homepage
• Plugin on WordPress.org

Introduction

Super Advent Calendar adds an advent calendar block to the editor. Put a discount code, a giveaway, a video or a few lines of text behind each door, and pick the date it unlocks. Until then, visitors can't open it.

Count down to Christmas, a product launch, a wedding or any date that matters to you, with as many doors as you need. Start from a ready-made template or a blank calendar and you'll have it on your page in a few minutes. Then make it your own: swap the background, change the colors and fonts, and choose how each door opens. Your visitors get a reason to come back every day to see what's behind the next door.

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 like one of the Christmas styles.

The background panel will let you choose a different background color / gradient or select one your WordPress theme brings with it.

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

Want to change the layout of your Advent Calendar? Select the Advent Calendar block, head over to the "Styles" tab and scroll down to the "Layout" section. This is where you can change the amount of columns and width.

There are more options available underneath the three dots, at the upper right corner.

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

Please note

This is a premium feature, don't have premium yet? You can buy a license here

You can add images to fully customize and style your Advent Calendar.

Adding a countdown

Please note

This is a premium feature, don't have premium yet? You can buy a license here

There are two ways to add a countdown to the calendar.

1. A countdown above or below the calendar

The "Advent Calendar" block has a "Countdown" panel which allows you to set a countdown, this countdown will show when the next door will open. You can choose between "Hidden", "Above the calendar" or "Below the calendar". You can customize the text via the text field below and by using the {countdown} placeholder. The countdown message will automatically hide once all doors have been opened.

2. A countdown on the tooltip of a door

The second way is to add a countdown to the tooltip of a door. You can do this within the "Schedule" panel of the "Advent Calendar Day" block. The tooltip will automatically hide when the door becomes available.

On the frontend of the website it will look something like this:

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"]

Scheduling

With a schedule you can define when doors can be accessed. There are two ways to do this.

1. Schedule all at once

The "Advent Calendar" block allows you to schedule doors from a specific date and then increments that date with a set number of days. Note that our screenshot says 24 doors but this number is dynamically based on the number of doors you have in your calendar.

You can also set when the doors should close.

Move all dates by days

We have created a handy feature which will lets you shift all days for next year at once so that you can easily prepare the calendar for next year.

Preview on a date

When you've configured your calendar you likely want to try things out to make sure everything works as expected. This is where "Preview on a date" comes in handy. Simply select a date from the date picker and click "Open preview".

2. Schedule per door

Want more control when a specific door should unlock? You can use the "Advent Calendar Day" block to add a start and end date/time per each individual door. This also where you can customize the Tooltip (shown when a door can't be opened yet) and tell it to remember the door state on subsequent visits.

Please note

The date times are based on the timezone settings of your WordPress installation. Which you can find at Settings > General.

Save state

Please note

This is a premium feature, don't have premium yet? You can buy a license here.

Once a start and end date are set for a door, an additional option; "Save state to browser" becomes available. When enabled, this option allows the user's browser to remember which doors have been opened, keeping them open on future visits. This is especially useful for advent calendars that span multiple days, as it lets users return and easily see which doors they’ve already opened.

Page builders

Super Advent Calendar is a Gutenberg block plugin, however, you can use it with pages created with page builders such as Divi, Elementor and WPBakery.

Page builders with Gutenberg support

Some page builders such as WPBakery have Gutenberg support. We have collected some links with instructions below:

• Does WPBakery Page Builder work with Gutenberg?

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.

Custom styling

Most classes on the Advent Calendar are prefixed with superac- to prevent conflicts with other plugins or themes. You can use these classes to add custom styles to your Advent Calendar.

Event based classes

Some people like to add custom styles based on the event of a door. For instance, you can use the is-open class to style doors that have been opened. These are the classes you can use:

• Unlocked doors: is-unlocked
• Opened doors: is-open
• Visited doors: is-visited

Please note

The visited doors class is only available when the Save state functionality is used.

Hooks

Super Advent Calendar provides a few hooks to allow you to extend the functionality of the plugin. The following hooks are available:

Filter the text for showing the modal again

add_filter( 'superac_text_reopen_modal', function() {
    return 'Re-open this modal';
}, 10);

Filter the text for showing the link again

add_filter( 'superac_text_reopen_link', function() {
    return 'Re-open this link';
}, 10);

Filter whether visitors may view or embed a calendar post

Decides whether the current visitor may see the advent calendar inside a post. This filter only controls access to the post. Each door's schedule is still checked separately, so allowing a post doesn't unlock doors before their start date.

# Example 1: only show a calendar to logged-in users
add_filter( 'superac_can_view_calendar_post', function ( $can_view, $post ) {
    if ( 123 === $post->ID ) {
        return $can_view && is_user_logged_in();
    }

    return $can_view;
}, 10, 2 );

# Example 2: allow calendars stored in a custom post type that isn't public
add_filter( 'superac_can_view_calendar_post', function ( $can_view, $post ) {
    if ( 'my_calendar' === $post->post_type && 'publish' === $post->post_status ) {
        return true;
    }

    return $can_view;
}, 10, 2 );

Please note

This feature is available since version 1.23.0.

Filter the calendar HTML rendered by the embed shortcode

The shortcode doesn't run the full the_content filter on the embedded calendar. That keeps other plugins from adding share buttons, related posts or ads inside the calendar. Use this filter to change the output or to add back processing you need.

# Example 1: wrap the embedded calendar in a container
add_filter( 'superac_shortcode_content', function ( $content, $post ) {
    return '<div class="my-calendar-embed">' . $content . '</div>';
}, 10, 2 );

# Example 2: apply a specific plugin's content filter
add_filter( 'superac_shortcode_content', function ( $content, $post ) {
    return my_plugin_process_content( $content );
}, 10, 2 );

Please note

This feature is available since version 1.23.0.

FAQ

Does this plugin work with Divi, Elementor, and other page builders?

Yes, while the Super Advent Calendar plugin is designed as a Gutenberg block, you can use it with page builders such as Divi, Elementor and WPBakery. For detailed instructions, check out our page builder documentation.

Can visitors peek at future doors?

No. The content of a door is only loaded once its scheduled date has arrived, so it can't be found in the page source beforehand. That makes it safe to hide discount codes and giveaways.

Can I reuse my calendar next year?

Yes. Shift all door dates at once by a number of days and your calendar is ready for the next season.

Does it work with page caching?

Yes. Doors keep opening on the right day, even when the page is served from a full page cache.

Can I use it for something other than Christmas?

Yes. Choose any number of doors and any dates, for example for Easter, a New Year countdown or an event launch.

Can I upgrade to Premium later?

Yes. Your existing calendars keep working as they are, and the Premium options become available as soon as you upgrade.

Do you like the plugin?

We'd love to hear from you! A review on WordPress.org helps others find the plugin and keeps us motivated to improve it.

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.25.0: Oct 27, 2026

• Add: starter templates for December, New Year, Valentine's Day, Easter and Halloween
• Add: a live countdown to the next door opening, shown above or below the calendar [Premium]
• Add: {countdown} placeholder to show the time until a door opens in its locked message [Premium]
• Fix: a door clicked before it opened stayed locked until the page was reloaded
• Fix: the add door button was hard to see on the dark calendar background in the editor

1.24.0: Oct 24, 2026

• Add: add an open door revealing animation
• Add: add a confetti special effect with custom emojis [Premium]
• Change: remove the arrow from the locked door tooltip
• Change: skip special effects for visitors who prefer reduced motion [Premium]
• Change: burst confetti from the opened door and shorten the snowfall to 10 seconds [Premium]
• Fix: stop the snowfall from restarting after switching tabs and from stacking when opening several doors [Premium]
• Fix: quote the data attributes of a door so values containing spaces don't break the json

1.23.0: Oct 20, 2026

• Add: schedule all doors at once and shift all dates by a number of days, e.g. to reuse a calendar next year
• Add: preview the calendar on a specific date (only for users who can edit the calendar)
• Add: superac_shortcode_content and superac_can_view_calendar_post filters
• Add: editor side feedback on specific changes made
• Change: "Save state to browser" is available as soon as a door has a start date [Premium]
• Change: saved door states are unique per door and reset when its schedule changes [Premium]
• Fix: doors continue to work on pages served from a full page cache
• Fix: superac shortcode can only request door content of public and published posts
• Fix: a calendar embedding itself through the shortcode crashed the page
• Fix: multiple calendars embedded through the shortcode on one page use the correct doors

1.22.1: Oct 8, 2026

• Change: update dependencies
• Fix: script error instead of fallback text when a card has no content
• Fix: “Invalid URL” message for link cards could not be translated

1.22.0: Jun 11, 2026

• Change: remove custom autoloader, use default
• Change: improve schedule start/end comparison
• Change: improve code and script loading fallbacks
• Change: update dependencies

1.21.1: May 6, 2026

• Change: update dependencies
• Fix: Tailwind (preflight) CSS unscoped on pages loading the calendar

1.21.0: Apr 7, 2026

• Add: 22 additional festive background styles/patterns (making a total of 25)
• Change: upgrade Tailwind from v3 to v4 and rewrite parts of the CSS
• Change: improve the way scripts are loaded
• Change: test with WordPress 7.0 and update support
• Change: update dependencies
• Fix: grid resizing on the editor view

1.20.2: Dec 1, 2025

• Change: test with WordPress 6.9 and update support
• Fix: text inside card not displayed directly when using save state [Premium]

1.20.1: Nov 26, 2025

• Change: update dependencies
• Fix: broken links in readme documentation
• Fix: grid should now autofill on smaller screens
• Fix: make superac-day selector more specific

1.20.0: Nov 16, 2025

• Change: use custom DI container and remove dependency to external DI container
• Change: update dependencies
• Fix: prevent locked door with href from scrolling up the page
• Fix: enforce no margin on superac day class on the editor

1.19.1: Oct 12, 2025

• Change: update dependencies
• Fix: load just one canvas element, improves performance on large calendars

1.19.0: Sep 10, 2025

• Add: is-unlocked class to doors which may be opened
• Change: update dependencies

1.18.0: Aug 14, 2025

• Add: filters to be able to change "re-open this door/link" text on demand
• Change: "click to view ..." to "re-open this ..." text
• Fix: loading spinner not showing when checking/opening a door

1.17.0: Aug 8, 2025

• Add: extra class for visited/opened calendar days [Premium]
• Change: improve snow falling effect [Premium]
• Change: update dependencies

1.16.1: Jul 16, 2025

• Change: update dependencies

1.16.0: May 24, 2025

• Add: loading spinner while retrieving contents
• Add: option to save state and keep doors open on subsequent visits [Premium]
• Add: auto deactivate free version when premium is activated [Premium]
• Change: load freemius sdk via composer [Premium]
• Change: text "Opens in a modal" to "Click to view modal"
• Change: text "Opens a link" to "Click to view link"
• Change: keep the door open even when a modal is closed
• Change: use cached version of api results when clicking a door multiple times
• Change: update dependencies

1.15.1: May 14, 2025

• Fix: confetti effects not working [Premium]

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 dependencies

1.14.0: Jan 27, 2025

• Change: update 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!