Do you love Gutenberg, the native block editor of WordPress? Do you want to add weather forecasts in Gutenberg?
Location Weather recently introduced several powerful weather forecast blocks for Gutenberg. Now, adding weather forecasts to your WordPress website is easier. You can add beautiful and real-time weather forecasts in minutes with the Gutenberg visual editor.
Let’s get in.
5 Easy Steps to Add a Weather Forecast in Gutenberg
Step 1: Get Location Weather
Location Weather is the best WordPress weather plugin with the highest number of ratings, active users, and 5-star reviews in the WordPress official plugin directory. It has also been recognized as the No. 1 weather plugin by the World’s top platforms like HubSpot, WPBeginner, and WP Engine.
Robust features, easy customizations, consistent updates, compatibility with all standard plugins & themes, an expert support team, and users’ support for the plugin have earned it the #1 WordPress weather plugin title.
Let’s install Location Weather. It’s simple.
However, if it’s your first time installing a WordPress plugin, you can read the documentation.
Step 2: Set a Free API Key
Once Location Weather activation is done, it will appear in your WordPress admin left sidebar, as shown in the image below. Follow the simple steps below and set a free API key from OpenWeather.
First, 1. Click Location Weather on your WordPress admin sidebar. → 2. Then, click Settings. → 3. API SETTINGS → 4. Get your API key. It will take you to the openweathermap.org Sign Up page. → 5. Sign up using your name and email. → 6. Click the tab API keys. → 7. Copy the API key and get back to Location Weather Settings on your WordPress dashboard. → 8. Paste your API key in the field. → 9. Hit the SAVE SETTINGS button on the top right.
Step 3: Choose a Weather block and a Template
Upon setting the weather API key, choose a weather block and template that best suits your website.
- Click the plus icon.
- Search weather block
- Select the best block for your site. For example, I’ve chosen the Weather Vertical View block.
- Choose a template or skip. You can check the preview and choose the better one later. Let’s have a look at the right sidebar.
The vertical block offers several beautiful templates. Choose a template. I’ve chosen the last one.
Step 4: Set Location
Location Weather Gutenberg blocks offer several options to set a location easily.
You can insert a city name with country code, city ID, ZIP code, or coordinates. Location weather allows you to rename the location with your business or organization’s name.
If you want to display the weather for the visitors’ respective locations, just turn on the Visitors’ Location Auto Detect switch.
Step 5: Customize Your Weather Forecast and Publish
Location Weather’s weather blocks for Gutenberg provide you with a lot of robust features and easy customizations to let you add weather forecasts in Gutenberg however you want.
The above screenshot shows only the Layout style settings. Similarly, every section has its style tab.
The key features and customizations are as follows.
- Daily forecast for 16 days
- Hourly forecast for 48 hours
- 3-hourly forecast for 120 hours
- Daily and Hourly forecasts on a single weather view
- Fahrenheit and Celsius Switching 🔥
- A lot of ready templates 🔥
- Detailed additional data carousel
- Location from Custom Fields
- Weather condition-based background
- Image and video background
- Horizontal and vertical layout
- Weather Map 🔥
- Horizontal & Map Combined Layout
- Sunrise and sunset orbit animation
- Wind Gust
- UV Index
- Dew Point
- Air Quality 🔥 and many more
Explore them and don’t leave any potential untapped to make your weather forecast more beautiful, functional, and detailed.
Once your customizations are done, hit the Publish/Update button.
This is how a basic vertical weather forecast looks.
You can make your weather forecast far better with your creative power and the customization opportunities of Location weather Gutenberg blocks.
Location Weather offers almost everything you need to add an accurate, detailed, and beautiful weather forecast for any location worldwide to your WordPress website.
Leave a Reply