CodeCanyon Astero - WordPress Plugin
The plugin is an AJAX weather forecast solution designed for WordPress. It seamlessly integrates weather functionality to provide users with up-to-date forecasts directly on their WordPress websites. By leveraging AJAX technology, it ensures real-time updates and a smooth user experience. With customizable options and user-friendly settings, it caters to various website needs, making it a valuable addition for those looking to enhance their sites with weather forecast features.

Plugin Features
This dynamic plugin offers a range of features aimed at optimizing the weather forecasting experience on WordPress websites. Users can easily configure the plugin to display weather information in their desired location seamlessly. The interactive design allows for effortless navigation and smooth integration into existing WordPress themes, maintaining a cohesive look and feel across the site. With real-time updates and accurate data sourcing, users can rely on this plugin to keep visitors informed about weather conditions efficiently.
Its intuitive interface and user-friendly controls make managing weather forecasts on a WordPress site a breeze. From selecting different layouts to customizing color schemes, users have the flexibility to tailor the weather display to match their sites aesthetics seamlessly. The plugins robust functionality ensures reliable performance and consistent updates, keeping users and visitors informed with the latest weather forecasts at all times. Whether showcasing weather information for a personal blog or a business website, it enhances user engagement and overall site experience.
Users can leverage CodeCanyon Astero responsive design to ensure weather information is accessible across various devices. Whether viewed on desktops, tablets, or smartphones, the weather forecast display remains visually appealing and easy to navigate. This adaptability enhances user experience and ensures that visitors can easily access essential weather information regardless of the device they are using. With customizable features and reliable performance, it serves as a valuable tool for website owners looking to provide accurate and visually appealing weather forecasts on their WordPress sites.
With its seamless integration and robust feature set, the plugin offers a comprehensive solution for incorporating weather forecasts into WordPress websites. By utilizing AJAX technology, it delivers real-time updates, ensuring that users and visitors receive the most accurate and current weather information. Easy to set up and customize, it caters to a wide range of website needs, from personal blogs to corporate sites. Whether aiming to enhance user engagement or provide practical weather updates, this plugin is a versatile and reliable choice for WordPress users seeking to integrate weather forecasting seamlessly into their websites.
Specifications:
| Release date: | 13-11-2014 | |
| Last updated: | 08-09-2024 | |
| Type: | Paid | |
| License: | GPL | |
| Subject: | Maps & Weather | |
| Compatibility: | W5.x | |
| Includes: | Plugin | |
| Language packs: |
|
|
| Developer: | CodeCanyon | |
| Rating: | ||
Share with your friends!
CodeCanyon Astero Setup Guide: Weather Widget, Forecasts, and Geolocation in WordPress
CodeCanyon Astero is not simply a way to display the temperature in a sidebar. This guide explains how to turn it into a useful weather block for a city page, travel route, local service, event, hotel, seasonal-product store, or information portal. The main goal is to configure the data source, choose the right way to determine the city, display the forecast with a shortcode or widget, and confirm that visitors see current weather data rather than an attractive placeholder.
This guide provides a practical sequence: what to prepare before installation, where to enter your OpenWeatherMap key, how to create your first block in the Astero Weather menu, how a fixed location differs from coordinates, city search, and visitor geolocation, and when a full forecast is useful versus when a compact display is the better choice. It also covers caching, API limitations, HTTPS requirements, browser geolocation permissions, and safe styling without editing plugin files.
This guide is intended for WordPress site owners and editors who already have the plugin archive and want to test it carefully on a staging page. It does not cover purchasing, license activation, or bypassing restrictions. Everything below concerns configuring the installed product, verifying its behavior, and deciding whether Astero is a good fit for your site.
What Astero's Weather Block Is Designed to Do
Astero is one of those WordPress plugins that becomes useful only when placed in the right context. Add weather to a random sidebar, and it quickly becomes decorative. Connect the forecast to a real visitor decision, however, and the block can help someone choose a travel day, assess conditions for an event, understand seasonal demand, prepare for a walk or sports activity, or plan a visit to a local business.
According to the product page, Astero retrieves forecasts through the OpenWeatherMap API, displays them with Ajax, uses local caching, supports a fixed location, HTML5 geolocation with a GeoIP fallback, city or ZIP code search, multiple weather blocks on one page, widgets, and shortcodes. This combination matters: the plugin is not limited to a sidebar and does not force the entire site to use one global weather location.
Astero's strongest feature is the connection between "weather source -> location rule -> appearance -> placement." When those four parts work together, the administrator gets a manageable weather module rather than an abstract widget. For example, a ski-tour page can lock the forecast to a specific resort, a café chain page can let visitors search for their city, and a local delivery-service page can show conditions in its service area.
The plugin offers two main display modes: a simple block with a fullscreen overlay and a full forecast. The product listing also describes three background approaches: HTML5 or YouTube video, original or custom images for weather conditions, and a clean minimalist background. For an editor, that means Astero setup should begin not with a button color, but with a decision about what role the weather block should play on a particular page.
Where Astero Is Usually Useful
The plugin works best on sites where weather affects a visitor's next action. A travel blog can show a forecast next to a route. A hotel website can place it alongside a description of the property and activities. A local news portal can use it in a sidebar or at the top of a city page. A seasonal-product store can show forecasts next to collections for rain, heat, or cold, without promising any automatic e-commerce magic: Astero displays weather data, not WooCommerce product management.
- For local sites, a fixed location is important because the forecast should match the city or district described on the page.
- For travel and event pages, a full forecast with humidity, wind, cloud cover, sunrise, and sunset can be useful when those details help visitors plan their day.
- For multi-page directories, a shortcode with dynamic city or coordinate attributes is convenient because one configured template can be reused in different locations.
- For sites with an international audience, it makes sense to check the OpenWeatherMap language and measurement units so visitors do not have to guess what the temperature means.
When Another Approach May Be Better
Astero may be unnecessary if all you need is static text such as "warm today" or a single small icon in the footer. In that case, a separate API, cache, and background settings may be overkill. The plugin also does not replace a weather map, a professional weather station, an alert system for critical services, or a native page-builder block with deep Elementor design controls. Think of it as a forecast widget and front-end weather module, not a meteorological platform.
There is also a technical consideration: modern browser geolocation requires user consent and works more reliably in a secure HTTPS context. If the site is still available only over HTTP, the "detect the visitor's location" workflow will be problematic. In that case, use a fixed city, coordinates, or city search instead of building the entire experience around browser permission.
What to Check Before Installation
Before installing the plugin, separate WordPress requirements from the requirements of your weather use case. From the platform perspective, you need a WordPress site where you can install the plugin ZIP archive through the admin dashboard or upload it using the standard method. From Astero's perspective, you need working access to external weather data, a correct location, a placement area, and a theme that does not break the responsive block.
The CodeCanyon listing states compatibility with the current WordPress versions shown on the page, PHP 8.x support, modern browsers, and WooCommerce compatibility. That does not mean the plugin has automatically been tested with every future site stack. If you use a new WordPress version, aggressive caching, a JavaScript optimizer, or a custom theme, perform the first launch on a staging page that is either excluded from indexing or published only for testing.
OpenWeatherMap Key
Astero requires an OpenWeatherMap key in its global settings. This key allows the plugin to retrieve weather data. The OpenWeatherMap One Call API 3.0 documentation describes the required lat, lon, and appid parameters, along with unit and language parameters. For that reason, you should not consider the weather block ready until the key has been added, the request succeeds, and the location returns the expected data.
There is an important practical detail: a new OpenWeatherMap key may not begin working immediately. In its FAQ, OpenWeatherMap links a 401 error not only to a missing or invalid key, but also to a key that has not yet been activated or an attempt to access data outside the available plan. After registering a key, do not immediately change dozens of Astero settings. First, enter the key, save the settings, and test a basic weather block after a few minutes. If there is still no output, wait and check the key itself in your OpenWeatherMap account.
Access to Extended Forecasts
The Astero product page states that the 5- or 7-day forecast is connected to OpenWeatherMap One Call 3.0. The OpenWeatherMap One Call 3.0 documentation separately notes that this API belongs to the separate "One Call by Call" subscription, and that limits and the daily cap are configured in the account dashboard. The conclusion is straightforward: if the site displays only a shortened forecast or some data does not arrive, the issue may not be Astero's layout but the availability of the required API mode for your key.
Do not treat someone else's pricing plan as a permanent rule in your article or workflow. Check the current terms in your OpenWeatherMap account, set a daily call limit if you use a paid mode, and only then enable extended forecasts on high-traffic pages. Astero's local cache can reduce the number of requests, but it does not remove the dependency on an external weather service.
HTTPS and Location Permission
If you plan to show weather based on a visitor's location, verify HTTPS in advance. MDN describes the Geolocation API as a feature available in a secure context, and the browser asks the user for permission. Chrome has also restricted geolocation on insecure origins for a long time. In practice, this means that a user may deny location access, a browser may block the request, and the built-in IP fallback may return a less accurate city.
Do not make geolocation the only path to a forecast. Prepare a clear fallback instead: a default fixed city, a city or ZIP code search field, or a shortcode with coordinates for pages where the place is already known. That way, denying permission does not break the entire block.
GeoIP and IP Location Accuracy
Astero advertises IP detection using the free MaxMind GeoIP database. MaxMind warns in its documentation that IP geolocation is inherently imprecise: the result often refers to an area around a populated place rather than a specific address. That is normal for a weather widget, but it matters for expectations. If a visitor sees a neighboring city, the issue may not be Astero itself, but the nature of IP location, their internet provider, or a mobile network.
For local pages where a forecast for a specific point matters, coordinates are usually more reliable than automatic detection. A general city portal can keep search or a fallback. For legally sensitive projects, update the privacy policy if the site processes IP addresses, coordinates, or sends data to external services. WordPress privacy documentation also notes that IP addresses and other data may qualify as personal data depending on the applicable law.
Installation and Your First Working Weather Block
Astero's product page describes the installation path briefly: upload the plugin, activate it, go to Settings > Astero Weather, add your OpenWeatherMap key, create a new weather block through Astero Weather > Add New Weather, and insert the result on the site with a shortcode or widget. That is enough as a route map, but a real verification process should move a little more carefully.
Do not start on the homepage or with a widget in a live sidebar. Create a separate test page, give it a clear name for editors, and place only one Astero block there. This makes it easier to distinguish an API issue from a conflict with the theme, cache, optimizer, or a neighboring script. Once one block works reliably, you can move it to the intended location.
Step 1. Install and Activate the Plugin
In the WordPress dashboard, open Plugins, choose Add New, and upload the ZIP archive through Upload Plugin. After installation, click Activate. If the CodeCanyon archive includes documentation, a source package, and a separate plugin file, unzip it locally first and upload the plugin installation ZIP rather than the full package. This is a common detail with premium marketplace products.
After activation, check whether Astero menu items appear in the admin dashboard. The product page mentions Settings > Astero Weather for the API key and a separate Astero Weather > Add New Weather menu for creating a display. If the menu does not appear, first check the current user's permissions, then the active plugin list, and finally any PHP errors in the hosting logs.
Step 2. Add Your OpenWeatherMap Key
Open Settings > Astero Weather and enter your OpenWeatherMap key. Save the settings. Do not publish the key in page content, insert it into a shortcode, or share it with editors who do not need it. Using a weather API is perfectly normal, but the key should remain a site setting rather than a visible part of an article or block.
After saving, open a test page containing the future weather block. If the plugin displays an empty container, loading indicator, or error message, do not immediately change backgrounds, fonts, or layout. First confirm that the key is active, the location is selected correctly, and the OpenWeatherMap request is not returning a 401, 404, or 429 error.
Step 3. Create Your First Weather Display
From the Astero Weather menu, choose Add New Weather. Create a simple configuration: a fixed city or coordinates, a basic background, one language, and clear measurement units. Do not enable custom search, video backgrounds, multiple blocks, and complex styling all at once. The first block exists to confirm that the data chain works.
Save the display you created and note its identifier. The product listing gives the shortcode example [astero id='1234']. Replace the example number with the identifier for your weather block. If you use the WordPress block editor, place this code in a Shortcode block, because WordPress documentation identifies it as the standard way to add shortcodes in the block editor.
Step 4. Check the Public Page
Open the page in preview mode, then in a normal browser window without being signed in to the admin dashboard. This helps you see the output from a visitor's perspective. Check three things: whether the selected location or its name appears, whether the measurement units match your audience, and whether forecast details appear after Ajax loading. A working result is a visible weather block with a location, temperature, and forecast, not an empty area in the layout.
Detailed Configuration After Installation
Once Astero has displayed successfully for the first time, the most important part of the work begins. At this stage, you know that the plugin is active, the OpenWeatherMap key is saved, WordPress processes the shortcode, and the public page displays data. Now you need to turn a technically working block into a stable editorial system: choose global settings, define rules for different pages, decide where geolocation is necessary, where a fixed city is enough, and where it is better to offer visitor search.
Do not configure Astero as a standalone widget that simply "sits somewhere in the sidebar." The product has several mechanisms, and each one affects behavior: API source, location method, layout, background, text color and size, units, forecast language, cache, placement, and the number of instances on a page. If these settings are not aligned, the widget may look good but remain unhelpful: it may show the wrong city, become too heavy, disappear in a narrow column, or stop updating after aggressive optimization.
Global Settings: Data Source First, Appearance Second
The starting point remains Settings > Astero Weather. This is where you enter the OpenWeatherMap key, and where settings that affect all Weather displays may also be located. Even if the exact screen looks different in your version, the setup approach remains the same: first the data source, then forecast-retrieval rules, and finally the presentation layer. Appearance should not conceal a non-working API.
Save the basic configuration and create a control page with one block. If everything works, establish a simple rule for the team: do not edit the global key without a reason, and create new weather blocks only through separate Weather displays or an approved shortcode. This helps prevent a situation where one editor changes the global source and forecasts on several pages begin behaving differently without warning.
If several editors maintain the site, it is useful to create a brief internal reference. It only needs to state which Weather display is used for the homepage, which one is used for travel content, which one is for the sidebar, and which shortcode attributes are allowed to change. This reference is especially important for lat, lon, and city, because they look like small parameters but actually control the entire output.
Measurement Units and Forecast Language
Astero lets you display temperature in °C, °F, or as degrees without an explicit unit symbol. OpenWeatherMap supports the units and lang parameters, and the Astero page lists a large selection of OpenWeatherMap languages. For a Russian-speaking audience, Celsius and Russian weather descriptions are usually a sensible choice if the particular data and interface combination works correctly.
However, not every site should use the same option. A travel project for international guests may display an English interface and Fahrenheit for a U.S. audience. A local Russian site, city portal, or countryside resort website will usually benefit from Russian weather descriptions and Celsius. If the audience is mixed, it is better not to try to satisfy everyone with one block. Create separate pages or offer visitors a clear unit choice if the selected Astero mode supports it.
Language verification should not be merely formal. Open the page under different weather conditions or compare descriptions through OpenWeatherMap. If English phrases remain in the block, decide whether that matters to your audience. An English interface may be acceptable on an international page but look out of place on a local service whose remaining content is in Russian.
Configuring Visitor Search
Visitor search is a strong Astero feature, but it changes the role of the block. A fixed location answers the question, "What is the weather like in the place this page is about?" Search answers a different question: "What is the weather like where the visitor is interested?" If you enable search on a page for a specific tour, a visitor may leave the route context and start checking their own city. That is not always bad, but you should understand why you are giving them that freedom.
On a portal covering several cities, search can be a central feature. On a page about one venue, it should more often be secondary or disabled entirely. For city and ZIP code search, test ambiguous queries. For example, the same city name may exist in several countries, and a ZIP code without a country code may be interpreted differently than the user expects. The OpenWeatherMap Geocoding API shows that city, state, and country help narrow the match, so you can provide a short format hint near the search field.
If search is enabled, monitor the load. Different users may enter different cities, which means the cache for one fixed forecast will not always protect against frequent API requests. This rarely becomes an issue for a small site, but a high-traffic portal should monitor OpenWeatherMap statistics and avoid placing interactive search on every page without a clear reason.
Rules for Multiple Weather Displays
Astero supports multiple weather displays on one page and different output methods through shortcodes or widgets. To keep that from becoming chaotic, establish a naming convention. The internal name should not simply say "Weather 1"; it should explain why the block exists: "Homepage local weather," "Tour route full forecast," "Sidebar compact weather," or "Visitor search weather." Even if only administrators see the name, it reduces the risk of inserting the wrong ID.
For each Weather display, record four settings: location, mode, placement, and purpose. For example: "fixed New York, simple mode, news sidebar, quick local forecast." Or: "resort coordinates, full forecast, tour page, travel-planning decision." This approach keeps the setup understandable even months later, when another editor needs to update the page.
Do not hesitate to create a separate Weather display for different purposes, but avoid producing duplicates. If two blocks differ only by color, it may be better to solve that through the page's outer container. If they differ by location, layout, and purpose, a separate block is justified. After every new display, verify that the shortcode points to the correct ID rather than an old test block.
Backgrounds and Video as a Managed Risk
The background is Astero's most noticeable setting and, at the same time, one of the most common sources of poor readability. Video and weather images can make a block feel atmospheric, but they should not interfere with the data. If the temperature, city, and weather condition are harder to read than the background, the setting has failed. Be especially careful with a YouTube background: it adds an external dependency, may be blocked by browser policies, slow down loading, or behave differently on mobile devices.
For most informational pages, start with a clean minimal background or a static image. Reserve video for pages where the visual effect genuinely supports the experience: a resort, event, seasonal landing page, or travel route. Even there, check speed, contrast, autoplay, and behavior in a mobile browser. If the video does not start, the forecast should still remain readable.
A good rule for Astero: the background creates atmosphere, not meaning. The city, temperature, condition, forecast, and useful details should carry the meaning. If you need to shrink text or hide data to preserve an attractive background, return to a calmer presentation.
How to Verify the Output Before Publishing
Testing Astero should resemble a small acceptance test, not a quick glance in the editor. The weather block depends on an external API, JavaScript, location, cache, theme, browser permissions, and sometimes privacy policy. For that reason, "it looks fine in the editor" is not enough. You need to confirm that a visitor sees a working forecast in the real environment.
Test Without Signing In to WordPress
Run the first test in a window where you are not signed in. An administrator may have different scripts, disabled caching, the WordPress toolbar at the top, and permissions that an ordinary visitor does not have. Open the public URL, wait for the page to load, and check whether the weather block appears without a manual refresh. If it appears only after a second reload, investigate a caching conflict or delayed JavaScript loading.
Check the visible state: city or location name, temperature, measurement units, weather condition, additional details, and overlay behavior if you selected the simple layout with fullscreen overlay. Then compare the data with an independent weather source. You do not need an exact match down to decimal places because services use different models, but the city and approximate values should be plausible.
Mobile and Narrow Widths
Astero advertises a responsive layout and elements that adapt to container size. But the real output depends on the theme. Test not only phone width, but also a narrow desktop sidebar if the widget will be placed there. A full forecast may look good in the main column and become cramped in a widget area. That is not a plugin error; it is the wrong choice of placement.
If the block is difficult to read at a narrow width, do not try to solve everything by reducing the font size. First, choose a more compact layout, remove a heavy background, reduce the number of details, or move the forecast into the main page content. A small weather block packed with parameters is worse than a compact block that clearly shows the location, temperature, and near-term condition.
Testing Geolocation When the User Denies Access
If HTML5 geolocation is enabled, test both paths: the user allows access and the user denies it. Many sites test only the successful path, then receive complaints from visitors who clicked "Block" or whose browsers have already denied access. In a normal implementation, denial should not leave an empty unexplained block. A fallback, search option, or fixed location should take over if that is how you planned the page.
Also verify HTTPS. If the page opens over HTTP, modern browsers may not allow access to geolocation. Do not argue with this technical requirement through code workarounds. Move the page to HTTPS or use a workflow without browser geolocation. For a standard weather widget, that is usually simpler and more honest for the user.
Check the Cache After Changing a Location
Astero uses caching for speed and to reduce API requests, but it can confuse an editor. Use this test: save a Weather display, open the page, note the location, then change the location to a test value and see when the public block changes. If the output does not change immediately, account for the local cache and the site cache. Do not conclude that "the plugin is broken" simply because the forecast did not update instantly.
For publication, it is important to understand not only the current output but also the refresh interval. If a forecast on a tour page updates at a reasonable interval, that is normal. If you operate a weather-warning page, Astero may not be the right tool because a forecast widget does not replace a specialized alert system or official notices.
Test the Editorial Workflow
Before launch, give the test page to someone who will actually use it: an editor, content manager, or site owner. Ask them to change the city, insert the shortcode into a new page, switch measurement units, or choose another Weather display. If the person gets confused by IDs, cities, and modes, the problem is not the person but the lack of an internal rule.
For reliable operation, a short checklist is enough: which ID to use, where the test page is located, how to enter coordinates, when to use search, how to verify the public output, and what to do when the block is empty. This type of checklist saves more time than complex technical documentation that nobody reads.
Readiness criterion: Move Astero to an important page only after testing it as a regular visitor, at mobile width, with the correct location, a working API, and clear behavior when geolocation is denied.
Location in Astero: City, Coordinates, Search, and Geolocation
Choosing a location is Astero's most important product-specific area. The product page lists several options: a fixed location, HTML5 geolocation with a GeoIP fallback, user search by city or ZIP code, and a dynamic location in a shortcode through latitude and longitude or a city with a country code. These are not a set of identical checkboxes. Each mode solves a different problem and creates a different risk.
Fixed Location for a Page About a Known Place
Choose a fixed city or coordinates when the page is already dedicated to a particular place. This is the clearest option for a hotel, resort, local business, municipal page, sports venue, or route article. Visitors do not need to grant location access, and the editor controls which forecast appears next to the content.
If a city may have multiple places with the same name, coordinates are better. The OpenWeatherMap Geocoding API shows that a direct city-name search can return multiple matches and that U.S. searches also take a state code into account. In the Astero interface, this has a simple practical effect: if selecting by name produces the wrong city, use latitude and longitude to remove the ambiguity.
Dynamic Shortcode with Coordinates
The Astero listing provides the example [astero id='1234' lat='40.712776' lon='-74.005974']. This shortcode is useful when you want one weather-block design while different pages need to display different places. For example, in a travel-location directory, you can create a base Weather display and then change only the coordinates on each page. This reduces the risk of inconsistent styling and helps maintain a unified visual style.
The main rule is to store coordinates alongside the page's editorial data and verify them before publication. An error in a single digit can send the forecast to another district or even another country. After adding the shortcode, open the page and compare the place name, temperature, and map with an independent weather source. If Astero shows an unexpected city, return to the coordinates and verify the order: latitude in lat, longitude in lon.
City or ZIP Code Search
User search works well for sites where visitors select their own region: a travel portal, network of locations, local listings, or weather reference site. In this mode, the weather block becomes interactive: someone enters a city or ZIP code, selects measurement units, and receives a result for themselves. But interactivity costs more in support terms: more API requests, more city-name spelling variations, and more user questions if the result differs from the local forecast they are used to.
If you enable search, test several typical queries from your audience in advance: a city in Russian and English, a city with a country code, a ZIP code, and a major city with multiple matches. For an international audience, it is helpful to suggest the format in nearby text, but do not overload the interface with lengthy instructions.
Geolocation and GeoIP Fallback
HTML5 geolocation provides a more personalized experience, but it depends on user consent and browser policy. Astero advertises a GeoIP fallback as well as a separate IP Detection Only mode, which avoids a browser permission request and uses the MaxMind database instead. This is convenient if you do not want to show visitors a location permission prompt simply for a weather block.
However, IP location does not guarantee an exact city. MaxMind explicitly explains that IP geodata provides an area and may be inaccurate. For that reason, do not promise something like "weather near you down to the street." Use neutral wording such as "weather for your region" or "weather nearby," and leave city search available if the visitor needs a more precise result.
Layout Modes and Backgrounds: Making the Forecast Useful Rather Than Heavy
Astero differs noticeably from minimal weather plugins because it lets you configure not only the data source but also the presentation. The product page lists two modes: simple layout with fullscreen overlay and full forecast layout. It also describes three background types: HTML5 video or a YouTube background, original or custom image backgrounds for weather conditions, and a clean minimal background. Choose these settings according to the block's purpose, not by the principle of "turn on everything that looks nice."
Simple Mode with an Overlay
Simple mode is appropriate where weather should be noticeable without taking up half the page. Examples include a blog sidebar, the top section of a local site, an event card, or a footer widget area. The visitor sees a compact state and can open details if needed. This approach preserves the page rhythm and does not compete with the main content.
Before choosing this mode, check how the overlay works on a mobile device and in a narrow column. Astero advertises a responsive layout and responsive elements for the full forecast that adjust their output based on element size. However, a theme may add its own spacing, overflow rules, or width restrictions. That is why testing must happen not only in the editor but also on the public page.
Full Forecast
The full forecast layout is useful when details genuinely help the visitor. Wind, cloud cover, and a multi-day forecast matter for a travel route. Humidity and temperature may matter for a sporting event. For local media, a full forecast can become a standalone information block. But if the page section is about buying a ticket or reading a news story, a full forecast may distract from the primary task.
Check the full forecast against the width of its container. In a narrow sidebar, details may become too dense even if the layout does not technically break. In that case, move the block into the main page content or use simple mode. A good weather block can be understood in a few seconds: location, temperature, condition, near-term forecast, and important details should not disappear into visual noise.
Weather-Condition Backgrounds
Image or video backgrounds are suitable for pages where atmosphere is part of the experience: travel, resorts, outdoor events, and seasonal collections. But video backgrounds should be enabled deliberately. They can increase page weight, make text harder to read, and conflict with browser autoplay policies. If your audience often visits from mobile devices, a minimalist background or static images are usually safer.
Custom images for weather conditions give editors control over the style. For example, a hotel site can prepare calm landscape photos for sun, rain, clouds, and snow. But do not turn the widget into a photo gallery. The background should support the forecast, not compete with the temperature, icons, and text. Check contrast in both light and dark weather scenes, especially if you change the font color.
Fonts, Colors, and Borders
Astero lists support for a large collection of Google Fonts, unlimited background and text colors, a general font size, temperature size, border style, and rounded corners. A practical configuration order is this: first choose the display mode and location, then the measurement units and language, then the background, and only at the end fonts and decorative settings. If you reverse that order, you will be styling a block that has not yet proven it retrieves the correct data.
For a typical website, start with a simple design set: one main text color, one calm background, a sufficiently large temperature, no excessive rounding, and no multiple decorative layers. If the block is in a widget area, use dimensions that match the theme. If it appears inside an article, make it wider and give the forecast more breathing room.
Shortcode and Widget: Where to Display Astero in WordPress
Astero supports both classic display methods: shortcodes and widgets. A shortcode is better for a page or post where the weather block is part of the meaningful content. A widget is better for a repeating theme area: a sidebar, footer, or possibly a top area if the theme provides one. Do not choose the method out of habit. Choose it based on where the reader makes a decision.
Shortcode Inside a Page
WordPress documentation for the Shortcode block explains that a shortcode can be inserted through a dedicated editor block. For Astero, the basic example looks like this:
[astero id='1234']
If the place must be set directly in the shortcode, the product page shows a coordinate-based version:
[astero id='1234' lat='40.712776' lon='-74.005974']
For a city with a country code, it shows this approach:
[astero id='1234' city='New York, US']
In a real project, use one writing style and document it for editors. If some pages use a city, some use coordinates, and others use automatic detection, maintaining the output becomes more difficult. Your editorial guidelines only need to say this: use coordinates for pages about specific places, search for a general weather page, and a fixed city for the sidebar.
Widget in a Theme Area
Widget output is convenient for a recurring forecast. WordPress supports the block-based widget editor and compatibility with older widgets through the Legacy Widget block. If the theme has a suitable widget area, you can add Astero as a widget or through a shortcode block, depending on how the plugin registers its interface. After adding it, always check the public page because widget areas are often narrower than the main column.
For a sidebar, choose compact mode more often. For a footer, use a minimalist background and a short forecast. For a top bar, use it only if the forecast is relevant to the site's purpose and does not slow the above-the-fold area. If the block appears on every page, local caching becomes especially important: the same forecast should not force the site to call the API on every view.
Multiple Blocks on One Page
Astero states that it supports multiple weather displays on one page. This can be useful for comparative routes, a tour page with several cities, or a location directory. But every additional display increases the visual and technical load. If you show three cities side by side, visitors should understand why they are being compared: "start," "pass," "finish," "today," "tomorrow," "weekend," or "departure point," "arrival point."
Do not place five widgets just because the plugin allows it. One well-designed block with search or two comparable blocks for different locations are better than a long strip of weather cards with no clear purpose. After configuring multiple displays, check network requests in browser developer tools and review cache behavior: if each block bypasses the cache or makes too many requests, reduce the number of blocks or increase the refresh interval where that option is available.
Practical Use Case: A Forecast for a Tour or Local Event Page
Consider a situation where Astero genuinely helps: a site publishes a page for a one-day tour or local outdoor event. Visitors need to understand whether to bring warm clothing, expect rain, account for strong wind, and review the forecast for the next few days. The page needs more than a decorative weather icon. It needs a small information block alongside the route description.
Goal
Create a weather block for a specific location that shows current conditions and a near-term forecast, does not ask the user for geolocation permission, does not depend on an ambiguous city name, and fits calmly within the page. This use case is best built with coordinates because the event location is known in advance.
Preparation
Before configuring the block, prepare the venue coordinates, OpenWeatherMap key, test page, and example text that will appear near the block. If the event takes place in a mountain, rural, or suburban area, coordinates are especially important: the name of the nearest city may return a forecast for the wrong point. If you plan to use an extended forecast, check whether the required OpenWeatherMap mode is available in the account in advance.
Configure the Weather Display
- Open
Astero Weather > Add New Weatherand create a new block with a clear internal name, such as "Tour route weather." - Choose full forecast mode if visitors need details for several days, or simple mode if the block should take up less space.
- Set measurement units that are clear for the site's primary audience. Celsius is usually appropriate for a Russian-language site, but an international page may require another option.
- Choose a calm background. For a tour page, an image or minimalist background is often enough because bright video can distract from the route.
- Save the block and insert its shortcode on the test page, adding coordinates through
latandlon.
Verification
Open the page without administrator privileges. Compare the location with an independent weather service, make sure the temperature and weather condition look plausible, and confirm that forecast details do not overflow the container width. Then reduce the browser width or check mobile mode. If the full forecast becomes too dense, switch to simple mode or move the block to a wider area.
Use-case summary: for a page about a known place, use coordinates rather than visitor auto-detection. This allows Astero to display the forecast for the location being described and avoids an unnecessary browser permission request.
Cache Considerations and Urgent Changes
The product page advertises a one-hour local cache. This is good for performance and API limits, but it can interfere with immediate verification after settings change. If you change the location and immediately see the old city, first wait for the cache to refresh or check whether the plugin interface offers a cache-clearing action. If it does not, do not manually delete files on a live site. Test on a separate page instead and account for the update delay.
Cache, Performance, and API Limits
A weather plugin has a specific kind of load: it depends on an external service but appears inside a page that visitors expect to load now. Astero addresses this through Ajax, conditional loading of scripts and styles, local caching, and HTML5 caching, according to the product page. In the ideal flow, the page HTML loads quickly, the weather block retrieves data separately, and repeat views do not consume API calls unnecessarily.
That does not mean you can forget about caching. On the contrary, caching makes it important to understand when data updates, how multiple blocks behave, and what happens after settings change. If the site has little traffic, a one-hour cache usually does not cause problems. If the site has many visitors and the weather block appears on every page, caching protects against unnecessary requests. If the site covers rapidly changing conditions, such as a storm warning, make sure the selected forecast format is current enough and does not create a false impression of instant updates.
How to Avoid Hitting Request Limits
OpenWeatherMap describes 429 errors as a sign that the request limit has been exceeded. For Astero, this is especially important when search is enabled, several blocks appear on one page, and traffic is high. Local caching helps, but user searches for different cities can create different requests. On a high-traffic site, it is better to enable one primary block first, observe actual behavior, and then expand the use cases.
- Do not display multiple weather blocks on every page without a clear editorial reason.
- Do not disable caching merely to create a sense of "liveness" if the forecast does not need to update every minute.
- Check the OpenWeatherMap account dashboard and set a daily limit where available and necessary for cost control.
- Do not enable extended forecasts if current conditions and the next few days are sufficient for the user.
Compatibility with Cache Plugins and Optimizers
Optimization plugins can combine, defer, or move JavaScript. This is often safe for regular text, but a weather block using Ajax may depend on script loading order. Astero's changelog includes previous fixes related to JavaScript loading, jQuery, and theme compatibility. Therefore, if Astero stops displaying weather after minification or deferred loading is enabled, check the optimizer as well as the API.
A practical sequence is this: temporarily disable combining and deferred loading for the weather page, test the block, and then restore optimization one setting at a time. If the optimizer provides exclusions for plugin scripts or CSS, add them selectively. Do not disable site-wide caching permanently because of one widget, but do not force Astero through aggressive optimization that breaks Ajax requests either.
Safe Styling Without Editing Plugin Files
Astero already includes settings for colors, fonts, borders, and backgrounds. Additional CSS is needed only when you want to integrate the block carefully into a particular page: add outer spacing, limit width, align the widget with text, or style a container around the shortcode. Do not edit the plugin's own files or modify the theme directly. WordPress documentation for Custom CSS recommends using Appearance > Customize > Additional CSS, because these changes are not lost when the theme is updated.
The safest approach is to wrap the shortcode in a standard Group block or HTML container with your own class, then apply CSS to that outer layer. This prevents you from depending on Astero's internal classes, which may change after an update.
<div class="astero-guide-weather-box">
[astero id='1234']
</div>
Here is an example of gentle container styling:
.astero-guide-weather-box {
max-width: 760px;
margin: 28px auto;
padding: 18px;
border-radius: 10px;
background: #f4f7fb;
}
.astero-guide-weather-box iframe,
.astero-guide-weather-box img,
.astero-guide-weather-box video {
max-width: 100%;
}
This change does not interfere with the API, modify PHP, or attempt to guess the plugin's internal structure. It simply creates a safe frame for the block on a specific page. Testing is straightforward: open the page before and after adding the CSS, make sure the forecast loads, confirm the width does not break the mobile view, and ensure the container background does not reduce the contrast of Astero text. Rolling back is equally simple: remove the snippet from Additional CSS or remove the container class.
If you need to modify Astero's internal elements selectively, first identify their actual classes with the browser inspector on a test page. Do not copy CSS from another site without verification, because a different plugin or theme version may use a different structure.
Common Astero Issues and Troubleshooting
It is best to troubleshoot a weather widget in sequence: API key, availability of the required OpenWeatherMap mode, location, cache, browser geolocation, JavaScript conflicts, and theme styles. If you jump straight to CSS or reinstalling the plugin, it is easy to waste time and miss a basic 401 error or incorrect coordinates.
Weather Does Not Load at All
Symptom: the page shows an empty block, endless loading, or a message that data is unavailable. A possible cause is that the OpenWeatherMap key was not added in Settings > Astero Weather, the key contains an error, a new key has not activated yet, or the site cannot make a request to the external API.
Check the key in Astero settings, save the page, and open the test block in a separate browser. If the key was created recently, wait for activation. If you can access hosting logs, inspect the external request responses. A 401 error usually relates to the key or access, 429 to a limit, and 404 to an invalid city, ZIP code, or request format.
Only Part of the Forecast Appears
Symptom: current weather appears, but the multi-day forecast is shorter than expected or does not display. Possible causes include Astero settings, the selected layout, One Call 3.0 availability in OpenWeatherMap, or account limits. The Astero page directly connects extended forecasts with One Call 3.0, so checking the API account is required here.
First confirm that Astero has the required display format enabled, then check OpenWeatherMap. If you do not need extended mode, do not try to "fix" it just to check a box: keep the compact forecast that works reliably and meets the page's purpose.
The Wrong City Is Displayed
Symptom: a visitor or editor sees a neighboring city, another region, or an unexpected version of a place with the same name. Possible causes include an ambiguous name, a missing country code, inaccurate IP data, a mobile network, or a GeoIP fallback.
For a page about a known place, use coordinates. For city search, include a country or state where applicable. For automatic detection, do not promise perfect accuracy. If complaints recur from one region, check not only Astero but also independent IP geolocation services.
The Browser Does Not Ask for Geolocation Permission
Symptom: location-detection mode does not trigger a permission request or immediately returns a denial. Possible causes include a site not running over HTTPS, the user having denied access previously, geolocation being limited by browser policy, or the page being embedded in a context where geolocation is prohibited.
Check HTTPS, browser site permissions, and the presence of a fallback. If the site cannot move to HTTPS, do not build the interface around HTML5 geolocation. Use a fixed city, coordinates, or search because that path is more predictable.
An Old Forecast Appears After Settings Changes
Symptom: you changed the location, background, or mode, but the public page still displays the old state. A possible cause is the Astero local cache, WordPress cache, CDN cache, or browser cache. The product page advertises a one-hour local cache, so a delay in data updates is not always an error by itself.
Check the page in an incognito window, temporarily clear the site cache, and confirm that you edited the Weather display whose ID is inserted in the shortcode. If the output updates after clearing the cache, configure cache rules carefully and do not disable every optimization unnecessarily.
The Widget Breaks the Layout or Is Hard to Read
Symptom: text overlaps the background, the full forecast does not fit in the sidebar, the overlay button is too small, or the video background interferes with reading. Possible causes include an unsuitable layout, a widget area that is too narrow, a theme CSS conflict, or an excessively high-contrast custom background.
Switch Astero to a more compact mode, reduce the number of details, simplify the background, and check the container. If necessary, wrap the shortcode in an outer block with CSS as shown above. Roll back questionable appearance settings one at a time to identify exactly what is harming readability.
A JavaScript Optimizer Breaks Ajax Loading
Symptom: the block works without minification and deferred loading, but stops working after the optimizer is enabled. A possible cause is moving or combining scripts, a jQuery conflict, delayed initialization, or a blocked request. Astero's history includes fixes related to JavaScript and compatibility, so this type of check should not be skipped.
Disable the questionable optimizer setting only for testing, then add an exclusion for Astero scripts if your cache plugin supports it. If the exclusion does not help, keep the weather block on a page without aggressive optimization or choose a more static placement with less interactivity.
Astero Setup and Usage FAQ
Can I use Astero without an OpenWeatherMap key?
Astero requires an OpenWeatherMap key for a working forecast because the product page explicitly lists entering the key in Settings > Astero Weather as a required step. If the block does not load, checking the key should be your first step.
Why did I add a new key but the forecast has not appeared yet?
OpenWeatherMap notes that a 401 error may occur if the key has not been activated yet. Wait, check the key in your account, and do not change other Astero settings at the same time. If the block is still empty after some time, check the available API mode and location format.
Which location option should I use for a page about a specific place?
For a hotel, route, venue, or city page, use a fixed location or coordinates. Visitor geolocation shows weather where the person is located, not where the page is focused. For a product page about a specific place, that is often the wrong approach.
What should I do if geolocation does not work?
Check HTTPS, browser permissions, and the fallback. The Geolocation API requires a secure context and user consent. If the visitor denies access or the browser blocks the request, Astero should have a fallback: GeoIP, a fixed city, search, or coordinates.
Can I display multiple forecasts on one page?
Yes. The product page states that multiple weather displays are supported on one page. Use this only where comparison is genuinely useful: several route points, several cities on a tour, or different branches. For a regular article, one block is usually clearer.
Why does the full forecast not display all expected days?
The reason may be the layout settings, One Call 3.0 availability, an OpenWeatherMap limit, or caching. Start by checking the API account and mode in Astero. If a detailed forecast is not essential, a stable compact option is better than leaving a broken extended block in place.
Will the weather widget affect site speed?
Astero advertises Ajax, conditional loading of scripts and styles, local caching, and HTML5 caching, which should reduce unnecessary load. However, the actual impact depends on the number of blocks, background, video, cache plugin, theme, and traffic. Test the page before and after enabling the widget, especially if you add a video background or multiple weather displays.
Do I need to add a privacy notice?
If you use visitor geolocation, an IP fallback, or an external weather service, review the site's privacy policy. WordPress privacy documentation notes that an IP address and related data may be personal data depending on the applicable law. The risk is lower for a standard fixed forecast, but you should still understand the external data transfer involved.
When CodeCanyon Astero Is a Good Choice
CodeCanyon Astero is worth using if you need a configurable WordPress weather widget with practical display options: a shortcode in an article, a widget in a theme area, a fixed location, coordinates, visitor search, geolocation with a fallback, and presentation modes ranging from a minimalist block to a full forecast. It is especially appropriate where weather affects the reader's action instead of merely decorating the page.
Before implementation, verify four things: your OpenWeatherMap key, the available forecast mode, HTTPS for geolocation, and block behavior alongside your theme and cache plugin. If everything works on a test page, you can move the block into the intended content, carefully configure the background and typography, and then test the mobile presentation. If the first test already shows that you need only the simplest weather text or deep Elementor integration, compare Astero with the alternatives in the previous section.
Once the test page is ready, the forecast loads reliably, the location matches the page's purpose, and the block does not break the layout, you can download the latest version of CodeCanyon Astero or open the installation archive on the product page and repeat the verification in your working environment. The key is not to publish a weather block blindly: configure it first, verify the output, and then enable it on important pages.


