AJAX-ify the FAQ-Tastic WordPress Plugin

If you came here looking for the plugin click here.

Update: This plugin has been tested with the new FAQ-Tastic Lite plugin and works as expected.

FAQ-Tastic is a wonderful WordPress plugin for maintaining a FAQ on your website. My company recently made a decision for one of its products to run both the blog and FAQ for the product off of WordPress. Using FAQ-Tastic will enable the folks in charge of the FAQ to make changes without having to modify any code.

While the developers of FAQ-Tastic apparently went to great lengths to add AJAX effects to the admin area for this plugin the actual display in the post or page is rather boring in the fact that it does not include any AJAX and simply displays the answer directly under the question. You can additionally list all of the questions which will link to the question and answer lower in the page but that keeps the users scrolling up and down the page. The authors of FAQ-Tastic list in their FAQ that they are planning on AJAXifying the plugin at some future time, but we don’t have time to wait for them to do it.

A simple solution would be to add a small amount of Javascript and CSS code to collapse the answers and only display them once the question has been clicked.

There is one caveat though…Ratings do not collapse with the answer, which causes them to not display correctly, and thus have been hidden using CSS in this plugin.

Now for instructions on implementing it

  1. Open header.php from your WordPress theme in your favorite text editor or the WordPress theme editor.
  2. Add the following code just above the line reading <?php wp_head(); ?>
    <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery/jquery.js"></script>
    <script type="text/javascript">
    	wp_faq = {
    		init : function() {
    			jQuery('ol.faq .answer').hide();
    			jQuery('ol.faq h3').click(function() {
    				wp_faq.toggle(this)
    			});
    		},
    		toggle : function(elt) {
    			jQuery(elt).toggleClass('active');
    			jQuery(elt).siblings('.answer').slideToggle('normal');
    		}
    	}
    	jQuery(function() {
    		wp_faq.init();
    		jQuery('ol.faq li').removeClass('alt');
    	});
    </script>
    
  3. Add the following code just after the line reading <?php wp_head(); ?>:
    <style type="text/css">
    	ol.faq {
    		list-style: none;
    	}
    	ol.faq li {
    		list-style: none;
    	}
    	ol.faq li:hover {
    		background-color: transparent;
    		background-image: none;
    	}
    	ol.faq h3 {
    		padding-bottom: 5px;
    		cursor:  pointer;
    	}
    	ol.faq div.answer {
    		display: none;
    		padding-left: 30px;
    	}
    	ol.faq div.answer p {
    		font-size: 75%;
    	}
    	ol.faq div.faq_approve {
    		display: none;
    	}
    </style>
    
  4. You can add some additional styling by adding a open/close indicator next to the question by adding the following into the css styles listed in step 3.
    ol.faq h3 {
    	padding-left:20px;
    	background: url(/wp-content/themes/YOURTHEME/images/open.gif) top left no-repeat;
    }
    ol.faq h3.active {
    	background: url(/wp-content/themes/YOURTHEME/images/close.gif) top left no-repeat;
    }
    

    You can download these sample open/close images here

    These gif images should be extracted/uploaded to ‘wp-content/themes/YOURTHEME/images’

And now that you are saying I’m not going to do this because it is too complicated…Don’t worry I have also written a plugin with the information I have provided above that will automatically implement this just by activating the plugin.

The plugin can be downloaded from WordPress.org repository.

Instructions on using the plugin

  1. Download the plugin from here
  2. Upload the ajaxify-faqtastic directory to wp-content/plugins/
  3. Open the admin section of WordPress, click on Plugins and then Activate this plugin.
  4. Simple as that…you are done.

If you don’t want to go through subscribing to a mailing list to get the FAQ-Tastic plugin, download using the following links:
Plugin
Manual

Change Log

1.4 (2009-02-27):

  • Update to new version numbering
  • enqueue styles and scripts instead of printing directly to the head

0.3 (2008-08-12):

  • Updated for WordPress 2.6 compatibility

0.2 (2008-03-26):

  • Initial Public Release

Download
AJAXify FAQTastic version 1.4
Archived Versions

About Matt

IF YOU REALLY want to hear about it, the first thing you'll probably want to know is where I was born, and what my lousy childhood was like, and how my parents were occupied and all before they had me, and all that David Copperfield kind of crap, but I don't feel like going into it, if you want to know the truth.

In any case I am employed as a Senior Linux Systems Engineer at Rackspace in San Antonio, TX.

I spent the majority of my college years as an Astrophysics major specializing in black holes. When I got to my senior year and was studying 40 hours a week to stay on track I decided to bail and pursue an easier career.

I spend the majority of my time now contributing to WordPress, developing WordPress plugins, helping out in the WordPress IRC Channel, playing football (not American!), practicing Krav Maga, and last but not least, spending time with my Wife and Son.

This entry was posted in HowTo, Plugins, WordPress. Bookmark the permalink.

24 Responses to AJAX-ify the FAQ-Tastic WordPress Plugin

  1. Joe says:

    Hello, thanks for the plugin, it definitely saved a lot of time for me.

    The one issue I’m having though, is it’s breaking the open-id plugin javascript on my comments form. I’m using openid 2.1.8, faq-tastic 0.9.3, ajaxify-faqtastic 0.2, and WordPress 2.5 with PHP 5.

    If you want any more info let me know, I’ve been trying to figure it out and I have no idea so far.

  2. Joe says:

    Ok, I shouldn’t have replied so fast. Added the code manually and everything is fine now. Using the plugin method definitely breaks it though. It’s probably, because both use jquery and were linking to different locations/versions of the file.

  3. Pingback: Platform change - Challenger

  4. Challenger says:

    Hi, thanks for the plugin, it’s working great.
    I still have a problem though since I can’t figure out how to successfully change the attribute of the question. The simple change in the header.php doesn’t seem to be working, and the characters are too big as they are now :(

  5. baron says:

    hi. Thanks for plugin

    perfect.

    Regards

  6. kjell says:

    Great plugin! Thanks for the effort and the links to faqtastic.

  7. Bob says:

    Just what I was looking for…
    How about some rating stars?
    That would be perfection ;)

  8. Johan says:

    Hi Thanks for this plugin. You saved my life ;-). My theme uses white font and looked shit with the original faq-tastic style.css. I could not fix it and landed here. I am glad you are not asking for money because I may have paid you for this ;-) Have fun Johan

  9. Pingback: Top 15 Plugins To Use WordPress As Your CMS | Rise to the Top Blog

  10. Pingback: FAQ-tastisk plugin inkl. Ajax-understøttelse — WordPress tips, tricks, temaer og plugins

  11. Bryan says:

    This plugin no longer works on wordpress 2.8 … Is there an update or does anyone know how to fix it?

    • Matt says:

      It is not the AJAX-ify FAQ-Tastic plugin that doesn’t work but the FAQ-Tastic plugin itself. The author of the plugin sent an email to the list of everyone subscribed to his mailing list earlier today.

      They are working on a fix and should have one shortly.

  12. Wayne says:

    This plugin does not seem to be working with the lastest version of FAQTastic lite that works with WP 2.8. For example:

    http://healingbeats.com/faq

    is running WP 2.8 and FAQTastic latest and your plugin but it does not ajaxify. :) I think its because the CSS and HTML tags have changed.

  13. Gordon says:

    Is there upgrade to this that is compatible with the new FAQtastic that is compatible with WP2.8?

    I love the AJAXiness, but it won’t work with WP2.8 and the respective FAQtastic upgrade :(

  14. baron says:

    Works great, thank you

  15. Pingback: FAQ-Tastic til administration af FAQs/OSS’er

  16. Rakel says:

    I just wanted to say THANK YOU for the awesome plugin, it looks great on one of our clients websites.

  17. David says:

    Great Plug-in! Very easy to install – worked perfectly the first time!
    I wish all plug-ins were this easy!

  18. Ade says:

    Great plugin, Matt. Nice and simple, and effective. Thanks!

  19. Paul says:

    Can you use this plugin with FAQ Tastic Pro?

    Thanks.

    • Matt says:

      @Paul: I haven’t the slightest idea. I don’t buy software and thus cannot test it with FAQ-Tastic Pro. In addition I have unofficially stopped supporting this plugin.

  20. Michael says:

    worked for me! plugins that make life easier are a gem. thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre>