Tutorial - WP Types and jQuery Accordions

Tutorial – WP Types and jQuery Accordions

*/Disclaimer: This is not a beginner tutorial. This is Intermediate to Advanced. It is preferred that you understand WordPress/Php loops, jQuery, jQuery Accordion, and jQuery UI and basic theming before attempting.*/

The jQuery Accordion and WP-Types

Adding a jQuery Accordion to a theme can be frustrating at times. Especially when you have multiple sections of content that you want to put into tabs.

If you would like to see the full source code, please check out the github repository containing the file here

For some time now I have been using WP-Types, a wonderful plugin, to add custom Post types and fields to posts/pages etc. This has allowed me to bring some of the smaller updating tasks into the WordPress back end. Working this way makes it easier for me as a developer in the future, but also allows my clients to update more of their own website. Especially when using a jQuery plugin (like an accordion or slider) on a page that may be changed more often then not, and not using a WordPress plugin with that functionality.

The design I was looking for at the time needed an accordion. I am going to work through this step by step and show you as I go.

Before we get started with the actual accordion, please have Types installed, and the custom fields set up. In this example, I have set up 10 title fields (named field-x-title where x is a number 1-10) and 10 content fields for the body of each tab (named field-x-content where x is a number 1-10). I should note that I have chosen to use 10, but for your accordions this could be any number of fields.

First step, Add the Accordion jQuery links. In this example I will be using the standard jQuery UI, and jQuery links.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion Tutorial</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>

As we all know this is a standard way of using JavaScript and jQuery in our websites. For those who don’t know, lines 6-9 are used to include the current and external files from the JavaScript and Jquery websites to make sure that our libraries are always current.

Line 10 states that the element with the ID of ‘accordion’ will be used to hold an accordion within it.

Variable Declarations

The next step is to declare our variables. For this example, I am using php to take the content of the fields from the page of wordpress, and passing the values of those fields to a variable. This will make checking them later easier.

<?php 
	
	for ($i = 1; $i <= 10; $i++) { ${"tab".$i."Title"} = types_render_field("field-".$i."-title"); ${"tab".$i."Content"} = types_render_field("field-".$i."-content"); } /* End Variable Declarations */ ?>

In the example above we use a for loop to start with the number 1 and add one to 10 until 10 is reached. This will allow us to take the values of all 10 title, and 10 content fields, and pass them to a variable of each using 2 lines of code versus 20 lines to achieve the same thing. To do that, we assign the numbers of the fields to the variable $i, and use the for loops to declare them.

The Tab Structure

Now its time to actually create the accordion.

<?php 
	for ($i = 1; $i <= 10; $i++) { if ( !empty(${"tab".$i."Title"}) && !empty(${"tab".$i."Content"}) ){ ?>

<h3><?php echo ${"tab".$i."Title"} ?></h3>


<div>


<?php echo ${"tab".$i."Content"} ?>

        </div>

        <?php }?>
    <?php } ?>
    <!-- end Tab Structure -->
    <?php endwhile; ?>
   <?php endif; ?>
</div>

</body>
</html>

On line 49, we run the for loop again, just like before to use the variable $1 to produce the 10 tabs instead of doing each individually.

On line 51 it checks to see if the title and content variables (tabxTitle and tabxContent respectively) are empty or not. If the fields are empty, the loop will not produce an accordion tab in the browser, even if its in the middle of the loop.

Inside of that if loop starting on line 54, we echo back the tabxTitle variables into an H3, and on line 57 we do the same for the tabxContent variables into the content area for each tab.

And thats pretty much it.
Quick and simple. Again, if you would like to see the full sourcecode please check out my github. In there you can find the sourcecode, as well as comments for each section.

This methodology can be used for other jQuery functions, such as sliders and other things needing multiple fields of the same thing in WordPress. If there is enough interest, I will be adding tutorials of those as well.