avatar
create custom Shortcodes in WordPress WordPress

» First and foremost, WordPress Shortcodes are tags like `[gallery]` or `[video]` that let you easily add dynamic content or execute custom functions in posts, pages, or widgets.

For example:

[youtube url="https://www.youtube.com/watch?v=YOUR_VIDEO_ID"]

» Leverage the `add_shortcode()` function, which is WordPress function used to register custom shortcodes.

Hence, we will separate it into two steps as below:

// Initialize function for the shortcode
function create_shortcode() {
  echo "Hello World!";
}
// Create a shortcode named [test_shortcode] and execute the code from the create_shortcode function
add_shortcode( 'test_shortcode', 'create_shortcode' );

» Assuming we want shortcode that displays the current time in the top right corner of WordPress site, you can follow these steps:

1. Add the following code to your theme's `functions.php` file or custom plugin to create the shortcode function.

» functions.php

function display_clock() {
    $current_time = date('H:i:s');
    return '<span id="clock-time" class="clock-time">' . $current_time . '</span>';
}
add_shortcode('show_clock', 'display_clock');

2. Display the clock in the top right corner, add the following custom CSS to your theme's stylesheet (`style.css`), use the Customizer, or include it in custom plugin.

» style.css

.clock-time {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #ffffff;
    padding: 5px 10px;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 16px;
    z-index: 1000;
}

3. Insert `[show_clock]` into widget, post, page, or theme file; for example, go to Appearance > Widgets, add Custom Widget Area widget, and enter `[show_clock]` into the content area.

Note: When using Elementor as the primary builder for your WordPress site, you typically don't need to use Custom Widget Areas. Therefore, using shortcode should not impact the DOM and will correctly generate the HTML for your custom shortcode.

4. For dynamic time updates without page refreshing, add this JavaScript to your theme's `footer.php` file or enqueue it properly in your theme.

» footer.php

<script>
document.addEventListener("DOMContentLoaded", function() {
    function updateClock() {
        var now = new Date();
        var hours = now.getHours().toString().padStart(2, '0');
        var minutes = now.getMinutes().toString().padStart(2, '0');
        var seconds = now.getSeconds().toString().padStart(2, '0');
        var currentTime = hours + ':' + minutes + ':' + seconds;
        document.getElementById('clock-time').textContent = currentTime;
    }

    updateClock();
    setInterval(updateClock, 1000);
});
</script>

Besides, you can follow these instructions to learn how to set up custom shortcode with parameters on WordPress site.

24
Clone WordPress website using Duplicator copy page from WordPress with database coming known migrate other WordPress website to subsite on WP Engine look up pages stored in database Wordpress Develop Custom Plugin for WordPress modify or edit WordPress code create Shortcode with Parameters in Wordpress
You need to login to do this manipulation!