Rockablepress.com Envato.com. Rockable Press 2010

Size: px

Start display at page:

Download "Rockablepress.com Envato.com. Rockable Press 2010"

Ethan Austin
5 years ago
Views:

2 Rockablepress.com Envato.com Rockable Press 2010 All rights reserved. No part of this publication may be reproduced or redistributed in any form without the prior written permission of the publishers.

3 3 Table of Contents An Introduction 8 What This Book Includes 8 What this Book Assumes 9 Tumblr Overview 11 The Origins of Tumblr 11 Why Use it? 12 Advantages 13 Disadvantages 15 Blocks and Variables 17 Home Base 17 Blocks 18 Site Variables 20 Common Site Variables 20 Uploading Static Assets 21 Post Types 23 Post-Specific Blocks 24 Post Variables 26 All Posts Variables 26 Post-Type-Specific Variables 28 Text Posts Variables 28 Quote Posts Variables 29 Link Posts Variables 30 Video Posts Variables 31 Photo Posts Variables 32 Photoset Posts Variables 33 Chat Posts Variables 35 Audio Posts Variables 37 Putting it All Together 39 Date Formatting 42 Date Variables 43

4 4 Table of Contents Creating Pages 47 The Browser s Source Code 49 Customization Options 51 Meta Types 51 Meta-Color 52 Meta-Text 53 Meta-Image 54 Meta-Font 56 Meta-Boolean 57 Enabling Comments 59 Not All Bloggers Want Commenting 61 Our Logic Updating the Appearance Tab Custom Blocks 62 Post Notes 66 Post Notes Variables 66 Twitter Integration 69 Trigger Support 69 Referencing Tweets.js 69 The Data Object 71 Enabling Search 75 Creating a Search Page Template 76 Search Variables and Blocks 77 Tumblr and AJAX 81 The Game Plan Adding a Loading Icon Writing the JavaScript 83

5 5 Table of Contents The Tumblr API 89 Optional GET Parameters Retrieve only Video Posts Retrieve 10 Most Recent Posts Only Retrieve Posts that Match a Search Query of man, and which are Quote Posts Read Dashboard Posts Only Fetch Liked Posts Read Pages Create New Posts Authenticate Users 94 Practical Application: Filtering Posts by Type Create the Markup Writing the JavaScript 98 Miscellaneous Recipes 103 Custom Background Images 103 The Logic Set the Default Background Image Add a Meta-Image Tag to the <head> Add a Repeat Meta-Boolean If Set, Use the Custom Image Save Bandwidth The Final Code 108 Let Readers Drill you with Questions: Answer Posts 109 Enabling the Ask Feature 109 Answer Posts Variables 110 Variable Transformations 112 Transformations 113 Show a User s Social Networking Links 114 Show Who I m Following 117 Following Variables Sample Markup One Problem Wrapping Boolean 119

6 6 Table of Contents Feedburner Integration Sign up for Feedburner Insert the FeedBurner URL 121 Enable Pagination 122 Navigation Variables 123 Display Tags 124 Tag Variables 124 Tools And Icons Pictos Tag Clouds Mac Dashboard Widget Embed Posts with JavaScript ,540 Simple White Social Media Icons Bookmark Icons Tumblr Post: Firefox Add-On Sell Tumblr Themes on ThemeForest.net Use Tumblr s Hosting 133 Conclusion 135 About The Author 136 Your Download Links 137

7 NTRO

8 8 Introduction An Introduction In the last few years, Tumblr has sky-rocketed in popularity. How come? In a word: simplicity. In the past, the standard approach with frameworks and libraries was to add more, more, more over time. However, this invariably leads to bloat, bloat, bloat. While, granted, more features are made available to you, this also comes at the expense of an increasingly difficult and confusing platform. Especially in the blogging world, this begs the question: how much power do we really need? Do we need a plugin architecture? Do we need a dozen template pages in order to render our pages appropriately? I suppose the answer to this question will vary, depending upon the project. However, chances are, if you only require an attractive blog, Tumblr s ease-of-use and simplicity will come as a breath of fresh air. With new CMSs and frameworks seemingly being released every day, how much time do we really have to learn yet another one? If you re like me, the answer is: very little. Thankfully, I can honestly tell you that Tumblr theme design is a cinch! Assuming that you have a modest understanding of HTML and CSS, you ll have your tailor-made blog up and running in less than a day. What This Book Includes Packaged with this book, you will find: 1. Photoshop and Tumblr theme files made available for you to use as you work your way through the book. (These files may not be redistributed or resold in any way.) 2. A series of screencasts corresponding with each chapter, which cover the whole process from beginning to end.

9 9 Introduction To access these files, please use the links provided on the last page of this book. What this Book Assumes I m going to assume that because you ve purchased a Rockable Press book, you have a solid understanding of the web. As such, you re not going to be spoon-fed how to create new posts, the difference between post types, how to access the Dashboard, etc. It will be assumed that you re reasonably intelligent, and can easily figure these things out for yourself! If you re like me, and have purchased other tech books before perhaps one on WordPress you probably skip over the introductory chapters anyhow. No, in this book, we re going to dive right into the bulk of Tumblr design. With that said, if you ve never touched Tumblr before, take an hour or so to acquaint yourself with the platform, the dashboard, adding new themes, etc. Once you have a solid grasp of the basics, return, and let s continue forward.

11 Tumblr Overview Tumblr Overview The Origins of Tumblr Tumblr, created by David Karp at the ripe old age of twenty, was first made available in 2007.

11 11 Tumblr Overview Tumblr Overview The Origins of Tumblr Tumblr, created by David Karp at the ripe old age of twenty, was first made available in Quickly, it generated a significant amount of buzz, as thousands upon thousands of bloggers, impressed by its simplicity and unique post-type blogging format, switched over. Fig 1-1. Tumblr s start page couldn t be simpler. If we jump forward a few years to today, Tumblr averages two million posts and roughly fifteen thousand new members per day. Now that s impressive! It s used by such celebrities as John Mayer,

12 12 Tumblr Overview Katy Perry, and a variety of other influential developers, artists and bloggers. I was running a consulting company in 2006, and one month we had two weeks between contracts where we were just sitting around, and I said Hey, let s go for it. Let s see if we can build this thing. It took [Marco and I] two weeks to build, and it became the first version of Tumblr. We launched it and showed it to the tumblelog community, and overnight we had like 30,000 registered users in this community who were following those things, who didn t have the knowhow to create it themselves. David Karp Fig 1-2. Tumblr s simplicity doesn t get in the way of its use for highprofile subjects. Why Use it? Tumblr founder David Karp explains: The magic of Tumblr is we let you put anything in and get it out any way you want. We want you to be able

13 Tumblr Overview to post anything. Tumblr takes care of formatting content nicely and making it look good on your blog. David Karp http://www.mediabistro.com/articles/cache/a10281.asp Fig 1-3.

13 13 Tumblr Overview to post anything. Tumblr takes care of formatting content nicely and making it look good on your blog. David Karp Fig 1-3. Tumblr s custom post types. Need more reasons to choose Tumblr over its competitors? Advantages Hopefully, the advantages to using a platform like Tumblr are becoming apparent. But if you need more incentive, here are a handful: Tumblr has over seven million users. As of July 2010, Tumblr has made its way into the top fifty sites in the United States, in terms of traffic. Page views are growing by 300 million a month. It s expected to surpass two billion pageviews by September Roughly 25,000 new users sign up every day. There are hundreds of themes available, via the Theme Garden ( ), both free and premium.

14 14 Tumblr Overview By allowing for custom post types, Tumblr s theme designers handle the work of styling your postings. Need a decorative quotation mark for quote posts? Easy. Need custom styling and formatting for posting videos? Not a problem! Tumblr recently released its handy-dandy iphone app, to make blogging on the go even easier. Creating a custom theme is particularly easy, once you learn the fundamentals. A commonly requested feature is to tweet one s latest blog postings. Tumblr has Twitter functionality built-in. Tumblr uses template tags to insert dynamic information. This is particularly beneficial for designers who are familiar with a scripting language like PHP. Those familiar with WordPress will know about the Loop. Tumblr instead uses a template system, similar to {block:posts}, to allocate and render postings. Despite its simplicity, Tumblr still offers a variety of customization features, assuming that the theme designers implement them into their themes. Themes are automatically optimized for mobile viewing. Should the theme designer require more control of the mobile layout, a customized layout can alternatively be created. It s 100% free both the content of your Tumblr blog and the hosting of associated assets: JavaScripts, CSS, images, etc. ( ). While this is not required, it s a best practice to utilize Tumblr s hosting when developing themes.

15 15 Tumblr Overview Disadvantages No framework is without its faults, though, many of the disadvantages listed below were done on purpose by the Tumblr team. Their intention is to keep this blogging software as simple and usable as possible. A commenting system isn t built-in by default. Theme designers invariably have to utilize third party tools to allow for this, namely with Disqus, which we ll review in a future chapter. Some feel that Tumblr is too simple, and should be extended considerably. However, it can be argued that, if the team were to do so, they would be going against the platform s initial purpose. The code for a Tumblr theme can quickly become rather messy. You essentially place all of the code for your theme, perhaps excluding any JavaScript, into one page. Though the CSS can technically be referenced externally, it s generally not the best practice, due to the fact that it limits some of the conveniences offered to the theme s user. For example, if as a theme designer you wish to offer a way for the blogger to change the text color, there isn t an easy way to do so if your stylesheet is referenced externally. Instead, this information is generally placed within the <head> tags of your theme. Beyond the base post types that Tumblr offers video, audio, photo, text, quote, chat the platform doesn t allow for additional post types. Convinced? If so, sit back, grab a beverage, and by the time you finish this book, you ll be able to officially classify yourself as a Tumblr master!

17 Blocks and Variables Blocks and Variables Home Base Those familiar with WordPress will be aware of its hugely impressive, and massive Codex ( http://codex.wordpress.org/ Main_Page ).

17 17 Blocks and Variables Blocks and Variables Home Base Those familiar with WordPress will be aware of its hugely impressive, and massive Codex ( Main_Page ). Tumblr, on the other hand, in the fashion that it s accustomed to, illustrates everything a new theme designer needs to know in one single page. One page. Your first thought might be: Well the documentation sounds like it s lacking! But the truth is, Tumblr is so intuitive to the point that this is all you really need to Fig Home Base:

18 18 Blocks and Variables get started. I refer to Tumblr s Creating a Custom HTML Theme page as the home base, because you ll invariably return to it multiple times, as you work your way through your first project. see: Chapter 2 Blocks and Variables/ 1_Introduction.mp4 Blocks If you were to create a blog from scratch, you might need to: a. Create tables in your database, which will contain your post data. b. Write a SQL query to retrieve that data probably using JOIN to combine multiple tables. c. Filter through the result set, and echo out the desired information for each row. Tumblr takes care of this for us; that s the beauty of it! All that s required on our part is to create placeholders for our desired data by using what is referred to as blocks. For instance, one of Tumblr s post types is designated for plain old text. To retrieve all instances of these post types and display them on the page, we could write: {block:text} {block:title} <h2><a href="{permalink}">{title}</a></h2> {/block:title} {Body} {/block:text}

Introducing Thrive - The Ultimate In WordPress Blog Design & Growth

Introducing Thrive - The Ultimate In WordPress Blog Design & Growth Module 1: Download 2 Okay, I know. The title of this download seems super selly. I have to apologize for that, but never before have