The template consists of several files:

• wximproved.html - This is the main page
• wximprovedalmanac.html - This is the historical data for your station
• js folder - Upload this folder to your site. It contains the jqeury.js file which provides all the slider effects. It’s important that this folder is added to the same directory where you’re uploading wximproved.html and wximprovedalmanac.html
• img folder - This folder contains the various buttons and backgrounds. Like the js folder, it should be uploaded to the same directory as wximproved.html
• wxi.css - This is the css file that should be uploaded to your site, again in the same directory as wximproved.html. You can modify this file should you wish to change the colors, fonts, etc.

Note that I’m using the Yahoo User Interface (YUI) library to ensure a that everything looks consistent across a number of platforms. If you want to change the font sizes or font types, I’d strongly encourage you to adhere to the YUI guidelines. The reason is that they’ve done A LOT of work to figure out how to make the fonts look the same in multiple browsers and platforms. Refer to http://developer.yahoo.com/yui/fonts/ for information about how to change font sizes and styles.

I’ve made a template for LWC that validates as XHTML strict and is fully CSS based. I’ve put in the webtags that I use most often, but of course you’re free to modify it as necessary to suit your tastes. You can see the template in action here.

The template consists of 4 files:

• wx.html: This is the main file that lists the current conditions, graphs, etc.
• wxhistoric.html: This is the historic weather data from your station that is produced using the STA1$ tag.
• wx.css: The css you’ll want to modify should you wish to change colors, alignments, sizes, etc. *
• wximages.html: This is just needed to make LWC prepare the images so that they can be called from wx.html. Unfortunately, LWC doesn’t output XHTML valid markup for images at this time. I’m only showing graphs on my site so if you want to make use of the other images that LWC provides, then you’ll need to add those tags to this file so they get created and uploaded.Update: As of LWC version 0.8.1, this file is no longer necessary.

* Note that I’m using the Yahoo User Interface (YUI) library to ensure a that everything looks consistent across a number of platforms. If you want to change the font sizes or font types, I’d strongly encourage you to adhere to the YUI guidelines. The reason is that they’ve done A LOT of work to figure out how to make the fonts look the same in multiple browsers and platforms. Refer to http://developer.yahoo.com/yui/fonts/ for information about how to change font sizes and styles.

Step 1

Download and install the RunPHP Plugin.

Step 2

Setup LWC to upload the graphs/gauges/data to your webserver. For me, I’ve told LWC to upload both the Simpleweb and the custom web. The reason for doing the simple web is just so that all the graphs will get uploaded without me having to define a separate template with the graphs in them.

For my custom web page, I’m using the following (note that some lines got wrapped). I named my file currentwx.html and I upload it to a directory called wx.

<h4>Last Updated: D$</h4>
<div class="bluebox">
Current Temp: CT$ <br />
Current Heat Index: STAT$HEATINDEX:CURRENT$F <br />
High Today: STAT$TEMPERATURE:MAX:TODAY$F at STAT$TEMPERATURE:MAX:TODAY:TIME$
Low Today: STAT$TEMPERATURE:MIN:TODAY$F at STAT$TEMPERATURE:MIN:TODAY:TIME$ <br />
Current Barometer: CP$ <br />
High Windspeed Today: STAT$WINDSPEED:MAX:TODAY$ MPH at STAT$WINDSPEED:MAX:TODAY:TIME$
</div>
<div class="bluebox">
Current Rainrate: CR$ <br />
Today's Rain: STAT$RAIN:TOTAL:TODAY$ in<br />
Rain This Month: STAT$RAIN:TOTAL:THISMONTH$ in<br />
Rain This Year: STAT$RAIN:TOTAL:THISYEAR$ in
</div>


Pretty much the only thing I’m doing here is putting the various data inside their own div’s so that they’re seperated on the page. Just go to my weather page for an example of what’s happening here.

Step 3

Create a new page in Wordpress where we’ll pull everything together to make a nice looking weather page. This is also where the RunPHP plugin installed earlier will come into play.

Once you’re in the Authoring screen for the page, you’ll see a checkbox at the very bottom of your screen for RunPHP. Make sure this is checked.

The reason you need to run PHP code is so that Wordpress will read the template files you’ve uploaded and insert that content into your post.

Next, make sure you’re NOT using the visual editor in Wordpress. If you are, none of this will work.

I’m using the code below to generate my weather page. (The actual page on my site is further embellished with RADAR and webcam images, but I’ve omitted that from this code for clarity’s sake). The second line in the code below is the one to focus upon. It needs to be set to the full path of your template file that LWC is uploading, which is currentwx.html in my case. This path is relative to the root of of your server’s file system, NOT to your web directory. If you’re unsure of the full path, just open up a shell to your site and navigate to the directory containing your files and use the command “pwd” which will tell you the full path of your current directory. Note also that the PHP code begins with the <?PHP statement and ends with the ?> statement. This code just opens your currentwx.html file and inserts it verbatim into your post. The HTML code following the PHP stuff is there for my graphs and charts.
<?php
$filename = "/home/myuserdirectory/www/wx/currentwx.html";
$fp = fopen($filename, "r") or die("Couldn't open $filename");
while (!feof($fp)){
$line = fgets($fp);
echo $line; }
?>
<div class="infoblog"><a href="http://forecast.weather.gov/MapClick.php?CityName=Irmo&state=SC&site=CAE&textField1=34.0936&textField2=-81.188">Current 5-Day Forecast from NOAA</a></div>
<div class="wximageblockleft">
<img class="wximage" src="http://atkinsfamily.org/wx/temperature1.jpg" width="314" height="232" alt="Temperature Graph" />
<img class="wximage" src="http://atkinsfamily.org/wx/pressure1.jpg" width="314" height="232" alt="Pressure Graph" />
<img class="wximage" src="http://atkinsfamily.org/wx/rh1.jpg" width="314" height="232" alt="Humidity Graph" />
</div>
<div class="wximageblockright">
<img class="wximage" src="http://atkinsfamily.org/wx/windspeed1.jpg" width="314" height="232" alt="Wind Speed Graph" />
<img class="wximage" src="http://atkinsfamily.org/wx/precipitation1.jpg" width="314" height="232" alt="Rain Rate Graph" />
<img class="wximage" src="http://atkinsfamily.org/wx/precipitationc1.jpg" width="314" height="232" alt="Daily Rain Graph" />
</div>


Everything is style with CSS, so I’ve created a few div’s that make things look a little nicer. Specifically, I’ve created classes called “bluebox”, “infoblog”, and a couple classes to put the graphs in columns. I’ve posted the code for this CSS below, but if you want to use it, you’ll probably have to tweak the colors for your site.
.infoblog {
clear: both;
background: #313a56 url('icons/info.png') no-repeat 10px center;
border-top: 2px solid #419ED9;
border-bottom: 2px solid #419ED9;
padding: 10px 10px 10px 52px;
text-align: center;
line-height: normal;
opacity: 1;
border-color: #5f71a8;
margin-bottom: 10px;
}

.bluebox {
clear: both;
background: #313a56;
border-top: 2px solid #419ED9;
border-bottom: 2px solid #419ED9;
padding: 10px 10px 10px 52px;
text-align: center;
line-height: normal;
opacity: 1;
border-color: #5f71a8;
margin-bottom: 10px;
}

div.wximageblockleft {
float: left;
}
div.wximageblockright {
float: right;
}
img.wximage {
margin-bottom: 10px;
}
And that’s it. If you have any questions, please feel free to ask.