In my tutorials requests Trello board, a user asked:
I was looking on the StudioPress Site and would like to see a tutorial to implement the FAQ section. Love the action and shadowing, left alignment of multi-line questions. (http://my.studiopress.com/plans/)
In this tutorial, I pull apart the HTML, CSS and JS code for the FAQ section written by the StudioPress team at http://my.studiopress.com/plans/ and show it has been set up.
Step 1
Create/edit the Page where you'd like to have your FAQ section, paste in this sample HTML and modify:
Sridhar, en steep 4 error 500.
Some line does not work
Can you elaborate?
Did error 500 occur after you have activated that plugin?
Resolved. The problem was a plugin of mine. Thanks Sridhar
Sridhar, at step 3 you say: “where faqs is the slug of the Page having the HTML.”
I would like to have this script on the home page AND specific faq page.
What changes do I make?
Change both the instances of
[php]// if this is not the FAQs Page, abort.
if ( ! is_page( ‘faqs’ ) ) {[/php]
to
[php]// if this is not the FAQs Page or front page, abort.
if ( ! ( is_page( ‘faqs’ ) || is_front_page() ) ) {[/php]
Works beautifully… Thanks.
Would this be difficult to achieve with custom fields to make it easier for a client to edit?
You could set it up using ACF Pro’s Repeater field.
Ex.: https://sridharkatakam.com/faq-section-in-genesis-using-acf-pros-repeater-field-and-jquery-collapse/
Sridhar,
I followed your tutorial. The questions and answers were added to my Infinity Pro page but the FAQ did not come out in boxes. What did I do wrong?
Can you provide the URL of your site?
The URL is http://indexesforbooks.com/faqs/
Thanks!
Looking at the HTML structure of that page, the
div.clearfixelement having the two columns is outside.site-container.Can you check if the HTML you have put in is valid? Can you simplify it by just having 1 or 2 FAQ’s HTML code?
Make sure all HTML tags are balanced with corresponding opening and closing tags.
https://validator.w3.org/nu/?doc=http%3A%2F%2Findexesforbooks.com%2Ffaqs%2F
Great!
Why is it not working when css is minified by w3t cache?
I tried and it works fine without css minification. But not when css is minified.
Please help, Sir.
On a fresh install of WordPress, Genesis and Genesis Sample I’ve implemented this tutorial and activated W3TC. I then went to the plugin’s settings and activated Minification.
http://d.pr/i/tF2P
Reloaded the FAQs Page on the front end, and everything works fine like before.
Can you provide the URL of your site?