July 18, 2017
Example FAQ menu – these all link to the bottom of the page
FAQ pages are very common on our site, and are a great way to answer common questions. We recommend all FAQ pages to have a menu or list of questions at the top of the page, and each list item link to the answer in the page content body. An example of this can be seen on the Admission Office’s FAQ page. Follow the steps below to achieve this formatting:
Create your list of questions
Remember that the WordPress text editor can help you with writing the list tags. If you have more than 5-6 questions, we recommend using columns to utilize space better.
<li>What is HTML?</li>
<li>What is CSS?</li>
Create your sections of questions & answers.
Use an <h2> , <h3> or <h4> to format the questions. The answers should be in regular body font (paragraph text). We recommend separating each question with a pair of <hr> tags around each question. You may want to add the class “top-margin” to add additional space between questions.
Add “id”s to each question.
An “id” should be a short easy to remember name, you can also type out numbers for the id if you prefer. Add the id by switching to the “text” editor, finding the opening tag in front of your question and typing ‘ id=”id-name” ‘ inside of the tag. Refer to the example below:
<h2 id=”faq-html” class=”top-margin”>What is HTML?</h2>
<p>HTML stands for “Hyper Text Markup Language.”</p>
Link to the questions
Go back to your question list. Highlight one and select the “link” button. For “URL”, enter the “#” sign followed by the id for the matching question and answer section.
<li><a href=”#faq-html”>What is HTML?</a></li>
Now when a user clicks on the question link in at the top of the page, the browser will scroll to the linked section of the page.