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
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:
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.