Tabbed Content via AJAX in Genesis

This tutorial adds loading tabs with Ajax to my last tutorial about creating a tabbed content page template. Watch a quick video below to see it in action.

I’m going to assume you successfully followed my last tutorial, and you have a working page template with your tabbed content. To load your content via ajax there are a few small, but extremely important steps to get it all working.

Typically, your first tab will be open by default, so you want that content to load on page load. That being the case, your first tab will stay the same.

If your tabs will only load static HTML content like text and images, it’s very simple… instead of linking your tabs to a div ID on the page, you link to new .html or .php file with your content. You don’t even put the content div on the page, tabs-ui created it for you.

My tab links could look something like this:

Naturally, you’ll have to have the existing files in the proper location. My example shows has them in:
/wp-content/themes/child-theme/includes/tabs/filename.html, but you can put them wherever you’d like.

Out of the box, this will work to load the post with ajax. We’re going to take this a step further though.

Ajax loading – a step further

Let’s say your tabs contain a lot of images. The default tab functionality will require re-loading those images every time the tab is clicked, even if you don’t refresh the page. That’s not cool at all. We’re going to temporarily cache the content after each tab is loaded. This requires some additional javascript to get it to work properly. This tutorial loads our javascript in a file called tsm-tabs-ajax.js.

You can see by the snippet notes what each additional bit of code does. Before loading the content we check if the tab has already been loaded, and if it has we show the cached data. If it has been loaded, we load it and set the data as ‘loaded’ so it can be cached.

Lastly we run a loading notification.. I used Font Awesome for an clean spinning icon but you can just put simple text or whatever you want here.

As a fallback, if something goes wrong we show an error message so the user doesn’t just sit there wondering if content is supposed to load when it’s failed.

Loading posts or other WordPress/Genesis loops

UPDATE: Since writing this post, I’ve now learned (and understand) why this next part is pretty horrible and you should never do it this way. It works, but you probably shouldn’t do it. I’ll leave it here so you can learn, but again… don’t do it!

Things get really tricky when you try to load posts or use other WordPress functions when loading content via jquery tab ui. The problem is that loading the files is actually happening outside of WordPress. There is a little trick that will run just enough of WordPress to retrieve the posts/info we need. This goes at the top of one of the tab.php files you are loading your content from.

The first part tells the file NOT to load the theme. This is important because the theme files will already be loaded on the page we are calling the tab content from.

The second part loads the initial file need to get WordPress running so we can pull in our posts. This part is tricky since you need to back out of the directory your file is in enough times to get right to the wp-load.php file.

My tab file is located at:
/wp-content/themes/child-theme/includes/tabs/filename.php
We need 5 sets of double dots “..”. One set for each directory we need to get to the root of our WordPress install, which is where wp-load.php is located. You may have to change this accordingly to get to the correct location.

After this is running, we now can run WP_Query or genesis_custom_loop() to retrieve posts.

Get posts with WP_Query

This is the code in my tab_3.php file

Get posts with genesis_custom_loop()

This is the code in my tab_4.php file

I didn’t show tab_2.php or tab_5.php (from the video) since they are straightfoward. Tab 1 has the post editor content. Tab 2 just had basic HTML, you don’t need anything else there. Tab 5 just had the twitter embed widget code.

That’s all there is too it!

The Final Code

My page template is relatively simple now, since most of the fun stuff happens in external files.

Don’t forget to look at the original post to grab the CSS and to go over the initial tab setup.