Despotic Always Sunny

Simple and easy to use weather plugin

Always Sunny is a beautiful and easy to use weather plugin, which displays the current weather and forecast via shortcodes or via widgets.

Introduction

Hello there, and welcome to the Always Sunny Documentation. The Documentation covers all the information needed to use our Always Sunny Weather plugin to create beautiful WordPress widgets and shortcodes, as well as some helpful tips and tricks that will make your experience working with the Always Sunny plugin easier and more enjoyable. If you need any additional assistance while using our plugin, you can always write us on support@despotic-studio.com and our support team will be glad to help you out.

You can navigate through different sections of the Documentation by clicking on the links in the menu to the left of your screen. You will also notice that we have highlighted certain parts of the text throughout the Documentation, such as important pieces of information, useful tips, and helpful code snippets, with different formatting for an easier overview. Here are some examples of the different formatting we use for Useful Tips, and Code Snippets:

This is a useful tip

<h4>This is a helpfull code snippet.</h4>

In this first section of the Always Sunny Documentation we will go through the essential steps required to start using the Widgets and Shortcodes generated by our Weather plugin on your Website. We will explain how to install the plugin, set it up, as well as how to update the plugin. At the end of this section you will also find a set of Frequently Asked Question related to troubleshooting the plugin. 

Installing the plugin

After downloading the Always Sunny installation file from ThemeForest, extract it and in the extracted folder locate the despotic-always-sunny.zip file. You can then install the Always Sunny plugin using one of the two following installation methods:
 
WordPress upload - For most users, this is probably the simplest installation method. To install the Always Sunny plugin using this method, please follow these steps:
  1. Login to your WordPress admin panel
  2. Navigate to Appearance > Plugins > Add New > Upload Plugin
  3. Click on Choose File and select despotic-always-sunny.zip
  4. Click on Install Now

 
FTP upload - If you would like to install the Always Sunny plugin via FTP, please follow these steps:
 
  1. Extract the despotic-always-sunny.zip file you previously located. You should now see a folder named despotic-always-sunny
  2. Using an FTP client, login to the server where your WordPress website is hosted
  3. Using an FTP client, navigate to the /wp-content/plugins/ directory under your WordPress website's root directory
  4. Using an FTP client, upload the previously extracted despotic-always-sunny folder to the plugins directory on your remote server
  5. Once the installation is complete, your Always Sunny plugin will be ready for use. Now all you need to do is navigate to Appearance > Plugins and activate the Always Sunny plugin. After you have done this, you should see Always Sunny appear in the left navigation bar under the Settings tab of  your WordPress admin panel.

 

Updating the Plugin

You can update your plugin by performing the following steps:
 
  1. Download the latest plugin .zip file from CodeCanyon
  2. Extract it and locate despotic-always-sunny.zip
  3. Extract despotic-always-sunny.zip and locate the despotic-always-sunny folder
  4. Copy/Replace the contents of the despotic-always-sunny folder to the /wp-content/plugins/despotic-always-sunny folder of your web server.

Getting an API KEY

After the installation of the Always Sunny plugin you should be automatically redirected to the plugin settings page. If you activate a plugin as a part of a bulk activation, please navigate to Settings > Always Sunny tab of your WordPress dashboard.

Our plugin uses the OpenWeatherMap API to display weather forecast. It is important that you register on openweathermap.org site and get your own free API KEY. Once you have created an account on Open Weather Map website you can locate your key in the API key section.

After that just paste the key in field located in the settings page and you are ready to go.

Please be advised that if you don't generate your personal API key you will experience issues with the weather data display, since the plugin uses a key available to all users by default which will hit it's limits occasionally. 

Using the Widget

After you have entered your  API Key in the Settings menu, you can then start using the Always Sunny plugin to create beautiful Weather Widgets and Shortcodes. This section will cover the options and usage of the Always Sunny Weather widgets.

To insert a Widget in any of your theme's sidebars (which may differ from theme to theme) navigate to Appearance > Widgets in your admin dashboard. And there you will locate the Always Sunny Widget. Just drag it to one of the available Widget Areas, most common one being a Sidebar area. After moving the Always Sunny Widget to a Widget area, a number of options will appear, which will help you to use and style the Widget more easily.

 

  1. Widget Title - A title that will appear above your Widget.
  2. Desired Location - Here you can enter a name of the city of which the forecast or the current weather will be displayed. For better acurracy, we would suggest adding the country code beside the name of the city. For example, "London, UK". If nothing is entered in this field, Weather will be Displayed for the Current User's Location, based on IP address.
  3. Number of Days - "Only Current Weather" option will just display the current weather for the City, and setting this option to 3 or 4 days would display the forecast for the city along with the current weather.
  4. Units type - Here you can choose the units type of the temperature that is displayed on the Widget.
  5. Current Weather Background color - First Gradient Color - The Current Weather background consists of 2 colors that together build a gradient. Here you can set a First color that will be used in a gradient. That can be a regular CSS color name, like: green, yellow, etc, or a HEX color code, like: #3b5998, or even an RGB(a) color type, like: rgba(59,89,152, 0.8).
  6. Current Weather Background color - Second Gradient Color - This is the Second color that is used in generating a gradient for the Current weather background.
  7. Forecast Background Color - If you choose to enable a Forecast here you can set the background color for the Forecast section of the Widget. Unlike the Current Weather Background, this Background is solid and consists of only one color. The same rules apply here as well, you can set a CSS color, HEX, or RGB(a) color code.
  8. Text Color Skin - Here you can Choose to use one of the predefined text color skins. Light Text Skin is meant to be used on Darker Backgrounds, while the Dark text skin is meant to be used on Lighter Widget Background.
  9. Set the Cache Time for the Weather Data - This option determines for how long your Weather data will be stored before being requested again from OpenWeatherAPI. Caching the Weather data helps you in preventing you API key from reaching its limit too early and improving the load times of the Widget. Bare in mind that every time the Widget settings are saved the Widget Cache is cleared.
  10. Set the Language of the Description field - Since the Weather description (located in current forecast - bellow the current temperature) is provided by the OpenWeatherMap API you can't translate it as you normally would with Poedit or some other software. Because of that we have added an option where you can set the translation of that description field in over 30+ avalable languages, which are again, provided directly from OpenWeatherMap.

 

 

Using the Shortcode

The Shortcode within Always Sunny plugin can be used on Pages and Posts. When you create a New Page/Post you will see a small icon of a Sun located within your TinyMCE editor. Just click on an icon and a nice user-friendly form will appear with which you can adjust your Always Sunny Weather shortcode to your preference.

The options within that form are basically the same like when adding a Widget, with almost identical functionality. Therefore we won't be repeating descriptions of those options again. If you need a reminder, just scroll to the "Using the Widget" section.

 After you click on the OK button in the form, a shortcode will be generated for you. After that just save the page and visit your page to see the result. Generated shortcode will look something like this: 

[despotic_always_sunny target_city="London, UK" forecast_type="four_days" units_type="metric" 
first_gradient_color="#dd9933" second_gradient_color="#1e73be" 
forecast_background_color="#8224e3" text_color_skin="light" cache_time="10"]

There are a few things that are specific to the Shortcode which you should have in mind. First one is that the Cache for the Always Sunny Shortcode is cleared when Saving a Post/Page. The other one is that the Shortcode will take a 100% of available space. Which means it could span across the full width of the page. Since that may seem a bit odd, we would suggect constraining the widgets to columns. If you are using some kind of a Page builder in your theme then you can just add the shortcode in one of the columns of your page and determine it's width like so. If not, you can set the width of your shortcode with a few lines of inline CSS code. 

In this example, we are going to restrict the width of a shortcode to 70% of the available space:

<div style="width: 70%">[despotic_always_sunny target_city="" forecast_type="zero_days" 
units_type="kelvin" first_gradient_color="" second_gradient_color="" 
forecast_background_color="" text_color_skin="light" cache_time="10"]</div>

So, what we did was just wrapping our shortcode in a DIV element with width of 70%. You are of course free to adjust the width to your needs. Just bare in mind that you have to switch to a text tab within the editor when adding the code.

Similarly, you can asign a class to a DIV:

<div class="always-sunny-shortcode">[despotic_always_sunny target_city="" 
forecast_type="zero_days" units_type="kelvin" first_gradient_color="" 
second_gradient_color="" forecast_background_color="" text_color_skin="light" 
cache_time="10"]</div>

and then style all of the shortcodes with that class from Appearance > Customize > Additional CSS:

.always-sunny-shortcode {
width: 70%;
}

FAQ

1. The City Name displayed on a Shortcode/Widget is always pointing to London, when I don't enter a Specific City Name in the City field?

If you don't enter a Specific City Name in the City field, Always Sunny Widgets and Shortcodes will try to display weather conditions for a current user on your website, based on his/hers location, which is furher based on an IP address of a user. Sometimes that Location can't be accessed because of a specific nature of the User's IP address and in that case the City name will default to London, UK.

2. How can i translate or rename the plugin labels?

You can use the Poedit software (http://poedit.net/wordpress) to translate/rename all of the plugin's labels. The required POT file is located in the plugin's languages folder.

3. Widget/Shortcode Layout is breaking in my Theme?

Please bare in mind that the Widget/Shortcode layout was tested in multiple Theme's and Widget Areas, including the default WordPress Theme. Nevertheless, issues with the layout may occur, because of the specific styling of different Themes. If that happens, please contact our support and we will be glad to help as much as we can.

For any further issues feel free to contact us on support@despotic-studio.com