PRO: Creating Custom Templates

This functionality uses the built-in locate_template functionality. If you would like to include the custom themes in a different location, you can download this plugin (awe-themes.zip) and include them in there.


The first thing would be to add a Weather Widget as you would normally and fill out all your fields like you would for any other template. When you’re ready to begin making your template select custom from the top ‘Template’ field.

template-chooser

You will be presented with a new field for the template name. The file needs to be called awe-YOURNAME.php where YOURNAME is replaced with anything you want. The field helper shows you exactly what the file should look like. Insert a name into your field, for this example, we will use hal.

template-chooser-hal

In our theme folder located in your WordPress installation under wp-content/themes/twentytwelve you should create a file awe-hal.php.

awe-hal-page

Now that the blank file is created you can do whatever you want in there.

Note: If you want to go completely custom then you can skip to the ‘Weather Object’ section at the bottom.

For this example, we’ll copy the contents of the ‘wide’ template and put them into our new template to give us a base to work off of. The base templates are found in wp-content/plugins/awesome-weather-pro/templates/

template-folder

Open the wide layout and copy all the contents of that file into your new file awe-hal.php in your theme folder. If you click save and see what your new creation looks like it’s going to be a little weird:

Screen Shot 2014-08-26 at 9.16.24 PM

This is because my plugin changes styles based on the wrapper name. For the wide template, it uses an ‘awe_wide’ variable to target that template with CSS. If you wanted to fix that and begin from the ‘wide’ template you would simply add ‘awe_wide’ to the wrapper class at the top of your awe-hal.php file.

Screen Shot 2014-08-26 at 9.16.11 PM

If you are overwriting another template, like in the example above, you would add ‘awe_wide awe_hal’ to your wrapper so you can target the new ‘awe_hal’ in your CSS. It is recommended to target the widget with the CSS selectors like this:

.awesome-weather-wrap.awe_hal { background: black; }
.awesome-weather-wrap.awe_hal .awe_desc { font-size: 2em; }

If you are just creating a new template and aren’t copying an old template you can just use:

.awe_hal { background: black; }
.awe_hal .awe_desc { font-size: 2em; }

dark-widget

Weather Object

All of the weather information is available in your new template under the ‘$weather’ variable. To get familiar with it you can print_r the variable to see what all is offered. Here is an example from Oklahoma City using OpenWeatherMaps as the weather provider.

stdClass Object
(
    [transient_name] => awe_4544349_f_en_f5
    [city_slug] => oklahoma-city
    [api_query] => id=4544349
    [location] => Oklahoma City
    [owm_city_id] => 4544349
    [template] => custom
    [custom_template_name] => hal
    [units] => imperial
    [units_display] => F
    [override_title] => OKC
    [forecast_days] => 5
    [show_stats] => 1
    [show_link] => 
    [show_icons] => 1
    [use_user_location] => 
    [extended_url] => 
    [extended_text] => extended forecast
    [background_classes] => Array
        (
            [0] => temp6
            [1] => awesome-weather-wrap
            [2] => awecf
            [3] => awe_with_stats
            [4] => awe_with_icons
            [5] => awe_with_forecast
            [6] => 
            [7] => awe_custom
        )

    [background_image] => 
    [background_color] => 
    [data] => Array
        (
            [current] => Array
                (
                    [temp] => 86
                    [high] => 90
                    [low] => 82
                    [humidity] => 54
                    [pressure] => 1018
                    [sunrise] => 1409140746
                    [sunset] => 1409187819
                    [wind_speed] => 10
                    [wind_direction] => SE
                    [wind_speed_text] => mph
                    [condition_code] => 800
                    [description] => sunny
                    [icon] => wi-day-sunny
                )

            [forecast] => Array
                (
                    [0] => stdClass Object
                        (
                            [timestamp] => 1409162400
                            [day_of_week] => Wed
                            [temp] => 89
                            [high] => 92
                            [low] => 70
                            [night] => 78
                            [evening] => 89
                            [morning] => 70
                            [pressure] => 984
                            [humidity] => 48
                            [wind_speed] => 8.12
                            [wind_direction] => SSE
                            [condition_code] => 800
                            [description] => sunny
                            [icon] => wi-day-sunny
                        )

                    [1] => stdClass Object
                        (
                            [timestamp] => 1409248800
                            [day_of_week] => Thu
                            [temp] => 88
                            [high] => 88
                            [low] => 68
                            [night] => 68
                            [evening] => 87
                            [morning] => 72
                            [pressure] => 979
                            [humidity] => 45
                            [wind_speed] => 13.41
                            [wind_direction] => S
                            [condition_code] => 502
                            [description] => showers
                            [icon] => wi-rain-wind
                        )

                    [2] => stdClass Object
                        (
                            [timestamp] => 1409335200
                            [day_of_week] => Fri
                            [temp] => 81
                            [high] => 84
                            [low] => 68
                            [night] => 71
                            [evening] => 84
                            [morning] => 68
                            [pressure] => 979
                            [humidity] => 81
                            [wind_speed] => 8.1
                            [wind_direction] => NNW
                            [condition_code] => 801
                            [description] => partly cloudy
                            [icon] => wi-cloudy
                        )

                    [3] => stdClass Object
                        (
                            [timestamp] => 1409421600
                            [day_of_week] => Sat
                            [temp] => 93
                            [high] => 94
                            [low] => 70
                            [night] => 80
                            [evening] => 94
                            [morning] => 70
                            [pressure] => 985
                            [humidity] => 0
                            [wind_speed] => 9.91
                            [wind_direction] => NE
                            [condition_code] => 800
                            [description] => sunny
                            [icon] => wi-day-sunny
                        )

                    [4] => stdClass Object
                        (
                            [timestamp] => 1409508000
                            [day_of_week] => Sun
                            [temp] => 95
                            [high] => 95
                            [low] => 73
                            [night] => 83
                            [evening] => 94
                            [morning] => 73
                            [pressure] => 984
                            [humidity] => 0
                            [wind_speed] => 7.13
                            [wind_direction] => S
                            [condition_code] => 500
                            [description] => showers
                            [icon] => wi-sprinkle
                        )

                )

        )

    [provider] => openweathermaps
    [location_url] => http://ipinfo.io/[[IP]]/json
    [city_id] => 4544349
)