How to create a vanity URL in WordPress with a simple page redirect

Hey guys, I’ve got a super simple WordPress tip for you today that has come in handy numerous times over the years. In this age of short URLs, there are often times when you’ll need a top-level, “pretty” URL on your main domain that points to a longer, more complex URL.

For example, we are about to start an affiliate campaign with WPEngine, and my affiliate linked looked like this: http://wpengine.com?a_aid=4e6fc813411ff, which isn’t very pretty. I’d much rather link to a nice looking URL such as http://androidandme.com/wpe, which will read better in banners, in videos, and when being said aloud.

To get this done, we’re just going to make a simple custom page template that uses a simple PHP command to tell the browser that the page has moved. Take the following code and save it inside your main template folder as page-redirect.php:

<?php
/*
Template Name: Redirect
*/

$redirect_url = get_post_meta($post->ID, 'redirect_url', true);
if ($redirect_url) {
Header( 'HTTP/1.1 301 Moved Permanently' ); 
Header( 'Location: '.$redirect_url.'' ); 
}
?> 

If you’ve made a custom page template before, that top part probably looks familiar to you. It’s the special bit of markup that lets WordPress know that you’ve defined a new page template, which will make our new template selectable from the ‘Edit Page’ screen in /wp-admin.

After that, we call up a custom field, “redirect_url”, which contains the long and ugly URL we want to point the browser to. Following the retrieval of that value, we use a PHP header function to send the user along to the new page.

Using your new custom template

To actually use this new custom template, there are just a few quick steps. When creating a new page, make sure that you select your custom template. There will be a drop-down in the right column where you can select your “Redirect” template (see image).

Also make sure that your set your page slug to something pretty. If you’re page is titled “Hey check out my new link”, your url slug will be hey-check-out-my-new-link. Don’t do that. Make the slug something simple, like “wpe”.

All that’s left now is to enter your long, ugly URL into a custom field labeled with the key of “redirect_url”. If you’ve never done it before, fear not, because it’s a much simpler process than people make it out to be. All you need to do is locate the “Custom Fields” box on the “Edit Page” screen and enter a key and value pair. The key is the title, “redirect_url”, and the value is the new URL, in this case: http://wpengine.com?a_aid=4e6fc813411ff

The great thing about this technique is it will work with any URL and doesn’t require a plugin. We use the technique lots of times internally, linking to our own specific posts with long URLs. As I mentioned above, it’s a great technique for video or a podcast, where you’ve actually got to say aloud Don’t forget to check out androidandme.com/wpe for a great deal on WordPress hosting.

Getting custom with Google Currents

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

<div class='customHeader'>
  <div class='editionName'>
    <g:text textid='editionName'></g:text>
  </div>
  <div class='divider'></div>
  <div class='sectionName'>
    <g:text textid='sectionName'></g:text>
  </div>
</div>

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:

<div class='customHeader'>
  <div class='editionName'>
    Android and Me
  </div>
  <div class='divider'></div>
  <div class='sectionName'>
    Latest News
  </div>
</div>

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:

<div class='customHeader'>
<g:link toc="true" class="logo"></g:link>
  <div class='title'>
    <g:text textid='sectionName'></g:text>
  </div>
</div>

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:

<style>
.customHeader { display:block; height:50px; position:relative; background:#000;}
.customHeader .title{color:#ccc; position:absolute; top:13px; right:20px;}
.customHeader .logo{position:absolute; top:0; left:0; width:58px; height:60px; background:url(attachment/CAAqBggKMPSRFDCRyQI-logo-corner.png) no-repeat; background-size:100% 100%;}
</style>

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…

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:

<h2>Related posts</h2>
<g:related max="3">
<p><g:relatedLink>
<g:relatedField fieldId="title"/>
</g:relatedLink>
<span><g:relatedField fieldId='created'/></span>
</p></g:related>

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:

<a class="available-width-100" onclick="google.studio.openOriginalUrl();">View on Androidandme.com</a>

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.