Workshop 5

Tumblr Themes & PHP with HTML
April 11, 2013



PHP is a server-side scripting language. This means that it generates specific HTML/CSS once a specific website is requested by a user. That said, it can appear differently depending on when it is requested, where it is requested, and so on. PHP is a dynamic language, which is why we're using it to handle the ever-changing weather and moon phase.

You will employ similar building tactics to this project as you did in the Tumblr Theme. First, I suggest making a pure HTML/CSS mockup template. Make sure to account for all the necessary information from your chosen widget by looking at the P3 brief. Then, when you're ready to load in the dynamic content, wrap your HTML/CSS template around the PHP code blocks. Depending on which widget you choose, it will be important to style one of the following sets of classes...

Quick bug fix

You may notice that when you upload the p3 folder to your server that after navigating to, it won't automatically redirect to your index.php page. To solve this, you need to create a new file and add it to this directory. After copying the code below, you'll open your code editor program and paste it in a new file. Then save this as ".htaccess" (no extension) and save this in your /p3/ folder. After doing this, check again. It should now automatically redirect to your index.php page.

Updates to the code — Tues Apr 16

You can download the new code here: Inside you will find three .php files: index-weather.php, index-moon.php, and config.php. After deciding which widget you want, you can rename that widget simply "index.php" (from either index-weather.php or index-moon.php). You can then delete the widget file you didn't choose.

These updates are minor, but do change some things. First, for the weather widget, they make the weather classes easier to work with. (Now <div class="isolated-showers"> is <div class="isolated showers">). This means that instead of having to write a class .isolated-showers in your CSS, you can just have two classes, one that is .isolated and the other that is just .showers. This will make styling other kinds of showers (for example, scattered showers) easier. A full list of possible weather combinations can be found here. The new code now also isolates the days of the week so that they aren't repeating every time the weather is presented. Additionally, you can set the number of days you'd like in your forecast in the config.php file. (The default is 7 days.)

For the moon widget, the moon phase is now only presented once. Since the moon phase is always the same no matter what place you're in, this makes the most sense.

Demo — Thurs Apr 18

You can find a demo of integrating PHP with HTML/CSS here: You can download the ZIP file to see how it all works.

My template: weather-template.html:

My php integrated with my template: index.php:

Be here now