Can Elementor display weather forecasts without a plugin?

Yes, but you need an external weather service and custom integration. A developer can fetch forecast data with JavaScript in Elementor's HTML widget or with server-side WordPress code, then format the response for the page. The manual route is reasonable for one fixed location, but it becomes harder to maintain when you need hourly data, several locations, caching, error handling, or responsive forecast layouts.

Where do the weather forecasts come from?

Weather forecasts come from an external weather API or an embedded weather service, not from Elementor itself. The integration sends a location, usually as latitude and longitude, together with an API key and options such as units or language. The provider returns forecast records that the widget or custom code turns into visible content.

Why is my Elementor weather widget showing an API error?

An API error usually means the key is missing, incorrect, restricted, inactive, or being used with the wrong provider endpoint. Check the key and location settings first, then allow time for a newly issued key to activate. Also check provider limits, firewall rules, caching, and whether the widget expects coordinates rather than a city name.

Can I show weather for different locations on different pages?

Yes, provided the widget or custom integration supports a location setting for each placement. Create a separate widget instance for each fixed location, or connect the location field to dynamic content supplied by your site. For many locations, confirm that the integration caches requests and handles missing or ambiguous place names instead of making a fresh API request on every page load.

Should I use custom code or a weather plugin?

Use custom code when you need a small, tightly controlled display and have someone available to maintain the API integration. Use a weather plugin when you need current, hourly, extended, or multiple-location forecasts without building the data requests, forecast layout, responsive behaviour, and error handling yourself. A plugin such as Synopter is the faster route for an Elementor-based site.

How to display weather forecasts with Elementor

Utilities Time About 20–45 minutes 6 steps Updated 8 Nov 2026

The short answer

Elementor can display weather data, but the forecast must come from an external API, embed, shortcode, or weather plugin. For one fixed location, custom code in an HTML widget can work; for hourly, extended, or multiple-location forecasts, a dedicated Elementor weather widget is faster.

The route

01Choose the forecast data
02Build the manual version
03Add a weather widget plugin
04Place the widget in Elementor
05Style the forecast cards
06Test the live display

What you need

A WordPress site with Elementor installed
Administrator access
The location or locations you want to display
An API key if you are using a weather API
A backup or staging copy for custom code

Choose the forecast data

Decide whether you need current conditions, hourly data, a multi-day forecast, or several locations. Also choose the temperature unit, language, location format, and where the forecast will appear, such as a homepage, landing page, header, or travel destination template.

Use latitude and longitude where possible. Weather APIs commonly accept coordinates and can return forecast timestamps, temperatures, descriptions, icons, wind, humidity, and precipitation probability.

Build the manual version

For a simple fixed-location display, ask a developer to create the markup and JavaScript, then place it in Elementor's HTML widget. Elementor's HTML widget accepts HTML, CSS, shortcodes, and JavaScript, while Elementor Custom Code does not support PHP.

The script must request forecast data from your chosen provider, convert the response into readable forecast cards, and handle loading and error messages. Keep in mind that a browser-based API key can be exposed to visitors. A server-side integration using WordPress's HTTP API is safer, but it needs a custom plugin or developer-maintained code.

Add a weather widget plugin

For hourly forecasts, extended forecasts, multiple locations, or non-technical maintenance, install a weather plugin that adds an Elementor widget. Upload the plugin from Plugins → Add New → Upload Plugin, activate it, and complete any provider or API-key settings it requires.

Synopter is a suitable fast route because it adds an Elementor weather widget for current, hourly, and extended forecasts, with support for multiple locations and responsive layouts.

Place the widget in Elementor

Edit the page with Elementor and drag the weather widget into the required container or column. Select the location, forecast type, units, language, and any display options offered by the widget. If the plugin provides a shortcode instead of a native widget, place Elementor's Shortcode widget on the page and paste the generated shortcode into it.

Do not paste a shortcode into an ordinary text field and assume it will be processed everywhere. Use the Shortcode widget or the plugin's documented Elementor integration.

Style the forecast cards

Use the widget's content and style controls for colours, typography, icons, spacing, borders, and the number of forecast items. Keep the location name and update status visible, especially when the forecast is used on a travel or local-business page.

Check tablet and mobile breakpoints. Hourly forecast rows often become too wide on small screens, so reduce the number of visible items, allow horizontal scrolling, or switch to a stacked layout if the widget supports it.

Test the live display

Preview the page while logged out and test it on desktop and mobile. Confirm that the location is correct, the time zone is sensible, units are right, icons load, and an understandable message appears if the weather service is unavailable.

If you see a 401 or invalid-key error, check that the key is entered correctly and has finished activating; some providers do not make new keys usable immediately. If the widget is empty after publishing, clear site and browser caches, check firewall settings that may strip inline scripts, and look for unclosed HTML tags.

The fast route

Let Synopter do it

Elementor weather widget with current, hourly, and extended forecasts for multiple locations; ideal for weather-aware local or travel sites.

Get Synopter

Sources

openweathermap.org /api/forecast5?utm_source=openai
elementor.com /help/edit-html-elementor/?utm_source=openai
developer.wordpress.org /reference/functions/wp_remote_get/?utm_source=openai
elementor.com /help/shortcode-widget/?utm_source=openai
wordpress.org /support/topic/weather-api-401-error/?utm_source=openai
elementor.com /help/dynamic-tags-pro-2/?utm_source=openai

Questions

Can Elementor display weather forecasts without a plugin?: Yes, but you need an external weather service and custom integration. A developer can fetch forecast data with JavaScript in Elementor's HTML widget or with server-side WordPress code, then format the response for the page. The manual route is reasonable for one fixed location, but it becomes harder to maintain when you need hourly data, several locations, caching, error handling, or responsive forecast layouts.
Where do the weather forecasts come from?: Weather forecasts come from an external weather API or an embedded weather service, not from Elementor itself. The integration sends a location, usually as latitude and longitude, together with an API key and options such as units or language. The provider returns forecast records that the widget or custom code turns into visible content.
Why is my Elementor weather widget showing an API error?: An API error usually means the key is missing, incorrect, restricted, inactive, or being used with the wrong provider endpoint. Check the key and location settings first, then allow time for a newly issued key to activate. Also check provider limits, firewall rules, caching, and whether the widget expects coordinates rather than a city name.
Can I show weather for different locations on different pages?: Yes, provided the widget or custom integration supports a location setting for each placement. Create a separate widget instance for each fixed location, or connect the location field to dynamic content supplied by your site. For many locations, confirm that the integration caches requests and handles missing or ambiguous place names instead of making a fresh API request on every page load.
Should I use custom code or a weather plugin?: Use custom code when you need a small, tightly controlled display and have someone available to maintain the API integration. Use a weather plugin when you need current, hourly, extended, or multiple-location forecasts without building the data requests, forecast layout, responsive behaviour, and error handling yourself. A plugin such as Synopter is the faster route for an Elementor-based site.