The first thing you would need to do is, you’ll need to sign up for an API key from OpenWeather. You can do this by visiting the OpenWeather website and signing up for a free account.
Next, create a new plugin for your Elementor extension. You can do this by creating a new folder in your wp-content/plugins directory and adding a plugin.php file to it.
In your plugin.php file, add the following code to create an Elementor widget:
class Weather_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'weather-widget';
}
public function get_title() {
return __( 'Weather Widget', 'plugin-name' );
}
public function get_icon() {
return 'fa fa-cloud';
}
public function get_categories() {
return [ 'general' ];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' =>\Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'city',
[
'label' => __( 'City', 'plugin-name' ),
'type' =>\Elementor\Controls_Manager::TEXT,
]
);
$this->add_control(
'country',
[
'label' => __( 'Country Code', 'plugin-name' ),
'type' =>\Elementor\Controls_Manager::TEXT,
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$city = $settings['city'];
$country = $settings['country'];
if ( ! empty( $city ) && ! empty( $country ) ) {
// Fetch the weather data from the OpenWeather API
$api_key = 'YOUR_API_KEY_HERE';
$url = "https://api.openweathermap.org/data/2.5/weather?q=$city,$country&appid=$api_key";
$response = wp_remote_get( $url );
$data = json_decode( $response['body'], true );
if ( 200 === $response['response']['code'] ) {
// Display the weather data
echo '<p>Temperature: ' . $data['main']['temp'] . '</p>';
echo '<p>Humidity: ' . $data['main']['humidity'] . '</p