[Editor’s Note: This is the second part in a two part series. Be sure to read part 1!]
In post one of this series we were looking at ways to use WP to create dynamic jQuery user interface elements. Specifically a jQuery accordion.
Our first step was to create a static page template in WordPress with a jQuery accordion.
Step 2-3: Putting your page content into an array and in your accordion.
Now we’re focusing on step 2-3 of this method:
- EXPLODE! the WordPress content into an array.
Loop the array into sections of the accordion.
The first step is is to split up your page content into an array. To do this, you need to define a character in your page that denotes where you want the page to split. In this case we’re going to use the “pipe” character (“|”) to determine our split. This requires a bit of extra PHP in your WordPress page template.
We need to first get our content and assign it to a variable. Then we need to tell WordPress to process the content (from the Database) and output its usual HTML, after which we split said content into an array at each “|” in the page.
[cc lang=”php”]
// Get the content from the DB
$content = get_the_content();
// Process the DB content into WP page HTML
$content = apply_filters(‘the_content’, $content);
//Strip the
tags.
$content = str_replace(‘
|
‘, ‘|’, $content);
//Split the content into an array at each “|”
$content_split = array_filter(explode(‘|’, $content));
[/cc]
Now we should have each section of content in a nice array. With a function named “explode” it’s no wonder people love PHP.
Next we need to loop through the content and place a block inside each jQuery accordion container.
[cc lang=”php”]
//Get the number of content blocks in the array
$content_count = count($content_split);
// Our first content block will be outside the accordion.
/p>
//A new for loop will run one fewer than $content_count (because of the
//content not inside the accordion).
[/cc]
Your finished code should look something like this:
[cc lang=”php”]|
‘, ‘|’, $content);
$content_split = array_filter(explode(‘|’, $content));
$content_count = count($content_split);
?>
[/cc]
Ta-Da! You should now have content in each block of the accordion (determined by how many |s you have in your page).
One important note. Remember in post one we had those lines of jQuery that took the h2 text from inside the “container” element and appended it to the “trigger” element?
[cc lang=”javascript”]
$(‘.container h2′).each(function() {
$(this).parent()
.prev()
.text($(this).text());
$(this).remove();
});
[/cc]
We did this for a good reason. Now inside our WordPress page editor, all you have to do to title each accordion section is put the title inside h2 tags. This can actually be done inside WordPress’ “Visual” editor and requires the person maintaining the page to have no code knowledge whatsoever. All they need to do is put the text they want for the accordion title as a “Heading 2” element and separate each section with a “|” pipe character. It takes a little explaining but should make sense to even the most code illiterate.
Congratulations. You just made a fully dynamic jQuery accordion in WordPress.
Is this the easiest way to make an accordion? My logic was that I wanted to make less work for myself. Lazy, perhaps, but now when a client (or church department) wants to make a change on a page, it can all be done in the WordPress admin tool, not in the code.
More work at first, but less maintenance after launch. That sounds like a win to me.
Antti Roos says
Superior script! And works like a charm =)
simba says
after reading your post , but i don’t know where to post these codes,
pls, help to tell where to put such codes you provide
regards!
Simba