Building a WordPress Weather Widget Plugin with OpenWeatherMap API

7 Jan 2025 | Building a WordPress Weather Widget Plugin with OpenWeatherMap API |

Table of Contents

Today, I’ll break down a WordPress plugin that creates a beautiful weather widget using the OpenWeatherMap API and animated weather icons. This plugin allows WordPress site owners to display current weather conditions for any location with a sleek, modern interface.

Github Code

You can find all the code located here in gitub https://github.com/acbrandao/wordpress

Core Features

Real-time weather data from OpenWeatherMap API
Animated SVG weather icons that change based on conditions
Displays temperature in both Fahrenheit and Celsius
Shows additional weather details like wind speed and temperature ranges
Customizable location settings per widget
Admin panel for API key configuration

Understanding the Code Structure

The plugin is built around a main class Animated_Weather_Plugin that extends WordPress’s WP_Widget class. Let’s break down the key components:

Widget Initialization

The constructor sets up the widget basics and enqueues necessary styles:

public function __construct() {
    parent::__construct(
        'animated_weather_plugin',
        'Animated Weather Widget',
        array('description' => 'Displays weather widget using OpenWeatherMap API with animated Meteocons icons')
    );
}

Weather Data Retrieval

The plugin makes API calls to OpenWeatherMap using WordPress’s built-in wp_remote_get() function. The data is fetched in metric units and later converted to imperial where needed:

private function get_weather_data($api_key, $location) {
    $url = add_query_arg(
        array(
            'q' => urlencode($location),
            'appid' => $api_key,
            'units' => 'metric'
        ),
        'https://api.openweathermap.org/data/2.5/weather'
    );
}

Smart Weather Icons

One of the coolest features is the dynamic weather icon system. The plugin includes SVG icons that are selected based on weather condition codes from OpenWeatherMap. It even accounts for day/night conditions:

private function get_weather_icon($condition_code) {
    $current_time = date("H");
    $icon_clear_day = "clear-day.svg";
    $icon_clear_night = "clear-night.svg";
    $weather_icon = ($current_time >= 20) ? $icon_clear_night : $icon_clear_day;
    // ... condition code handling
}

Admin Configuration

The plugin includes a settings page in the WordPress admin panel where users can:

Enter their OpenWeatherMap API key
Set a default location
Configure individual widget instances with custom locations

Frontend Display

The weather data is displayed in a clean, organized layout with FontAwesome icons for additional visual elements. The widget shows:

Current location and time
Temperature in both Fahrenheit and Celsius
Weather condition with animated icon
High and low temperatures
Wind speed
Weather description

Security and Best Practices

The plugin implements several WordPress security best practices:

Direct file access prevention
Data sanitization for API key and location inputs
Proper escaping of output data
Use of WordPress’s built-in HTTP API
Proper enqueueing of styles and scripts

Installation and Setup

To use this plugin, you would need to:

Install and activate the plugin in WordPress
Obtain an API key from OpenWeatherMap
Enter the API key in the WordPress admin settings
Add the weather widget to your desired widget area
Configure the location for each widget instance

Conclusion

This weather widget plugin demonstrates clean, efficient WordPress development practices while providing a useful feature for WordPress sites. The combination of real-time weather data with animated icons creates an engaging user experience, while the admin interface makes it easy to configure and customize.

Remember that you’ll need to style the widget using CSS (not shown in the code snippet) to match your theme’s design. The plugin’s use of FontAwesome icons and SVG weather icons ensures crisp, scalable graphics across all device sizes.

ABrandão.com