start_controls_section( 'weather_content_section', [ 'label' => esc_html__( 'General', 'wpr-addons' ), ] ); $this->add_control( 'widget_title', [ 'label' => esc_html__( 'Title', 'wpr-addons' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'Weather Widget', 'wpr-addons' ), ] ); $this->add_control( 'weather_api_key', [ 'label' => esc_html__( 'OpenWeather API Key', 'wpr-addons' ), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'placeholder' => esc_html__( 'Insert Your API key', 'wpr-addons' ), 'description' => sprintf( '%1$s %3$s %4$s', esc_html__( 'Create your API key on', 'wpr-addons' ), esc_url( 'https://openweathermap.org/appid' ), esc_html__( 'openweathermap.org', 'wpr-addons' ), esc_html__( 'and paste it here.', 'wpr-addons' ) ), ] ); $this->add_control( 'temperature_unit', [ 'label' => esc_html__( 'Unit', 'wpr-addons' ), 'type' => Controls_Manager::SELECT, 'default' => 'cel', 'options' => [ 'cel' => esc_html__( 'Celsius (°C)', 'wpr-addons' ), 'far' => esc_html__( 'Fahrenheit (°F)', 'wpr-addons' ), ], ] ); $this->add_control( 'location', [ 'label' => esc_html__( 'Location', 'wpr-addons' ), 'type' => Controls_Manager::TEXT, 'default' => 'New York', 'description' => esc_html__( 'Example: London, GB', 'wpr-addons' ), ] ); $this->add_control( 'forecast', [ 'label' => esc_html__( 'Forecast', 'wpr-addons' ), 'type' => Controls_Manager::SELECT, 'default' => '3', 'options' => [ '1' => esc_html__( '1 Day', 'wpr-addons' ), '2' => esc_html__( '2 Days', 'wpr-addons' ), '3' => esc_html__( '3 Days', 'wpr-addons' ), '4' => esc_html__( '4 Days', 'wpr-addons' ), '5' => esc_html__( '5 Days', 'wpr-addons' ), 'none' => esc_html__( 'None', 'wpr-addons' ), ], ] ); $this->end_controls_section(); $this->start_controls_section( 'weather_style_section', [ 'label' => esc_html__( 'Card', 'wpr-addons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'weather_card_bg', [ 'label' => esc_html__( 'Background', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#FFFFFF', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => 'background-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'weather_card_border', 'selector' => '{{WRAPPER}} .wpr-weather-wrap', 'fields_options' => [ 'border' => [ 'default' => 'solid', ], 'width' => [ 'default' => [ 'top' => '1', 'right' => '1', 'bottom' => '1', 'left' => '1', 'isLinked' => true, ], ], 'color' => [ 'default' => '#E8E8E8', ], ], ] ); $this->add_control( 'weather_card_radius', [ 'label' => esc_html__( 'Border Radius', 'wpr-addons' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 10, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 60, ], ], 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => 'border-radius: {{SIZE}}px;', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'weather_card_shadow', 'selector' => '{{WRAPPER}} .wpr-weather-wrap', ] ); $this->end_controls_section(); $this->start_controls_section( 'weather_icons_style_section', [ 'label' => esc_html__( 'Icons', 'wpr-addons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'weather_icon_warm_color', [ 'label' => esc_html__( 'Sun & Warm Highlights', 'wpr-addons' ), 'description' => esc_html__( 'Sun discs, rays, daytime sun in cloudy/rain icons, and storm lightning.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#F59E0B', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-warm: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_cloud_color', [ 'label' => esc_html__( 'Cloud Outline', 'wpr-addons' ), 'description' => esc_html__( 'Main cloud shapes and overcast strokes.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#D1D5DB', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-cloud: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_cloud_secondary_color', [ 'label' => esc_html__( 'Cloud Shadow / Layer', 'wpr-addons' ), 'description' => esc_html__( 'Secondary cloud layer in partly cloudy icons.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#9CA3AF', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-cloud-secondary: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_rain_color', [ 'label' => esc_html__( 'Rain & Water', 'wpr-addons' ), 'description' => esc_html__( 'Raindrops, humidity droplet outline, and animated rain strokes.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#0284C7', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-rain: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_night_color', [ 'label' => esc_html__( 'Moon & Night Sky', 'wpr-addons' ), 'description' => esc_html__( 'Moon crescent and night variants of cloudy / rainy icons.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#64748B', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-night: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_snow_color', [ 'label' => esc_html__( 'Snow & Ice', 'wpr-addons' ), 'description' => esc_html__( 'Snowflake dots and icy accents.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#7DD3FC', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-snow: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_thermo_bulb_color', [ 'label' => esc_html__( 'Thermometer (Hot)', 'wpr-addons' ), 'description' => esc_html__( 'Bulb fill and mercury stroke — reads as “warm”.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#DC2626', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-thermo-bulb: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_thermo_tube_color', [ 'label' => esc_html__( 'Thermometer (Tube)', 'wpr-addons' ), 'description' => esc_html__( 'Glass tube outline and tick marks.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#A3A3A3', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-thermo-tube: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_wind_color', [ 'label' => esc_html__( 'Wind', 'wpr-addons' ), 'description' => esc_html__( 'Wind gust curves — slightly darker reads better on white.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#94A3B8', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-wind: {{VALUE}};', ], ] ); $this->add_control( 'weather_icon_fog_lines_color', [ 'label' => esc_html__( 'Fog / Mist Lines', 'wpr-addons' ), 'description' => esc_html__( 'Horizontal mist lines in fog icons.', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#CBD5E1', 'selectors' => [ '{{WRAPPER}} .wpr-weather-wrap' => '--wpr-weather-icon-fog-lines: {{VALUE}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'weather_text_style_section', [ 'label' => esc_html__( 'Text', 'wpr-addons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'weather_title_heading', [ 'label' => esc_html__( 'Title Text', 'wpr-addons' ), 'type' => Controls_Manager::HEADING, ] ); $this->add_control( 'weather_title_color', [ 'label' => esc_html__( 'Color', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#FFFFFF', 'selectors' => [ '{{WRAPPER}} .wpr-weather-header' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'weather_accent_bg', [ 'label' => esc_html__( 'Background Color', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#605BE5', 'selectors' => [ '{{WRAPPER}} .wpr-weather-header' => 'background-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'weather_title_typography', 'selector' => '{{WRAPPER}} .wpr-weather-header', 'fields_options' => [ 'typography' => [ 'default' => 'custom', ], 'font_weight' => [ 'default' => '600', ], 'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 14, ], ], ], ] ); $this->add_control( 'weather_text_divider_1', [ 'type' => Controls_Manager::DIVIDER, ] ); $this->add_control( 'weather_main_heading', [ 'label' => esc_html__( 'Main Text', 'wpr-addons' ), 'type' => Controls_Manager::HEADING, ] ); $this->add_control( 'weather_main_color', [ 'label' => esc_html__( 'Color', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#333333', 'selectors' => [ '{{WRAPPER}} .wpr-weather-temp, {{WRAPPER}} .wpr-weather-location, {{WRAPPER}} .wpr-weather-forecast-temp, {{WRAPPER}} .wpr-weather-forecast-day' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'weather_main_typography', 'selector' => '{{WRAPPER}} .wpr-weather-temp, {{WRAPPER}} .wpr-weather-location, {{WRAPPER}} .wpr-weather-forecast-temp, {{WRAPPER}} .wpr-weather-forecast-day', 'fields_options' => [ 'typography' => [ 'default' => 'custom', ], 'font_weight' => [ 'default' => '700', ], ], ] ); $this->add_control( 'weather_text_divider_2', [ 'type' => Controls_Manager::DIVIDER, ] ); $this->add_control( 'weather_meta_heading', [ 'label' => esc_html__( 'Meta Text', 'wpr-addons' ), 'type' => Controls_Manager::HEADING, ] ); $this->add_control( 'weather_meta_color', [ 'label' => esc_html__( 'Color', 'wpr-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '#7A7A7A', 'selectors' => [ '{{WRAPPER}} .wpr-weather-condition, {{WRAPPER}} .wpr-weather-extra-info' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'weather_meta_typography', 'selector' => '{{WRAPPER}} .wpr-weather-condition, {{WRAPPER}} .wpr-weather-extra-info', 'fields_options' => [ 'typography' => [ 'default' => 'custom', ], 'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 13, ], ], ], ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); $api_key = ! empty( $settings['weather_api_key'] ) ? trim( $settings['weather_api_key'] ) : ''; $city_name = ! empty( $settings['location'] ) ? trim( $settings['location'] ) : ''; if ( empty( $api_key ) || empty( $city_name ) ) { $this->render_demo_content( $settings ); return; } $weather_data = $this->get_weather_data( $city_name, $settings['temperature_unit'], [ 'weather_api_key' => $api_key, ] ); if ( isset( $weather_data['now']->cod ) && 200 !== (int) $weather_data['now']->cod ) { $this->render_error( (string) $weather_data['now']->cod ); return; } if ( empty( $weather_data['now'] ) || empty( $weather_data['forecast'] ) ) { $this->render_demo_content( $settings ); return; } $weather_data_now = $weather_data['now']; $weather_data_forecast = $weather_data['forecast']; $icon_code = $weather_data_now->weather[0]->icon; $icon_name = $this->get_weather_icon_name_by_code( $icon_code ); $condition = $weather_data_now->weather[0]->description; $humidity = $weather_data_now->main->humidity; $wind_speed = round( $weather_data_now->wind->speed ); $temperature = round( $weather_data_now->main->temp ) . ( 'cel' === $settings['temperature_unit'] ? '°C' : '°F' ); $today_date = gmdate( 'Ymd', current_time( 'timestamp', 0 ) ); $min_temperature = null; $max_temperature = null; foreach ( $weather_data_forecast->list as $forecast ) { $forecast_date = gmdate( 'Ymd', $forecast->dt ); if ( $today_date === $forecast_date ) { if ( null === $min_temperature || $forecast->main->temp_min < $min_temperature ) { $min_temperature = $forecast->main->temp_min; } if ( null === $max_temperature || $forecast->main->temp_max > $max_temperature ) { $max_temperature = $forecast->main->temp_max; } } } if ( null === $min_temperature ) { $min_temperature = $weather_data_now->main->temp_min; } if ( null === $max_temperature ) { $max_temperature = $weather_data_now->main->temp_max; } ?>

weather_icon_markup( $icon_name ); ?>

weather_icon_markup( 'thermometer' ); ?>

weather_icon_markup( 'raindrop' ); ?> %

weather_icon_markup( 'windy' ); ?> km/h

list ) ) { return; } $forecast_days = []; $today_date = gmdate( 'Ymd', current_time( 'timestamp', 0 ) ); $count = 0; foreach ( $forecast_data->list as $day ) { $day_of_week = gmdate( 'Ymd', $day->dt ); $forecast_hour = gmdate( 'H', $day->dt ); if ( empty( $forecast_days[ $day_of_week ] ) ) { $forecast_days[ $day_of_week ] = [ 'dt' => $day->dt, 'icon' => $day->weather[0]->icon, 'temp' => $day->main->temp, 'is_today' => ( $today_date === $day_of_week ), ]; } elseif ( '12' === $forecast_hour || '13' === $forecast_hour ) { $forecast_days[ $day_of_week ]['temp'] = $day->main->temp; $forecast_days[ $day_of_week ]['icon'] = $day->weather[0]->icon; } } foreach ( $forecast_days as $forecast_day ) { if ( $forecast_day['is_today'] ) { continue; } if ( $count >= (int) $forecast_days_count ) { break; } $daily_icon_name = $this->get_weather_icon_name_by_code( $forecast_day['icon'] ); $day_unit = 'cel' === $settings['temperature_unit'] ? '°C' : '°F'; ?>

weather_icon_markup( $daily_icon_name, 'forecast-' . $count ); ?>

' . esc_html__( 'Weather Widget Error:', 'wpr-addons' ) . ' ' . esc_html( $error_message ) . ''; } private function render_demo_content( $settings ) { $title = ! empty( $settings['widget_title'] ) ? $settings['widget_title'] : esc_html__( 'Weather Widget', 'wpr-addons' ); $forecast_days_count = isset( $settings['forecast'] ) ? $settings['forecast'] : '3'; $demo_days = [ [ 'day' => 'Mon', 'icon' => 'rain', 'temp' => '7°C', ], [ 'day' => 'Tue', 'icon' => 'day-sunny', 'temp' => '4°C', ], [ 'day' => 'Wed', 'icon' => 'cloudy', 'temp' => '5°C', ], [ 'day' => 'Thu', 'icon' => 'rain', 'temp' => '9°C', ], [ 'day' => 'Fri', 'icon' => 'rain', 'temp' => '10°C', ], ]; ?>

weather_icon_markup( 'day-sunny' ); ?>

14°C

New York

clear sky

weather_icon_markup( 'thermometer' ); ?> 5° - 11°

weather_icon_markup( 'raindrop' ); ?> 46%

weather_icon_markup( 'windy' ); ?> 4 km/h

[], 'forecast' => [], ]; $api_unit = 'cel' === $unit ? 'metric' : 'imperial'; $now_ping = 'https://api.openweathermap.org/data/2.5/weather?q=' . rawurlencode( $city_name ) . '&lang=en&units=' . rawurlencode( $api_unit ) . '&APPID=' . rawurlencode( $api_key ); $now_response = wp_remote_get( $now_ping, [ 'timeout' => 120, ] ); if ( ! is_wp_error( $now_response ) ) { $weather_data['now'] = json_decode( wp_remote_retrieve_body( $now_response ) ); } if ( ! $minimal ) { $forecast_ping = 'https://api.openweathermap.org/data/2.5/forecast?q=' . rawurlencode( $city_name ) . '&lang=en&units=' . rawurlencode( $api_unit ) . '&APPID=' . rawurlencode( $api_key ); $forecast_response = wp_remote_get( $forecast_ping, [ 'timeout' => 120, ] ); if ( ! is_wp_error( $forecast_response ) ) { $weather_data['forecast'] = json_decode( wp_remote_retrieve_body( $forecast_response ) ); } } if ( ! empty( $weather_data['now'] ) || ! empty( $weather_data['forecast'] ) ) { set_transient( $transient_key, $weather_data, HOUR_IN_SECONDS ); } return $weather_data; } private function get_weather_icon_name_by_code( $code ) { $icon_map = [ '01d' => 'day-sunny', '01n' => 'moon-full', '02d' => 'day-cloudy', '02n' => 'night-cloudy', '04d' => 'cloudy', '04n' => 'cloudy', '09d' => 'rain', '09n' => 'rain', '10d' => 'day-rain', '10n' => 'night-rain', '11d' => 'storm-showers', '11n' => 'storm-showers', '13d' => 'day-snow', '13n' => 'night-alt-snow', '50d' => 'day-fog', '50n' => 'night-fog', ]; return isset( $icon_map[ $code ] ) ? $icon_map[ $code ] : 'cloudy'; } private function weather_icon_markup( $name = '', $id = 'weather' ) { switch ( $name ) { case 'day-sunny': echo ''; break; case 'moon-full': echo ''; break; case 'day-cloudy': echo ''; break; case 'night-cloudy': echo ''; break; case 'cloudy': echo ''; break; case 'day-rain': echo ''; break; case 'night-rain': echo ''; break; case 'rain': echo ''; break; case 'storm-showers': echo ''; break; case 'day-snow': case 'night-alt-snow': echo ''; break; case 'day-fog': case 'night-fog': echo ''; break; case 'thermometer': echo ''; break; case 'raindrop': echo ''; break; case 'windy': echo ''; break; default: echo ''; } } }