Tumblr Themes & PHP with HTML
April 11, 2013
Tumblr is a popular blogging platform. It allows its users to post content in the form of text, image, video, links, quote, and audio. Its simplicity encourages short-form posts for their viral potential.
Tumblr is easily customizable. To customize your Tumblr, log in and click the gear icon in the top right. Here you can change your blog's title, theme, and other more specific options. To customize your theme, click the "Customize" button under the thumbnail image of the theme. This is where you can edit the HTML and CSS of your theme. But first, consider starting out with something more similar to what you want so you have to do less work. Think of this as a structural foundation but something you can still modify.
You can browse available themes in the Theme Garden. Here are some simple themes to possibly start with: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14. You can find documentation on creating custom themes in Tumblr's own guide: "How to create a custom theme".
Mockup to Theme
Often it's easiest to go from HTML/CSS Mockup to Tumblr Theme. This helps make your process piecemeal to avoid more complex errors later on. Here is the template I made: tumblr-template.html. It's important to note what size my thumbnails are. Here I made them 250px wide. This is because Tumblr automatically generates multiple sizes after upload which you can see in the documentation. Tumblr does this to expedite loading time. Those premade widths are 75px (always square), 100px, 250px, 400px, and 500px.
Next we'll take this template code and wrap it around the special Tumblr code in the theme. To do this, go back to the gear icon in the top right of your Tumblr dashboard. Click your blog in the left menu, and then click the "Customize" button under the thumbnail image of your theme. It might be easier to copy and paste this code into a separate text editor and work on it there instead of in this built-in code editor. After a handful of changes, this is my integrated code:
I copy and paste this into the Tumblr code editor, press save, and see my updated Tumblr. Now it looks like this: workshop05b.tumblr.com — neato, looks pretty similar to the template!
— Tags (#tagname) can be used to sort your collection
— "Notes" (likes or reblogs) can be displayed or not displayed
— Any Tumblr's archive is viewable here: yourname.tumblr.com/archive
— Permalinks are pages that contain a single post and have a unique URL
Some tumblrs that use tags:
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...
Moon phase classes
- Full list of possible weather combinations
Quick bug fix
You may notice that when you upload the p3 folder to your server that after navigating to art.yale.edu/~firstnamelastname/p3/, 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 art.yale.edu/~firstnamelastname/p3/ 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: p3-update.zip. 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: http://yaleinteractivedesign.com/2013/p3-demo/. 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: