Weather Widget for WordPress

Now you can show live weather updates on any of your websites without any problem because WeatherWidget.xyz website provides you with an excellent and easy-to-use weather plugin. Through this, you can show the weather report of any city around the world in complete detail by using the name of any city in shortcode.

Demo Weather Widgets

Free Weather Widget

Step – 1. Using this code you can display weather information on any of your websites. Copy the code below and paste it into the custom HTML code in a post or page on your PHP website or WordPress website.

Step – 2. You just have to change the name of your city or any city and country in this line <div id=”weather-widget-2″ class=”weather-widget” data-city=”Delhi” data-country=”India”> and enter weather-widget-2 unique i.e. 1, 2, 3 like this

    <link rel="stylesheet" href="https://weatherwidget.xyz/wp-content/plugins/weather-plugin/styles.css">

    <div id="weather-widget-2" class="weather-widget" data-city="Delhi" data-country="India">
        <div class="weather-content">Loading...</div>
    </div>

    <script>
        function fetchWeather(widgetId) {
            var widget = document.getElementById(widgetId);
            var city = widget.getAttribute('data-city');
            var country = widget.getAttribute('data-country');
            var apiUrl = `https://weatherwidget.xyz/wp-json/weather-api/v1/weather/?city=${encodeURIComponent(city)}&country=${encodeURIComponent(country)}`;

            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    var weatherContent = '';
                    if (data && typeof data === 'string') {
                        weatherContent = data;
                    } else {
                        weatherContent = 'No weather data available.';
                    }
                    widget.querySelector('.weather-content').innerHTML = weatherContent;
                })
                .catch(error => {
                    console.error('Error fetching weather data:', error);
                    widget.querySelector('.weather-content').innerHTML = 'Error fetching weather data.';
                });
        }

        // Initialize weather widgets
        document.querySelectorAll('.weather-widget').forEach(function(widget) {
            fetchWeather(widget.id);
        });
    </script>

If you face any problem while using the plugin, you can mail us on this email weatherwidget.xyz, we will try to solve your problem quickly. Please read the Terms and Conditions carefully before making a purchase.