Skip to content

Weather Widget

The Weather widget displays current weather conditions and forecasts for any location. Perfect for travel sites, local directories, or event pages where weather information adds value.

Overview

Show real-time weather data including temperature, conditions, humidity, and wind speed. Choose between current conditions only or multi-day forecasts. The widget uses the OpenWeatherMap API for accurate weather data.

Key Features

  • Current weather conditions
  • 3-day or 5-day forecast options
  • Temperature in Celsius or Fahrenheit
  • Weather condition icons
  • Humidity and wind data
  • Location by coordinates or dynamic tag
  • Customizable styling

Setup Instructions

Step 1: Get OpenWeatherMap API Key

  1. Go to OpenWeatherMap
  2. Create a free account
  3. Navigate to API Keys in your account
  4. Copy your API key

Step 2: Enable the Widget

  1. Navigate to Voxel Toolkit → Widgets in your WordPress admin
  2. Find Weather in the list
  3. Toggle the switch to enable the widget
  4. Click Save Changes

Step 3: Add to Template

  1. Edit your page or template in Elementor
  2. Search for Weather (VT)
  3. Drag the widget to your layout
  4. Enter your API key and configure settings
  5. Save the template

Widget Settings

Weather Settings

SettingDescriptionDefault
LatitudeLocation latitude coordinate40.7128 (New York)
LongitudeLocation longitude coordinate-74.0060 (New York)
API KeyYour OpenWeatherMap API keyNone
View TypeCurrent, 3-Day, or 5-Day forecastCurrent Weather
Temperature UnitCelsius or FahrenheitCelsius

Dynamic Location

Use Voxel dynamic tags for the latitude and longitude to show weather for listing locations:

Latitude: @post(location.lat)
Longitude: @post(location.lng)

View Types

Current Weather

Shows current conditions including:

  • Temperature
  • Weather condition (sunny, cloudy, rain, etc.)
  • Weather icon
  • Humidity percentage
  • Wind speed

3-Day Forecast

Shows current weather plus the next 3 days with high/low temperatures and conditions.

5-Day Forecast

Extended forecast showing 5 days of weather predictions.

Use Cases

Travel Listings

Show weather for vacation rental or hotel locations to help guests plan.

Event Pages

Display weather forecast for outdoor event venues.

Local Directories

Show local weather on business listing pages.

Activity Listings

Display weather for outdoor activity locations like hiking trails or beaches.

Troubleshooting

Weather Not Loading

  • Verify your API key is correct
  • Check that coordinates are valid
  • Ensure API key is active (new keys may take a few hours)
  • Check browser console for API errors

Wrong Location

  • Verify latitude and longitude are correct
  • Remember: latitude is -90 to 90, longitude is -180 to 180
  • Use Google Maps to find exact coordinates

API Rate Limits

  • Free tier has limited requests per day
  • Use caching to reduce API calls
  • Consider paid plan for high-traffic sites

Built by Code Wattz.