Free Weather Website Templates

They're free, but use at your own risk

The scripts referenced here are used in the operation of this weather station, and may be freely copied and used to support your station. Please note that you use these scripts at your own risk. No warranty is expressed or implied. I accept no liability for any damages that may ensue from their use.
You will need to configure them for your own particular weather station website.
RSS feed for Scripts Updates A RSS Feed is available to help keep you informed on updates to the scripts.

If you find one or more of the scripts useful to you, please consider making a donation to help offset the routine expenses of operation of this website.
Thanks for your kind support!

A Version History is available -- check back from time to time to see if there are updates to scripts you have downloaded earlier. Announcements of version updates and new scripts are made on and Weather-Watch forums and saratogaWXPHP Twitter account as they become available.

This page was updated Tuesday, 28-Nov-2017 2:39 PM

PHP/AJAX Website Template Set - Optional Add-on Features


Adding a new page to your site

You can easily add pages with new functions to your template set. The general process is:

  1. Make a copy of your wxnewpage.php and save it as a new page name.
  2. Edit the new page and insert the needed HTML/PHP for the content.
  3. Save and upload the new page to your site.
  4. Validate the HTML on the new page by viewing on your website using your browser and clicking on the Valid XHTML link at the page bottom.
  5. Correct any XHTML errors found and repeat steps 3 and 4 until the page is 'clean'
  6. Add the new file to your menu so it will show on all pages in the site.
    For sites NOT using the flyout menu, Edit the menubar.php and add a new <li><a></a></li> entry to the list. Then upload the menubar.php and the page now appears on your website.
    For sites using the flyout menu, Edit flyout-menu.xml and add the link as a new <item> entry, then upload the flyout-menu.xml to your website. The page should appear as a new link in your flyout menu.

Replacing the Wind-rose graphics

Wind RoseMike Challis has made a wind-rose graphic generator which allows you to customize your wind-rose graphics (/ajax-images/wr-*.* ) with a set of 17 images that you like. His generator allows you to select the letters used for the NESW cardinal directions, so you can use NØSV (Danish) or other letters used in your national language as abbreviations for the cardinal wind directions.

  1. Generate a new set at Mike Challis' Wind-rose image generator
  2. Save the .zip file produced by the generator to your local disk.
  3. Unzip the images to your /ajax-images directory
  4. If you've selected 64x64 images or switched to .png images, you'll need to change Settings.php and ajaxWDwx.js to reflect the new size and/or image type.
    The default set with this distribution is 58x58 .gif images.
  5. Upload the changed /ajax-images directory and Settings.php and ajaxWDwx.js (if you used 64x64 images and/or .png image type)

Replace windrose graphics with ones having transparent backgrounds

The supplied Windrose graphics use a white background to allow use with all themes. If you'd rather have a transparent background for the windrose graphics, then you can download this set, and unzip the graphics into your ajax-images/ directory to replace the supplied set.
Note: the transparent background and black-lettering on the windrose will have poor contrast and is not recommended if your selected theme is Dark/Black.

Changing the color scheme used in the templates

You can tune the CSS for styling the templates as you like with notepad or any HTML editor. A much easier way to change the overall scheme or tweak the colors for individual elements is to use the amazing Style Editor (courtesy of Mike Challis) for the templates. With his tool, you can select from multiple pre-built themes, and fine-tune the colors on individual elements of the templates as you choose. I highly recommend you use the Style Editor to achieve the look you'd like in the templates.

Adding a Buoy page

  1. Download a copy of the buoy-data.php distribution.
  2. Configure the buoy-data.php and mybuoy-*.txt file for your area according to the instructions.
  3. Upload the buoy-data.php, buoy-data-config.txt, the mybuoy-*.txt and *.jpg image file selected.
  4. Create a new page from a copy of wxnewpage.php as shown above.
  5. In your new page add
    $doPrintBUOY = false;
    print $BUOY_CSS;
    just before the </head> <body> tags.
  6. In the <div id="main-copy'> </div> area of the page add
    <div id="main-copy">
    <h1>Buoy data</h1>
    print $BUOY_MAP;
    print $BUOY_TABLE;
    ?> </div><!-- end main-copy -->
    where you'd like the buoy data map and table to appear.
  7. Upload your new page, test it, then add it to your menubar.php.

Using your existing Carterlake .css files

You can reuse your existing installed Carterlake weather-screen.css and weather-print.css with this template set if you add in some new CSS to support the ajax-dashboard and ajax-sidebar.

  1. Open your current weather-screen.css in an editor.
  2. Add the following near the end of the file:
    /* ##### ajaxSidebar ##### */
    .ajaxSidebar {
    	border: none;
    	width: 114px;
    .ajaxSidebar h2 {
    	font-size: 12pt;
    	color: #FFFFFF;
    	background-color: #CC6600;
    	text-align: center;
    	margin-right: 6px;
    .ajaxSidebar .meas {
    	font : x-small Arial, Helvetica, sans-serif;
    	color : #000000;
    	text-align : right;
    	background-color: #FFFFFF;
    	width: 35%;
    .ajaxSidebar .data {
    	font : 9pt Arial, Helvetica, sans-serif;
    	color : #0000FF;
    	text-align : left;
    	background-color: #FFFFFF;
    .ajaxSidebar td {
    	 border: none;
    	 background-color: #FFFFFF;
    .ajaxDashboard {
        font-size: 96%;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    .ajaxDashboard .datahead {
    	font-size: 100%;
    	font-weight: bold;
    	color:  #FFFFFF;
    	background-color: #CC6600;
    	text-align: center;	
    .ajaxDashboard .data1 {
     	 color: #000000;
    	 font-size: 100%;
    	 border-bottom: 1px solid #CCCCCC;
    	 background-color: #FFFFFF;
    	 text-align: left;
    .ajaxDashboard td {
    	 border: none;
    	 background-color: #FFFFFF;
  3. Do the same with weather-print.css.
  4. Upload weather-screen.css and weather-print.css to your website
  5. Edit Settings.php to change the CSS settings to read
    $SITE['CSSscreen'] = 'weather-screen.css'; // Classic design
    $SITE['CSSprint'] = 'weather-print.css';
  6. Save Settings.php and upload to your website.

Adding the WeatherUnderground History page to your site

Thanks to Jim at for giving permission to add his great WeatherUnderground History script to the template set. You can add it easily to your WD/AJAX/PHP site by downloading the file and following the instructions in the README file ( a simple 4-step process).

Note: this is V2.7 of Jim's script with updates to the wxwuhistory.php page to suppress robots from following links on the generated page.
This script is English only at the present time.

Adding a page to display WXGRAPHIC Logos to your site

Download and customize the settings area for your WXGraphic installation.

// #######################
// # Begin settings
// #######################

# Town will be printed from Settings.php setting $SITE['location']
# uncomment $town if you want to set town here
#$town = 'Long Beach, WA';

# set weather web site URL here
$web_site = '';

# set logo PHP script URL here
$logo_url = '';

// #######################
// # End settings
// #######################

If you haven't already installed WXGraphic, here is how to install the weather graphic script in a very basic way for WD users.

download from here.

unzip the file on your computer using folder names option.

edit the file config.txt

change $data_file_path = '/your/path/to/data/file/'; to your relative path to clientraw.txt like

$data_file_path  = './clientraw.txt';

upload the folder 'wxgraphic' and everything in it to your web server so it appears as

test and you should see a default image with your current weather station data.

Once you get it working you can fine tune the other settings and adjustments, refer to the included README.txt in the WXGraphic .zip distribution file.

Thanks to Mike Challis for this sample wxlogo.php and instructions.

Updating Language plugins to templates

The World template has the most current language translation files in the main distribution ZIP file, but you may find it more convenient to simply download the file to update a single language.

  1. Download the file from the install page to your local offline copy of the World-ML website.
  2. Run WinZip (or other ZIP file program) to unzip the files into the same directory as the wxindex.php page.
  3. Upload the four unzipped -LL language files to your website.

Adding a WordPress BLOG to your weather website using the template set

Thanks to the excellent efforts by Tony Hake, Jack Ahern and Mike Challis, there is now a plugin set that allows you to add a WordPress blog that uses the template set for formatting.
Please follow the instructions on the WordPress Weather Blog Template page for download and installation.

Add a Space Weather page

Mike at Long Beach Weather has developed a great Space Weather addin page for your WD/AJAX/PHP USA template.

Space Weather plugin page snapshot
Download from Mike's scripts pages: Space Weather plugin page
Live sample at Mike's website.

Google Map of Affiliated Regional Weather Network Stations

Google Map Plugin

The Affiliated Regional Weather Networks now have collected data from over 1600 members and you can display it on a Google map with clickable markers that pop open with current conditions and links to the personal weather station website and regional networks. Plugins for the V2 and V3 AJAX/PHP templates are available on the scripts page.