How to create simple accordions in wordpress
Hey guys,
I am Atif from Techytuts.com – Computer and Internet Tutorials and Resources this is my first guest blog ever. So I will write it short to avoid mistakes. First of all I personally think that this is something must have to show off your skills in your blog or website. This one has got a good interaction and good visual effects, And today basically I’m going to show you how to create accordions of your wordpress posts for some extra ordinary looks. I will show you up how you can set up the accordions, regarding styling you got to do it your self. We will go in 4 easy steps to accomplish this.
First off you need to download this small file accordian.pack.js and save it into your template directory.
Now open up a typical wordpress theme…and search for <?php wp_head(); ?>
One you find it, add this line just above it. To make it look like this. Make sure the accordian.pack.js file do exists in your template directory.
<script language=”javascript” type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/accordian.pack.js”></script>
<?php wp_head(); ?>
For the third step, go to the body tag and replace it with this one…
<body onload=”new Accordian(‘basic-accordian’,5,’header_highlight’);”>
And for the final step, which is a little tougher one… Search for <?php if (have_posts()) : ?> and add this line above it.
<?php $i = 0; ?>
<div id=”basic-accordian” > <!–Parent of the Accordion–>
<?php if (have_posts()) : ?>
Now search for while <?php (have_posts()) : the_post(); ?>
and add these lines below it
<?php while (have_posts()) : the_post(); ?>
<!– Start of each accordion item –>
<div id=”test<?php if (!($i == 0)) {echo $i;} ?>-header” class=”accordion_headings” ><?php the_title(); ?></div>
<div id=”test<?php if (!($i == 0)) {echo $i;} ?>-content”>
<div class=”accordion_child”>
Finally search for <?php endwhile; ?> and add these lines above it
</div>
</div> <!– End of each accordion item –>
<?php $i++; ?>
<?php endwhile;?>
</div>
Your job’s done. You can do the custom styling using css. You can see the working demo here
PS: Good color combination and best suitable time complexity according to the users you expect on your website will make this script useful an attractive and
Hey, I am Syed Balkhi, The guy who is behind Balkhis Inc. I entered the industry back in 2002 not knowing a single thing. I barely spoke English at that time. In the past six years, my language barrier has been eliminated. Aside from English, now I also speak html, and php. Along with the languages I have also managed to master a few arts. Art of web-designing started when I first entered. Messing around with photoshop, I learned how to create my first web design. Now I founded a web designing firm Uzzz Productions. After running numerous amount of websites in various niche, I have mastered the art of web-development. Now I am compiling a resource of what I already know, and what I am learning on this blog. This resource is to help me if I ever need a guide to look back to, and it is help my fellow webmasters.
It never ceases to amaze me with all the really cool things that can be done with wordpress. Very nice tip
Wow, that’s just awesome Atif.
I would probably need something cool like this on my blog too!
Thanks for the heads up
Thanks for compliment Dr. Teeth
I love seeing all the new wordpress themes, ideas and designs coming out. We’re working on updating the MLTV site, so we may have to try out some of your suggestions!
I can’t wait to see the new mltv design. O btw: I will be stopping by the office on Tuesday sometime …
I’m excited to see you! Will you be joining us for lunch?
What time is the lunch and I will make the plans accordingly
So would this be used for recent posts or featured posts or what? It looks awesome, but what’s the best way to utilize it (where to place it and what feature to give it?)
You can use it anywhere you feel like recent posts, recent comments, featured posts, post from a single category etc..
Sorry, I have just realized – I clicked on the accordion and see what it does not (slides down)
You might have not followed the steps properly.. Also make sure you download and keep the accordian.pack.js exists in your bloginfo(‘template_directory’) i.e. your theme directory
how it is useful in a wordpress blog ??
Great tutorial Atif! This really shows us how customizable WordPress is.
Thanks QuickPWN
Btw I have a message for all of the readers…
As you can see above the double quotes (“) are shown as †and single quote (‘) is shown as ’
Dont simple copy and paste the code into your theme.. It will not work..
First make sure you replace all †and ’ with ” and ‘ respectively..
Thanks for reading my post everyone.. And thanks syed for posting it
Syed, thanks for a great introduction to the accordion. I saw it on apple.com about a year ago and had to call a couple friends to go look at it. MooTool has an awesome JS tool for creating these effects!
STUMBLED!
Sweet, thanks for the tutorial.
[...] How to create a simple accordions in WordPress [...]
Nice tutorial man. I like php very much…
Thanks!
I would like to use the accordion in a step by step tutorial (6 steps). I have one question.
How – in a page- do I divide the title of each step from the contents of the step, so that the title is visible in the header of the accordion and the content is not?
Friso.
I’ve been looking all over for this & finally found it. Too bad all links go to a 404 page. Guess my search is not over – or can you email me the accordian.pack.js?