Posted: August 9th, 2012
Author: Ben Heller
Let’s set the stage: we just built a site that was a single page with about 8 major sections. Users scroll up & down the page or click links in the header to navigate. Since the site was built in WordPress, we wanted to make sure it had the best possible content management structure. So, each main section became a WordPress page. Simple enough, except that the “Works” section needed to show a grid with recent clients. We could have used an Advanced Custom Fields repeater area, but we like using the built-in WordPress taxonomy when possible.
So, we made each client under Works its own Post, and assigned them to a common category. Each Post is then called using Colorbox inline content to display in a modal overlay when visitors click on the appropriate thumbnail. It’s a great system and works seamlessly, but with one hitch. What if someone navigates directly to the URL of the inline post? WordPress then loads the post content using the single.php template, and displays it outside our main layout. In other words, folks see the content that would otherwise load inside the modal window, but just that, with no page behind it. What we needed was a solution that recognized whether the page was being loaded via Colorbox AJAX, or called directly.
Since we don’t ever want visitors to see the /work/project-x single page, we’re running a check that says “If the location of this page (/work/project-x) happens to be the location for the browser as a whole, then redirect to the Work section of the main site. But, if you’re on the main page (/) then go ahead and load this file inline via AJAX.” What we want to do is prevent a situation in which a.) Users can actually visit /work/project-x, and b.) Users end up in a page reload loop when accessing /work/project-x via AJAX from the main page. This quick snippit avoids both of these pitfalls, and at the end of the day, what we’ve done is prevent direct access to WordPress single posts pages while allowing it via Colorbox AJAX. Pretty nifty.