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
- Open header.php from your WordPress theme in your favorite text editor or the WordPress theme editor.
- 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> - 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> - 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
- Download the plugin from here
- Upload the ajaxify-faqtastic directory to wp-content/plugins/
- Open the admin section of WordPress, click on Plugins and then Activate this plugin.
- 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
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
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.
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.
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 :(
hi. Thanks for plugin
perfect.
Regards
Great plugin! Thanks for the effort and the links to faqtastic.
Just what I was looking for…
How about some rating stars?
That would be perfection ;)
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
This plugin no longer works on wordpress 2.8 … Is there an update or does anyone know how to fix it?
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.
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.
@Wayne: I have just updated the plugin. Should be good to go now.
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 :(
@Gordon: I have just updated the plugin. Should be good to go now.
Works great, thank you
I just wanted to say THANK YOU for the awesome plugin, it looks great on one of our clients websites.
Great Plug-in! Very easy to install – worked perfectly the first time!
I wish all plug-ins were this easy!
Great plugin, Matt. Nice and simple, and effective. Thanks!
Can you use this plugin with FAQ Tastic Pro?
Thanks.
@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.
worked for me! plugins that make life easier are a gem. thanks!