How to Get Browser URL Inside a Shortcode Using REST API in WordPress

Problem and Context

During the development of a WordPress plugin, a problem arose with obtaining the current browser URL inside a shortcode. In the functions.php file, a global variable $current_page was declared, which should contain the full URL of the current page. However, when attempting to get this URL inside a shortcode called by the YMC Filter plugin, instead of the expected result, the path to the REST API is returned.

Analyzing the Problem

It's important to note that inside the shortcode, the function for filtering posts via REST API (wp-json/ymc/v1/posts/filter) is used. This can affect the availability of server variables and their values inside the shortcode function. As a result, the variable $current_page does not contain the expected value.

Solving the Problem

Using Built-in WordPress Functions

To get the current URL browser, you can use built-in WordPress functions such as get_permalink() or site_url(). These functions allow you to get the full URL of the current page without the need for global variables and server variables.

Example Code

add_shortcode('tag', function ($atts) {
    $permalink = get_permalink();
    echo "current_page = " . esc_url($permalink);
});

Using JavaScript

If you need to get the current URL browser from the shortcode and pass it to the client side, you can use JavaScript to get the URL and then display it.

Example Code

add_shortcode('tag', function ($atts) {
    ob_start();
    ?>
    <script>
        document.write(window.location.href);
    </script>
    <?php
    return ob_get_clean();
});

Working with REST API

If your goal is to use REST API data inside the shortcode, ensure that the data is correctly passed and processed. You can use functions for working with REST API such as wp_remote_get() or rest_api_init().

Example Code

add_shortcode('tag', function ($atts) {
    $response = wp_remote_get(home_url('/wp-json/ymc/v1/posts/filter'));
    if (is_wp_error($response)) {
        echo 'Error: ' . $response->get_error_message();
    } else {
        $body = wp_remote_retrieve_body($response);
        echo 'Result: ' . json_decode($body)->filter;
    }
});

Tips and Recommendations

1. Use Built-in WordPress Functions: Instead of working with global and server variables, use built-in WordPress functions to get the URL.
2. Work with JavaScript: If you need to get the current URL browser from the shortcode and pass it to the client side, use JavaScript to get the URL and then display it.
3. Check REST API Interaction: Ensure that your REST API requests are correctly handled and return the expected results.

Conclusion

Getting the current browser URL inside a shortcode can be a complex task, especially when working with REST API. Using built-in WordPress functions and JavaScript will help solve this issue and ensure proper code functionality.

---