Every page on a website has a unique web address that appears in the address bar when someone visits the page in a browser. These web addresses are known as URLs. (This stands for “uniform resource locator,” but that’s not too important.) This includes the domain name plus information like folder names and the file name for the specific page. Often, visitors to your site do not manually type in this web address; they arrive from a search engine or social media link, or they go to your home page and navigate to the specific page.
However, there are plenty of cases when you need to provide a link to a specific page that will be entered manually. Vanity URLs are extremely useful in these cases. A vanity URL is a short web address that redirects to another, longer one. You’ll often see these links in offline marketing material, like printed brochures or television commercials. Also, any web address that you might mention in an interview or on a podcast — or that you might tell a random stranger you meet in a coffee shop — needs to be easy to say out loud and easy to remember.
When I speak at a conference, I create a page on my website that contains the slides, links to any of the resources I mention, and a download of all the code I covered. I also create a vanity URL for that page that I can display on the slides and that I can easily tell conference attendees in person. For example, I created a page for my talk at WordCamp San Francisco last summer with this web address:
http://randyhoyt.com/wordpress/subordinate-post-types/ The vanity URL that I gave out at the conference had this shorter web address, based on the conference’s hash tag:
http://randyhoyt.com/wcsf This vanity URL is much shorter, easier to say out loud, and easier to remember.
The easiest way to create a vanity URL on a web server running PHP is to use a subfolder with a header redirect.
Step 1: Create Subfolder
Using this approach, I would create a subfolder with the name wcsf in the main folder of my web server. Depending on your server configuration, that folder might be called public_html, www, htdocs, or something similar: it’s the folder on the web server where the home page file is located. If someone were to visit randyhoyt.com/wcsf at this point, the server would show them a directory listing indicating that the folder is empty — or it would show them a warning that they don’t have permission to see the directory listing.
Step 2: Create index.php File
Next, I would add a file into this subfolder. If I name that file index.php, my server will display that file instead of the directory listing at this web address. I’ll add the following code to that file:
wcsf/index.php
<?php
echo "Now can you hear me?";
?>
In the browser, visiting the vanity URL will display this message.
Step 3: Code a Header Redirect
When someone visits this wcsf vanity URL, we want to redirect them to a different URL. We can achieve that by using a header redirect. In general, when someone enters a web address in a browser, the browser sends off a request to the web server asking for that page. The web server’s response to the browser has two pieces:
- the content of the response, often HTML
- data about the response, known as headers
These headers are not displayed in the browser, even if you view the source: they contain information about the response, the server, how long the browser should cache the result, whether or not the content is compressed in any way, and more. You’ll often hear these called HTTP headers: the browser and the server communicate using the hypertext transfer protocol (HTTP), and that protocol defines the format to be used for passing this data in headers.
The header value I need to use to redirect our vanity URL is “Location.” I don’t need to send any content or HTML back to the browser. Instead, I just tell the browser to look for the page at a different location. To achieve that, I can replace the echo statement I typed earlier and change the code in my index.php file to this:
wcsf/index.php
<?php
header("Location: http://randyhoyt.com/wordpress/subordinate-post-types/");
?>
With this code in place, the vanity URL works when someone types it into a browser or follows a link to it.
Step 4: Change the Status Code
There is one additional header to consider when setting Location, primarily related to search engines. In most cases, the header includes a response code with a value of 200 that indicates the response was successful. There are a handful of other responses, including 404 (page not found) and 500 (internal server error). The response code 301 is relevant to header redirects; it indicates that the requested resource has moved permanently. With a 301 response, search engines will then know to index the page at the other end of the redirect — instead of at this vanity URL.
The following code in our index.php file will set the response code to 301 for the vanity URL:
wcsf/index.php
<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://randyhoyt.com/wordpress/subordinate-post-types/");
?>
—
Vanity URLs can be extremely useful, especially in offline marketing materials. A subfolder with a header redirect is the easiest way to get a vanity URL up and running on a web server running PHP.