How to Add the Current Year Shortcode in Elementor

This tutorial will teach us how to add the current year shortcode in Elementor. You might not be familiar with shortcodes and their prospective uses so that we will look at the basics of shortcode integration. Furthermore, to create custom shortcodes and use them in Elementor, you must understand the relationship between the Parent and Child themes. It might sound like a difficult task for a beginner in WordPress web development, but do not worry, we have you covered!

What is a Shortcode?

Shortcodes are snippets of text enclosed in square brackets [example] that trigger predefined functionality in WordPress. You can use them in most areas where text is accepted, including pages and posts. They make it simple to add dynamic content without writing code.

In our case, the current year shortcode returns the current year’s value. By implementing this shortcode, you will never have to worry about changing the year again. It will automatically update itself based on the server’s date and time, effectively reflecting the current year for website visitors.

WordPress has a few in-built shortcodes available to users, but they are somewhat limited in their capabilities. You will begin to write your shortcodes as you accumulate ample experience and knowledge in WordPress web development. Let us take the first step towards this direction and create our custom current year shortcode.

Current Year Shortcode

So, how does the current year shortcode look? Take a look at the code snippet below.

php

function current_year_shortcode() {
    $year = date('Y');
    return $year;
}
add_shortcode('year', 'current_year_shortcode');

This code will return the current year’s value without the date. For this shortcode to return the current year value, you must paste [year] into any text-related window. Elementor has a specific shortcode widget, but we will get to that later. You may wonder how to add this code to your WordPress website. First, you must understand the relationship between parent and child.

Parent Theme and Child Theme

You may be familiar with popular themes like Astra, Divi, OceanWP, etc. Nowadays, access to flexible multipurpose WordPress templates is easy. Search the Appearance tab in your WordPress dashboard, click the Themes button, and pick the template that best suits your website.

The theme you picked is called a parent theme. A parent theme is a complete template that consists of all the mandatory WordPress template files and assets that are obligatory for the theme to work. All themes (excluding child themes) are considered parent themes.

What is a child theme? A child theme inherits the design capabilities and functions of the parent theme but can be used to customize and modify any part of the theme. It is an efficient way to keep your modifications separate from the main file and upgrade the parent theme without affecting the customizations you have previously made to your site.

Child Theme Generator

Nowadays, most web developers and designers use child theme generators. It is an efficient way to create child themes with minimal coding involved. There are numerous child theme generator sites available for free online. Pick one, and it will make a child theme for your theme. Some themes, such as Astra, offer their generators. If you are well-versed in coding, you know that the only file you need to worry about is the functions.php file. The current year shortcode code snippet must be added at the end of the functions.php file in the child theme.

If you want to take a more in-depth look at the child theme creation, then continue reading this article, and let’s build a custom child theme together. If not, then you can skip to the “Adding the current year shortcode to the Elementor” section in this article.

Creating a Custom Child Theme

Let us start by creating a new folder in the themes directory, located at wp-content/themes. It is a good practice to keep the folder’s name the same as the parent theme, but with –child appended at the end, for example, Astra-child or OceanWP-child. Keeping everything organized is a good habit in the world of web development, as you never know who might have to take a look at your website or code.

Next, you must create a stylesheet file named “style.css”.  Consequently, this file will contain all of the CSS rules and declarations that regulate the appearance of your theme. At the very top of the file, you must insert a comment with the information about the theme you are using. As an example, we will use the Astra theme.

In most cases, only the Theme Name and Template are essential for linking the child and parent themes, but additional info may be required in certain situations. Add remaining information as applicable. While a child theme technically only needs the style.css file for basic styling, a functions.php file is almost always included and is essential for correctly enqueuing both parent and child stylesheets and for adding any custom PHP functionalities like shortcodes.

Enqueue Stylesheet and functions.php

Now, all we need to do is to enqueue the parent and child theme stylesheets. Previously, the common practice was to use the @import rule inside style.css to link the stylesheets together. However, this is no longer recommended as it increases the loading time for stylesheets, and the parent stylesheet will likely get loaded twice.

The goal is to have both the Parent and Child themes load simultaneously. Unfortunately, not all themes do this. Examining the parent themes’ code lets you see whether they can be loaded simultaneously. You will need to locate the handle name that the parent theme uses. The handle is the first parameter of wp_enqueue_style().

Enqueuing stylesheets is recommended by adding the wp_enqueue_scripts action and wp_enqueue_style() in your child theme’s functions.php file. If the child theme does not have a functions.php file, you must create one in the child theme’s directory. Consequently, if the parent theme loads both stylesheets, the child theme does not need to do anything.

If you notice that the parent theme enables the style by using a function such as get_template_directory or get_template_directory_uri, then the child theme needs to load just the child styles, using the parent’s handle in the dependency parameter.

php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ),
        wp_get_theme()->get( 'Version' ) // this only works if you have Version in the style header
    );
}

If the parent theme loads the style using a function like get_stylesheet_directory() or get_stylesheet_directory_uri(), then the child theme must load both parent and child stylesheets. You need to use the parent theme’s handle name for the parent styles.

php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // Replace with actual parent theme handle
    $theme = wp_get_theme();

    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
        array(), // add any dependencies here if needed
        $theme->parent()->get( 'Version' )
    );

    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get( 'Version' ) // this only works if you have Version in the style header
    );
}

Installing and Activating the Child Theme

Now that we have finished setting up our child theme, all we have left is to install and activate it. The child theme is installed like any other theme. Click Appearance ⟶  Themes ⟶Add New in your WordPress dashboard, and upload the .zip file. If you use FTP, you can just copy the folder to the site. Now, your child theme is ready for activation. Locate the Appearance tab, then Themes, and activate the child theme.

Remember that functions.php is the only file in the child theme that does not overwrite its counterpart in the parent theme.  Considering this fact, you can make any modifications you want in the functions.php file without fearing deleting your website or experiencing “the white screen of death”. You can add the aforementioned current year shortcode function to the functions.php file and see the results yourself.

Adding the Current Year Shortcode to the Elementor

You must be weary after reading the previous paragraphs, but fret not, the hard part is over, and you can enjoy the fruits of your labor. The Elementor team has done an admirable job integrating shortcodes into any text-related widget. They even have a specific widget for shortcodes. Elementor also generates shortcodes for templates and global widgets.

Let us open any page, post, etc. in your WordPress dashboard and edit with Elementor. Locate the widget panel in the upper left corner and choose the shortcode widget. As mentioned previously, we can use any text-related widget, such as the heading widget. For this tutorial, we will use the shortcode widget.

All you have to do is write or copy the shortcode mentioned above [year] to the shortcode window in the left sidebar and, voilà, you can see the current year. The same recipe works for any other shortcode you might want to use.

Note that text widgets might not instantly display shortcodes, so you must preview the document to see the changes.

Adding Current Year as Dynamic Content in Elementor

Truthfully, having substantial knowledge about shortcode use and implementation is an incredibly valuable skill in WordPress web development. Still, if you have subscribed to Elementor Pro, then you might be aware of the numerous options the Elementor dynamic content function offers. In our case, the current year shortcode. We might as well use the dynamic content and achieve the same result.

The dynamic content is available for almost any feature Elementor supports. As an example, we will use the heading widget. You will see a small icon in the upper right corner of the title window. Click on it, and you will see many options that are accessible to you. We need to display the current year on our website. Locate the Site section underneath the dynamic content tab and choose the “Current Date Time.”

As you can see, the date, time, and current year have been displayed on our page. But we want only to show the current year, not the date and time. Click again on the title window, and the settings menu will open. Two options are available to you- Date Format and Time Format. Now, click on the Date Format and choose the Custom option. You will be presented with seemingly random letters (their meaning can be found in the Elementor documentation).

In our case, we will delete all the letters and write the uppercase “Y” in their stead (lowercase “y” will display only the last two numbers of the year). Now, the heading widget only shows the current year. You should consider this an alternative to adding the current year shortcode in Elementor via the shortcode widget.

Displaying Year Ranges and First Published Year Automatically

While using a basic current year shortcode works well for most cases, many site owners prefer to display a full copyright range, such as “© 2017–2025”, instead of just the current year. This format communicates the history and longevity of your website or business, and you can implement it using a more advanced PHP function inside your functions.php file.

Display a Year Range Dynamically

To do this, you’ll create a custom shortcode that checks the current year and compares it with a defined start year. You can insert this in your child theme folder under functions.php:

php

function wp_custom_year_range_shortcode() {
    $from = 2017;
    $current = date('Y');
    return $from. ($from != $current ? '–'. $current : '');
}
add_shortcode('year_range', 'wp_custom_year_range_shortcode');

Once added, navigate to your Elementor footer, and insert the shortcode [year_range] inside a Text Box or use the Shortcode widget. This shortcode will automatically output “2017–2025” (or whatever the current year is), adjusting as time goes on without manual edits.

This is especially helpful if your site was launched several years ago, and you want your copyright notice to reflect your long-standing presence. It also avoids confusion for returning users who question whether your site is active.

Automatically Display the First Published Year From WordPress Content

You can fetch the first published year directly from your site’s posts or pages if you want even more automation. This method queries the WordPress database and dynamically returns the earliest and latest published years.

Paste the following shortcode-generating function into your functions.php file:

php

function wp_dynamic_first_post_year_range() {
    global $wpdb;
    $dates = $wpdb->get_results("
        SELECT YEAR(MIN(post_date)) as start_year, YEAR(MAX(post_date)) as end_year 
        FROM $wpdb->posts 
        WHERE post_status = 'publish' AND post_type = 'post'
    ");
    $start = $dates[0]->start_year;
    $end = $dates[0]->end_year;
    return $start. ($start != $end ? '–'. $end : '');
}
add_shortcode('post_years', 'wp_dynamic_first_post_year_range');

Once this new shortcode is registered, use [post_years] in your Elementor layout. Depending on your published content, it will display something like “2018–2025.”

This approach eliminates the need to update the year each time manually and helps your users see how long your site has been actively publishing. It demonstrates authority and builds trust, especially for business and professional blogs.

Managing HTML Output in Elementor

If you’re using Elementor Pro and inserting custom shortcodes into dynamic elements like the footer or global widgets, you may notice that your HTML output sometimes escapes. This means the browser shows raw code like © or fails to render the structure correctly.

By default, Elementor escapes HTML content returned by shortcodes for security reasons. However, you can disable this behavior with a simple filter when you want to render full HTML output from your shortcode.

Add the following line to your functions.php file in your child theme folder:

php

add_filter('elementor_pro/dynamic_tags/shortcode/should_escape','__return_false');

This line tells Elementor to accept and render HTML returned from shortcodes, giving you complete control over the output. Be cautious when using this approach; only use it with trusted PHP functions you write yourself.

Once you’ve done this, you can use the shortcode as usual in the Elementor editor, and the formatted HTML will display correctly in the live preview and front end.

php

function wp_html_shortcode() {
    return '<span class="footer-text">&copy; ' . date('Y') . ' My Company</span>';
}
add_shortcode('footer_html', 'wp_html_shortcode');

Placing [footer_html] inside an Elementor Text Box or Advanced Tab will correctly display styled content without HTML breaking issues.

Shortcode vs Elementor Dynamic Tags

When working with Elementor, you have multiple ways to insert dynamic values, such as the current year or site information. Two primary options are the Shortcode widget and Elementor’s built-in Dynamic Tags.

Using the Shortcode Widget

The Shortcode widget is flexible and supports any shortcode you define in your theme’s functions.php file. After creating a custom shortcode, navigate to the desired section of your page, such as the footer, a column, or a text box, and insert the shortcode using the Elementor Shortcode widget.

This method is ideal for advanced logic and combines PHP functions with HTML output. You can even reuse the same shortcode across multiple templates or pages, reducing duplication and speeding up site updates.

Using Elementor Dynamic Tags

If you’re using Elementor Pro, the Dynamic Tag feature is a quick alternative. You can choose the Current Date Time dynamic tag and format it as “Y” to display the current year. This is perfect for simple copyright text like:

sql

© [Current Date Time: Y] YourSite.com

To use it:

• Open the Elementor editor.
• Select the text element where you want the year to appear.
• Click the Dynamic Tag icon.
• Choose Current Date Time.
• Click the wrench icon to configure the format (Y for full year).
• Save and preview the changes.

While this approach is faster, it cannot insert custom logic, such as displaying year ranges or querying post data. If you require more advanced output, use the Shortcode method instead.

Combining both methods allows you to customize your layout efficiently while retaining flexibility for future site updates.

Plugins for Shortcodes

In this day and age, there are plugins for everything, including shortcodes. A beginner in WordPress web development might not want to waste their time on child theme creation and might opt to use the plugins to ease their workload. Elementor has integrated shortcode plugins into its design with great care, so you can implement them on your website without breaking it. We will list a few of the most popular and reliable shortcode plugins for WordPress:

• Shortcode Ultimate
• WP Shortcode Pro
• Shortcoder
• Woo Shortcodes Kit
• GT Shortcodes
• WordPress Shortcode
• Vision
• Fruitful Shortcodes
• Supreme Shortcodes
• Etc.

As you can see, the options are plentiful. It is up to you to choose which one suits your needs the best. A variety of them offer additional options besides shortcodes, and shortcodes themselves differ quite a lot from plugin to plugin, but, in essence, they all try to achieve the same goal- provide you with enough shortcodes, so you would not have to create custom shortcodes by yourself.

Final Words

You can add the current year’s shortcode to Elementor or WordPress sites in numerous ways. It is up to you to choose the method that serves you the best. We hope that this article has helped you make your choice, and adding the current year shortcode in Elementor now is trivial to you. Have a great journey in the world of WordPress web development and stay tuned for more articles.

Frequently asked questions