Working on the last project I was asked to create a simple FAQ page. Although there were only 6 questions with pretty small answers, I thought it would be a good idea to create a classic FAQ page template for the Genesis Framework, so that it can be used in the future.
This is how it will look like.
Let’s dive into how you can use this FAQ template in your Genesis powered website:
The page template
Create a file named “faq.php” and paste the following lines in it. Then upload the file in your child theme folder (…/wp-content/themes/theme-name).
Note: You can download this file and all the files you will need from here.
Some js for the toggle effect
Create and upload the “faq.js” file needed for the toggle effect. I use a “js” folder so make sure you will create one in your child theme forlder and upload the file there, or change the path in the faq.php file above.
CSS for styling
Add the following lines at the end of your “style.css” file, before the media queries.
Finally, you can go and create a new page that will make use of the FAQ template. Here’s some sample HTML which you can edit to add your questions.
Leave a Reply