While a number of different projects over the last few months have included features where I’ve needed to use information from a URL to do something special with a page, two in particular stand out. These two required that I use PHP to find out the referring page so that I could then define the actual content and structure of the page before it was created client-side.
Client-Side, Referring Page URLs, WHAT?
Let me back up just a little, since I know some of you may not be that familiar with this sort of thing but may still be curious about the techniques. When thinking about WordPress and PHP sites in general, it’s helpful to know that PHP is a server-side language. This means that everything going on in your PHP code is read by the server and performed before the page is ever created in the browser (on the client-side, or the side of the end user). This is why you don’t see any PHP in your browser web developer tools when you inspect the code – only the HTML and other stuff the PHP outputs.
Much of the time, the changes I’m making based on the referrer or URL are fairly minor, and a lot of the time I need them to be flexible based on the user’s interaction with the page. In these cases, I use special content in the URL such as fragments preceded by the hash symbol (#) or query strings, which use question marks and other symbols to set up a whole set of information right in the URL. Then, I use jQuery to read the URL and perform whatever page tweaks are necessary.
jQuery Example: Fairmount Fibers
I recently coded a wonderfully complex site for local Philadelphia business Fairmount Fibers, the US distributor of Manos del Uruguay yarns, through Aeolidia (the site was designed by Meg Lewis). There is a directory of available patterns, which can be filtered and sorted by yarn, pattern type, and whether the pattern is free or for purchase.
While the client wanted to highlight the free patterns in the navigation menu as well, it didn’t really make sense to create a whole second page that does the same thing as the main patterns page. Instead, I coded just the one page, and set up some visual changes based on whether the URL has #free at the end. When you click the “Free Patterns” link in the menu, you’re really just reloading the same page with that fragment on the URL. Then, the code reads that fragment and triggers changes to the page title and filtering.
Here’s the code, including the filtering bits and thoroughly commented:
You can also check out all three code snippets from this tutorial over on the full Gist page.
Referring URLs in PHP
As mentioned, that jQuery method works on the client-side, meaning it happens in the browser and can respond to user interaction. The two projects I mentioned that lead to this post required code changes to be made on the server side, meaning the actual page itself or a piece of content on the page needed to exist or not based on where the visitor came from.
PHP Example 1: Love Taza
The first instance was for Love Taza’s “Once Upon a Time” archive page, which features their favorite posts. Naomi and Josh wanted the page to show a grid of posts and then to display the full post content underneath the grid when an item is clicked.
In order to do this, I needed to be able to pull just the middle part of the individual post template onto the page using ajax, but only when the post was called up from this specific page. In all other instances when the individual post is called up, the header, sidebar, and footer also appear (e.g. the whole template is used).
WordPress actually has a useful function for finding the referring page – wp_get_referer(); – so that’s what I used here:
PHP Example 2: Em the Gem
The Love Taza example is great when you have a specific URL you’re working with, but when I was creating the blog section of Em the Gem, I needed to include a “Back to the blog” link on single post pages and I quickly discovered I needed to be checking for any referring page that included /blog/ in the URL.
Think about it, the link needs to go back to the last blog archive page you were on before getting to the post. That may not be just the main http://emthegem.com/blog/ page – in fact it’ll ONLY be that page if the post is one of the most recent 5 posts and you got to it via the main blog page. In many cases, I bet you’d get to the post via a category archive or a page farther back in the blog. In other cases, you may get there from a non-blog page, in which case a link “Back to the blog” doesn’t actually make a whole lot of sense since it isn’t equivalent to your back action.
What I wanted was to find out if I came from a blog page and, if so, link back to it. If not, no link would display at all, minimizing potential confusion and awkwardness (nobody likes that). Solution:
In this one, I didn’t use the built-in WordPress function. But I could have – that wasn’t a specific for-a-reason decision, it just happened that way.
All of the above examples and decisions came out of necessity (there’s nothing that gets me going more than a good functionality challenge in a client project), but they’ve definitely made me ponder the potential use cases for finding the referring URL and/or providing information between pages using URLs and fragments.
