Spruce interactive

Noise

Prevent Direct Access to WordPress Single Post Pages Using Javascript (AJAX Trick)

Posted: August 9th, 2012

Author: Ben Heller

Tags:

, ,

 Details

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.

Searching for this led us down a pretty deep rabbit hole (there are all manner of fancy PHP solutions floating around), until we came up with a simple fix in Javascript. We added the following to the top of the single.php template:

<script type="text/javascript">
if (window.top.location == window.location) {
   window.location.replace("<?php echo bloginfo('siteurl');?>#work");
}
</script>

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.

  • Frederick Andersen

    Exactly what I needed. Thank you very much!

Talk to Us

Wise men have said, "All good things must come to an end", and so it was with Spruce. We began our first project in 2006, and completed our last in Fall 2013. It's been a wonderful experience, but now it's time to begin the next adventure.

Though...we wouldn't want to leave you hanging, now would we? Here are our top recommendations for world-class branding, design, and web development:

  • Kristina (KJ) Parish and Beam Collective:
    KJ provided the artistic vision that allowed Spruce to succeed, and we still think she's the greatest designer in the entire world. She's started a new collective with some talented developers, and is covering much the same territory as Spruce--design and development all under one roof, with a caliber of service and professionalism seldom seen in this business or any other. If you like what you see on the Spruce site, then definitely get in touch with KJ at kj@beamcollective.com
  • Permanent Art & Design
    Permanent is a nationally recognized design & branding firm out of Minneapolis, MN. They've been a long term collaborator and strategic partner over the past couple years, and we'd recommend them for medium to large sized businesses/organizations who are serious about putting their best foot forward. In addition to design, Permanent offers strategy and marketing services, plus in-house and networked developers. For more information contact Joseph Belk joseph@permanentadg.com
  • Nate Thompson
    A freelancer, Nate reminds us of ourselves back in the day. Smart, communicative, and skilled, Nate is our recommendation for small to medium sized businesses/organizations who have sites built on Wordpress or other open source content management solutions. With a background in both design and development, he's a one-stop shop for most web-related tasks. You can get in touch at nate.a.thompson@gmail.com
  • Kevin DeBernardi
    Designer turned developer, Kevin is embarking on a freelance web career after working as the in-house designer at the Museum of the City of New York. He's adept at translating his design ideas into custom PHP code, and is constantly expanding his technical palette. Kevin's a good choice for projects that don't quite fit into the Wordpress mold, and that would benefit from a consistency of presence and vision from design through execution. Kevin can be reached at kevin@analoglifestyle.com