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.

Many of these scripts are now available on GitHub at

Buy Me A Coffee 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.

Note: Twitter widget has been disabled 3-Jul-2023 since it no longer displays the recent update Tweets.

This page was updated Tuesday, 20-Jul-2010 10:36 PM

Weather Display/PHP/AJAX Website Template Set - Optional Plugins


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 a PHP contact page to your site

Download and follow the instructions in the readme file. 'Nuff said.

Adding a PHP contact page with CAPTCHA to your site

Mike Challis has developed a great contact page that uses CAPTCHA to thwart most automated form fillers.
Download Mike's CAPTCHA contact form

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).

Adding a page to display WXGRAPHIC Logos to your site

Download wxlogo.php 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

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 World-ML template

The World-ML 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 automatic warning when clientraw.txt is 'stale'

You can add this script to your header.php to test clientraw.txt for 'freshness' and post a warning message on your site if the data in clientraw.txt is too old.

Download: crtest.php and place in same directory as header.php on your website.

Insert the <?php include_once("crtest.php") ?> in header.php like this:

    </div><!-- end subHeaderRight -->
  <?php include_once("crtest.php"); ?>
</div> <!-- end of header -->

Alternative ajax-dashboard and high/low/average page

Scott at has developed two great plugins for the template set, an enhanced alternative ajax-dashboard.php (USA template only) and a High/Low/Averages page(ALL templates). Thumbnails of the two pages appear below.
To download Scott's packages, please visit

Dashboard Alternative

High/Low/Average page


Another alternative ajax-dashboard with Metric/Imperial units

Ranier at Bashewa Weather has created a replacement ajax-dashboard and ajaxWDwx.js package that allows dynamic switching from Metric to Imperial(USA) units via the JavaScript.

Bashewa Alternative-Dashboard

See the docs at forum for additional information and to download the package(s).

Rain Detail addon page for WD-AJAX-PHP-USA template

Kevin at has created a great plugin template page (USA template) to display 12 months of rain data, summarized from the Weather-Display noaareport*.htm pages.

wxrain sample display

Download from Kevin's Weather-Display scripts page.

UV Index Forecast

As of Version 2.09 (4-Oct-2009), this wxuvforecast.php page was included in the WD/AJAX/PHP distributions. If you have an older version of the template, you can add the page and support graphics by downloading, unpacking, and uploading the contents of the .zip file below. There are two versions of the file, one for English-only and one for Multilingual templates .. be sure to pick the correct one as the multilingual version is NOT functional on an English-only template set

Download for Canada/USA/World template
Download for Canada-ML/World-ML template

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.

Temperature, Rain, Wind, Snow detail+summary+trends pages

Murry Conarroe of Wildwood Weather has developed a set of plugin scripts to analyze your Weather-Display dailynoaareport*.htm and climatedataout*.html files to create tables to display the reports

Temperature & Rain Records,
Temperature Detail,
Rain Detail,
Wind Detail,
Snow Detail,
Wind Summary,
Snow Summary,
Rain Summary,
Temperature Summary,
Rain / Temperature Trends

Download (and see examples of the reports) at Murry's scripts page.

Google Map of Affiliated Regional Weather Network Stations

Google Map Plugin

The Affiliated Regional Weather Networks now have collected data from over 900 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 English-only (Canada, USA, World) and multilingual (Canada-ML and World-ML) templates are available on the scripts page.