Yesterday Google announced Currents, a ridiculously awesome feed-reader-magazine-type thing that I think is shaping up to be pretty damn disruptive. In an attempt to really throw some egg in the faces of their competition, they’ve also rolled out the Google Currents Producer, giving content owners point-and-click, app-creating powers.
Google Currents is available for Android and iOS, both phones and tablets, meaning pretty much every big blog on the planet is going to be rolling onto Currents in the next few weeks. If you’d like to stand out, you’re gonna have to get your hands dirty.
The good news is that Google Currents is pretty well documented, especially for a product right out of the gate, and it uses a bunch of technology you’re probably already familiar with (Well, if you’re a web dev, that is). Every single view (table of contents, lists, articles, etc) are templated for complete control, allowing changes with simple CSS, HTML, and HTML-like markup. I say HTML-like because I thought these XML namespaces like <g:field> looked familiar enough that if you know HTML you should be comfortable inside Currents.
Some Current Lingo
Before we get started, I’m going to ramble off some lingo that I’ve picked up in the last day. Since the app is called Currents, I’ve seen lots taking to calling a single instance a Current. The actual term appears to be Edition, but I’ll probably be using them both interchangeably. Like I mentioned above, the tool to created a custom edition is called the Google Currents Producer, and can be found at http://google.com/producer.
I should also mention that this guide is aimed squarely at folks that have already logged into Producer and poked around some. Nothing that follows is crazy complex, but it might look weird if you’ve not even seen the Producer flow. Get in there and play around some!
Once you’ve created an edition, you’ll be able to add sections from some predefined choices, like Feed (RSS or Atom), Articles (Google Docs or HTML), Photos (feeds from services like Flickr), Videos (from YouTube), or Social Updates (Google+ built-in or RSS for things like Twitter). Setting up your sections is mostly a point-and-click process, so I won’t really be covering it in much detail here.
You can create and organize as many Sections as you want, along with a special Table of Contents section, which shows the most recent updates from all the other sections. Like I said earlier, nearly every single view here is templated. Each section can have individual templates (tabloid, list, photos, etc), along with templates for things like the section header and the article template. One thing I’ve noticed almost all Currents doing is defining a custom header template, so let’s start there.
Creating a Custom Header Template in Google Currents
Once you’ve got a section created (be it a feed, videos, or table of contents), you’ll probably want to slap a custom header on that bad boy. Setting it up is actually pretty easy but I found a couple “gotchas” I wanted to detail here (mainly so that other Editions I’ve subscribed to will use them, haha).
When you first create a section, the header template will be set to “Default”. Using the drop down, change that to “Custom” and have a look around. Most of the markup, should look pretty familiar, and the piece you’re looking for specifically should be near the bottom, with the class CustomHeader
That’ll give us our first glance at some of the Currents Producer template tags, which commonly start with <g: and end with some logical suffix. You can find a full list here, along with an abbreviated version right inside the Producer by clicking “Insert Tags”.
The above markup will output my Edition’s name and the specific section name, split by a divider (you’ll find the divider CSS at the top of the template file). I’m not sure if you guys need to even see this step, but for the sake of illustration, the above code would render the following:
[html]
<div class=’customHeader’>
<div class=’editionName’>
Android and Me
</div>
<div class=’divider’></div>
<div class=’sectionName’>
Latest News
</div>
</div>
[/html]
While styling the header is just a matter of applying some simple CSS to .customHeader, there are a few other things we can do here. First, if you’ve seen our mobile site, you know we don’t even display our title text, just a logo. So that first <g:text> will be getting the boot.
Also, something you might not notice until you use the Edition inside the app itself, there is no link to the index on the main title, something that drives me crazy. Virtually all websites use that convention, most apps do, too, so I wanted it in my Current. Since I now just have a main logo and section title, I no longer need the divider, so it gets the boot as well. My new section header looked like this:
I’m using <g:link> to link back to the table of contents. If you’d like to see what else you can link to, check out the documentation on g:link or try the “Insert Tags” popup directly within Producer. I classed the link with “logo” so that I’d be able to target it with CSS, and the rest was simple styling:
If you notice that weird-looking path in there (attachment/CAAqBggKMPSRFDCRyQI-logo-corner.png), you might be sort of scared, but Producer makes uploading assets pretty dang simple. There is a media manager and every image uploaded is displayed with a path you can use in your custom markup. Simply upload your logo and grab its path from the “Insert Tags” popup available directly inside Producer.
The result is a custom header, with a logo that links to your TOC section, along with a dynamic title for the section you’re viewing. We named ours Current Edition, which you can see in the preview to the left. If you were in the Devices section, it would read Devices, thanks to our <g:text> template tag. All you’ve gotta do is make a copy of your markup to any sections you want to share this new, custom header.
There are still a few catches, like the fact that your custom header template CANNOT BE TALLER THAN 50PX. I write that in all caps because I wasted about half an hour last night trying to make it so. Anything more will definitely be cropped, no matter how many overflow:show !important‘s you add. It’s a rule I finally found on this official Google helpdoc cleverly titled Add a custom header. If my description was too breezy or if you need more help, I’d recommend consulting that doc. I’d also recommend setting up a custom header as a nice first exercise. Adding a logo to the Google Currents header is a great way to dip your toe into the pool before experimenting with more complex template tags. Speaking of which…
Creating a list of related posts in a Google Currents article template
Earlier I was saying that if you were comfy with HTML that you’d be fine inside of Currents. What I really meant was if you know HTML and are at least a tiny bit comfortable with PHP or WordPress then you’ll be fine. Creating a list of related posts is going to make use of a loop, something that should be familiar to any blog developer.
To loop through the related posts, we’re going to make use of the g:related template tag, another find from the official Google helpdocs. Seriously, bookmark that thing. Anyway, after switching it to “Custom”, we’re going to drop the following into the bottom of our Article Template:
In the above example, the tag <g:related> will find the 3 most recent related posts and display them, along with a timestamp, at the end of the article template.
One thing to note, is that when inside a related loop, all the template tags change and get an extra “related” prefix. For example, <g:field> becomes <g:relatedField> and so on. Without the prefix, the values returned will reflect the original individual article being displayed, not that of the returned related post. It’s a small difference but a very important one. Make a mental note. Now.
While I didn’t exactly take the time to style these yet, at this point, it would just be a simple job of applying some CSS. I’m mainly just jazzed to have it working, as learning the Producer loop methodology is the first step in making my own custom TOC, tabloid, and list templates. For now, I’m not exactly sure what the match criteria is (topic, author, date, etc) but the articles seem to be relevant so I’m rolling with it.
Creating a link to an external site in Google Currents
One thing I noticed almost immediately and didn’t really like was that a lot of articles don’t display a link back to the main site anywhere. On top of that, Currents doesn’t have a way for users to add or even view comments from inside the app. Those drawbacks added up to an absolute need for a button that let users visit the original article.
Oddly enough, I see some remnant styling of a button, classed .seeOriginalLink, but I don’t see that anywhere in my templates. I’ve seen this magical button floating around in some Currents, live, but I’ve got no idea what triggers it or when it appears. What I knew for certain was that my WordPress-provided feed somehow wasn’t triggering them and I wanted them. So I did some digging and found a JS function that will launch an external link in Google Currents:
[html]
<a class="available-width-100" onclick="google.studio.openOriginalUrl();">View on Androidandme.com</a>
[/html]
Two things of note here: I used a JS onclick to fire the function and I utilized the Producer-provided class .available-width-100. The JS will open the original URL in an internal browser, along with a button to launch the site in the user’s default browser. I’d much rather launch straight to the default browser (so if anyone has figured that out, please let me know) but for now, I’ll take it.
Using .available-width-100 means that my button will fill all of the available space, be it full-screen or column. You can change that integer to any number really, I just wanted a full-width button. There are other special classes, like .g-unbreakable, which you can find documented over in the official Google support page.
The result was a nice, green button that will draw users back to androidandme.com. We have an insanely healthy user community and I wanted to make sure that people were still able to leave comments and upvotes with just a few clicks. If you’re syndicating a feed into Google Currents, I really think you should always have a link back to the original content, even if Currents sometimes doesn’t seem to want to provide one.
Import WordPress to Google Currents
I said I wasn’t really going to talk about this one in depth, and I won’t, so we’ve saved the easiest part for last. As you look around at other Currents, you’ll probably notice that people create a bunch of different sections from one blog. For example, in our Android and Me Current Edition, we’ve got a section for Latest News, Devices, Apps, etc. We even have special channels like posts from only Taylor or just giveaways from The 25 Days of Tegra. Going from WordPress to Google Currents is easier than you’d think.
The process is really simple, actually, and just requires tracking down all the custom feeds that WordPress already provides for you. Like most of us know, WordPress generates RSS and Atom feeds from recent posts, comments, and more. Every category, every tag, every author has their own feed. You can find them just by tacking /feed onto most URLs. For example, http://androidandme.com/tag/google would be http://androidandme.com/tag/google/feed. Pretty simple, huh? With that special feed URL, you could easily set up a section on only Google news in your Current.
If you’ve got a special author you’d like to feature, you could easily use his feed as a custom channel. If you’ve got a WordPress tag that’s seeing a lot of action, make a Currents section out of that specific feed. Currents even has its own CMS-style article capability, allowing you to mingle custom, non-WP data in along with your posts, but that’s probably best saved for another day.
So that’s it. Go make some Currents
Like I said at the start, I think Google Currents is one of the most gnarly and disruptive things to come down the pipe in quite some time. It allows virtually any content owner to create ridiculously custom Editions in just a matter of minutes. With some practice, I have a feeling we’re about to see even crazier things out of folks with too much time on their hands. And on those lines, I have a feeling there is about to be a really vibrant market around custom Currents themes.
For now though, I’m just happy to tinker and share.
I’m sure you’ve seen them around: those big, inviting launch pages that sites use to gather leads before a public launch. If you haven’t, check out Fab.com for a nice example, or take a peek at Launch Effect, one of the more popular WordPress solutions available.
In the next few weeks, we’re planning to launch AndroidHire. We’ve already got the site online, with a heavily customized theme, and handful of users actively managing job listings. The problem: we wanted to lock everything down to any non-members (while still leaving the main site intact for existing users). Looking around, I saw a handful of plugins (like Maintenance Mode) or full-on themes (like Launch Effect), but I wanted something lighter. Just a simple way to pick off logged out traffic and redirect them to a nice signup page.
The solution proved to be even easier than I imagined, so much so that I figured a blog post was in order. To sort out the guests, simply drop something like this into the very top of your theme’s header.php:
[php]
<?php if ( ! is_user_logged_in() AND ! is_page(‘Launch’)) {
header("Location: http://androidhire.com/launch");
exit(); } ?>
[/php]
The first line is a conditional with two statements. First, it checks if the user logged in. If they are not, they are redirected to my “Launch” page. Second, it checks if you’re already on the “Launch” page, simply to avoid a redirect loop.
Of course, if your data is highly sensitive, you might want to take some further steps, like disabling RSS feeds or locking down (or moving) the /wp-admin folder. This is just a quick and easy way to create a new landing page without affecting the rest of your active site.
The launch page I made is just a simple signup form that ties to Mailchimp. I’ve got two options, one for job seekers and one for job posters. Upon launch, I’ll email out to both lists and hopefully pull some extra attention from an eager crowd.
My fascination with Klout has been growing over the past few months. If you’re not familiar, Klout is a service that tracks activity across various social networks and digests everything into a simple 1-100 index. You can link up a Twitter account, Facebook, Google+, etc. At the time of writing, my Klout score is a 51. my Go give me some Klout.
If you are familiar with my main project, Android and Me, you know that we also dabble in points and rankings. Users can earn points for reputation and to unlock certain permissions around the site. As we move into more points-based permissions, we wanted to give new users a way to jump-start their point total. Our main argument: If someone is influential in other areas of the web (especially social), should he have to re-prove himself on our site?
We’ve been there before. You join a new community and spend weeks trying to build some reputation/ratio/friends/whatever-that-network-happens-to-call-it. On our site, if there was a sweet permission locked away behind some points, we didn’t want to exclude a potentially awesome user just because his account was new. To give fresh accounts a quick way to power up their point totals, I’ve built The Kloutulator- a digital influence exchange, if you will:
It uses the Klout API to check the score of the user and applies a number of calculations to produce an awesomely weighted score. The main conversion rate is based on the Klout score of @androidandme. It also polls for topics of influence and provides point bonuses for certain keywords (such as Android, Apps, etc). The Kloutulator will even remember how much +K you’ve cashed in to date so if your score ever increases you can come back and cash in the remainder.
While I’m obviously a bit biased, I think this is a totally rad idea. Converting work/connections you’ve completed in other areas of the web into real advantages on a new platform makes me feel all warm and fuzzy inside.
About a year ago we started a newsletter over on Android and Me. We thought it might also be a fun way to connect with readers and give away some prizes, and of course we wanted the extra traffic and clickthroughs. People seemed to like them: we had a great open rate and we gave away some prizes in a neat way (tracking opens). I think all total, we sent four newsletters. This time around, we’re going to do some things differently.
Design a simple newsletter
Quick backstory: when I worked at NCsoft, I was in charge of HTML newsletters. A couple times a month, I’d get some crazy-detailed fantasy-inspired mailer and it’d be my job to chop up all the gold and wizards into a working email. I got really good at it.
So when I started the Android and Me Newsletter, I thought it might be a fun chance to flex my HTML table muscle again. I whipped up a neat layout that had a featured note space (that looked like notebook paper), three columns, drop shadowed edges– the works.
The newsletter looked great, but it didn’t really hold a ton of content. If you included more than a few stories, things looked messy. There was little organization and lots of doodads.
The refreshed newsletter aimed to tackle a few shortcomings of the original. First, the newsletter needed to render nicely on a mobile phone and desktop client. We run a site about smartphones and realize that most of our users receive email to their phones. My old newsletter looked like ass on a tiny screen, so I made this priority number one. Second, the old newsletter was all static HTML. It was terribly janky to update and I was the only one that knew how to do it. Third, while I was using some MailChimp reporting, I didn’t quite know what effect the newsletter was having on my site, so I wanted to move to Google Analytics campaign tracking (child’s play for lots of folk I’m sure, but I don’t do a ton of analytics tinkering).
With those few goals in mind, I set out to make a newsletter that I (and other staffers) could live with updating.
Make it super-easy to update (but not automatic)
The problem with the old newsletter was I got cocky and created a bunch of custom images sizes and content snippets my CMS (WordPress) didn’t currently support. The simple process of selecting a few articles for mailing became a totally dreaded task. To avoid the hassle, this time around I built a custom post type that makes creating and maintaining emails a snap.
Within my WordPress install, alongside Posts and Pages, you’ll find Newsletters. You can add/delete/edit them in just a few clicks. You write the intro just like you would a regular post. You can hand select which posts to include in the mailing. There’s even a secondary content zone at the bottom for our community content and giveaways. Setting up a newsletter for mailing takes about 5 minutes total.
As easy as WordPress made it to generate emails, MailChimp made it even easier to send them. They’ve got a URL import option, so when I’m ready to send I just paste in my URL and the mailing is ready to send.
Because I made the process so simple, I was able to recruit a few other editors to help curate the newsletter. Anthony and Jess are going to help me pick stories and write intros on a weekly basis, making my involvement even simpler. Also I use the word curate because I still wanted a human hand picking these stories. A lot of sites resort to sending automated recaps or RSS-based mailers and I didn’t want to do that. I wanted each mailing to feel like a real person had written you a note and picked out some pertinent articles worth sharing.
Track clicks and goals
We send all of our mail with MailChimp, so this part was pretty easy and is something I should’ve been doing more of to begin with. I enabled Google Analtyics tracking and started appending custom campaign tracking to all URLs. I also installed the WordPress plugin Analytics 360 by MailChimp.
Since I just sent the mailing last night, this part is obviously a work in progress. I’m still waiting to see exactly what sort of open rate and clickthroughs I get, but the initial reports are looking good (so far clicks vs opens is looking better by almost double). Since we sent the last email (damn near a year ago), the list has grown by over 1,000 users. While I had an extremely low bounce-rate, I’d still imagine a lot of these accounts might have been abandoned in that time.
Along with the new click tracking, I tried to give the user more worth clicking on. Last night was the huge Android event in Hong Kong, so we did a special Galaxy Nexus mailer, covering every aspect of the late-breaking news. I also included a banner linking to our accessory store, an area I can always take a few more clicks.
We also brought back the lottery-style giveaway, made easy by MailChimp’s open tracking. I can see the email address of each user that actually opened my email, then I use random.org to select a winner.
As usually happens with these posts, I’m just rambling now, so let me try to wrap everything up into a few coherent sentences:
So how did things go?
Through the process, I picked up a few keys to victory. Your newsletter should be easy to update, should look good in mobile and desktop email clients, should encourage clicks, and you should have the tracking in place to know when people do. No brainers, I know, but sometimes it’s a lot harder to keep it simple than you’d think.
Even though it might not look like much in a browser window, I’m really happy with how my newsletter turned out. In both my web inbox and phone screen, the email looked great. Best of all, it only took a few minutes to set up, a far cry from my old days slicing up golden wizards and intricate dragons.
Are you in charge of a newsletter somewhere? Got any tips? Or even better, any questions? I think at some point I’ll probably cover the process of creating a newsletter template in WordPress, but I figured we could chat in the comments until I got around to that…
One of my favorite WordPress functions to make a recent debut (since 3.0) is get_template_part, which is a great way to customize the way your templates behave. get_template_part plays great with post formats and conditionals, and even has some built in logic of its own. Before I explain how it works, let’s just take a look at the function:
The function is a way of inserting one template file into another. Lots of themes use get_template_part to call the main loop. Lots of themes use it for templating post formats, where each format gets its own file (post-gallery.php, post-aside.php, etc). It’s a great way to keep things clean and organized and helps make your templates more dynamic. Read more…
I’ve recently started using APIs with some amount of confidence so I figured it was time to start sharing some of what I’ve learned. For longer than I’d like to admit, I thought APIs were some out-of-my-league thing that I needed to learn some more PHP before I even attempted to navigate. Turns out I was wrong: APIs are pretty dang simple.
To get the ball rolling, we’re going to look at using the Topsy API to return the number of tweets for a given hashtag (or Twitter handle mention- any Twitter search really). Topsy is a social search engine and provides a really nifty API for accessing some awesome real-time data.
Note: for access to increased queries, you’ll need a Topsy API key. They are free and painless, but they’ve also got a free version if you don’t mind the limitations. If you’ve got a key, insert it where you see [your api key]. If you don’t, just remove that entire bit from the markup and carry on. Read more…
A couple a months ago we started kicking around the idea of a WordPress Austin meetup that was powered by member submitted questions. We set up a Google Moderator page to field all the ideas and now a handful of us usual suspects will be taking 5 (or so) questions and explaining them in-depth for an awesome night of focused WordPress discussion.
Pitching in tonite are some faces you’ll recognize from the Austin WordPress scene. WP Engine is going to talk about setting up a staging server, Pat Ramsey is going to talk about the making the WordPress editor play nice with HTML, Joseph Carrington is going to talk about extending WordPress into a CMS, and I’m going to talk about custom post types.
Below you’ll find my notes about custom post types. At goo.gl/tSOUc you’ll find my slides. We’re hoping to live stream the talks, if that happens I’ll come back and update with a video link.
Justin Tadlock explains custom post types – One of my most referenced articles when dealing with registering new custom post types, a complete walkthrough of the process with lots of copy/paste/tweak code examples.
register_post_type in the WP.org codex – A complete look at all the options and variables you have access to when registering a custom post type. Highly useful once you need to tinker with some of the more specific settings of a post type.
Create your first custom post type – A blog post from ThinkVitamin covering the steps involved in registering a custom post type. They’ve got lots of images if you’re a visual kinda-person.
Themergency Custom Post Type Generator – A wizard that walks you through setting up all the options needed for registering a custom post type, then provides you with a simple copy & paste snippet of code which you can place in your theme’s functions.php file.
More Types Plugin – A plugin that will create custom post types for you. This isn’t my preferred option but would totally come in handy to the new or exploring user.
Post Types in WP.org code – An overall look at the post type along with some code samples and links to related functions. Good for those who really want to understand what a post type is and how they work.
Hello! The following are my notes and announcements from the September Hands On WordPress meetup in Austin, TX. If you were present, you’ll find all the links from my short talk on WordPress best practices below. If you stumbled in from the internet wilderness, feel free to take a look around, as I’ve labeled each section of links and added some short descriptions.
To get started, here is a link to my slides from the talk. Make sure you stay tuned after the notes for a special announcement regarding next month’s meetup.
PS: Someone asked about a link the slides from my last talk about Google authorship markup, so here is that link.
WordPress template hierarchy, guide to understand why your theme works like it does, complete with scary chart. Custom page templates, a WP.org codex guide for creating custom layouts. Creating a Child Theme, a guide from the WP.org codex on creating a theme born out of existing code. I, of course, recomend the ‘sibling theme’, a phrase I think I made up to describe the act of completely duplicating a theme and working from the new, whole files.
Aaaaand I think that just about does it! If you’ve got any questions, you can try leaving a comment on this post. I can’t guarantee I’ll answer it, but I’ll do my best. Which brings me to my next announcement:
Submit a question for next month’s WordPress meetup!
Sometimes at the end of our sessions, we open the floor to random questions. Sometimes this free wheelin’ discussion is my favorite part of the evening, sometimes we seem to have trouble coming up with enough questions to build some steam. So this month, Pat and the gang have asked me to host a session on WordPress best practices, and we’re going to be fielding your questions in advance.
To submit a question, please visit our Google Moderator page. Google Moderator is a tool that lets anyone submit and vote on questions. We’ll let the tool run all month and by next month’s meetup we’ll select a handful of the top questions and answer them live at Cospace.
Since we’re doing a ‘best practices’ session, aim for questions about general WordPress methodology, core theme functions, plugin developments- anything that isn’t about a specific theme or framework. We might take some time to tackle those issues too, but for the most part we’ll be aiming at topics that we think will be beneficial to WordPress users of all levels.
ThemeForest is a new template and theme marketplace from envato. I recently saw they were looking for authors on their blog, In The Woods, a “blog of all things themey.” So far I’ve contributed three articles, with more on the way. Read more…
There is a new contest running over at LoonDesign giving away a whole slew of free website templates. LoonDesign is hosting the contest, giving away a theme of his own, along with many donated from the ThemeForest community and premium theme club ElegantThemes. I threw in two copies of QuikTab, my new premium, one-page WordPress theme powered by jQuery. It’s available now for just $12 on ThemeForest.
Ok, enough talk, head on over to the contest page on LoonDesign for a shot at some great, free templates and WordPress themes.
The result is a custom header, with a logo that links to your TOC section, along with a dynamic title for the section you’re viewing. We named ours Current Edition, which you can see in the preview to the left. If you were in the Devices section, it would read Devices, thanks to our <g:text> template tag. All you’ve gotta do is make a copy of your markup to any sections you want to share this new, custom header.
One thing to note, is that when inside a related loop, all the template tags change and get an extra “related” prefix. For example, <g:field> becomes <g:relatedField> and so on. Without the prefix, the values returned will reflect the original individual article being displayed, not that of the returned related post. It’s a small difference but a very important one. Make a mental note. Now.
Using .available-width-100 means that my button will fill all of the available space, be it full-screen or column. You can change that integer to any number really, I just wanted a full-width button. There are other special classes, like .g-unbreakable, which you can find documented over in the official Google support page.
