Creating an FAQ Accordion in single page without Custom Fields Plugins

Instead of using custom fields, we’ll leverage the WordPress content editor to input FAQ data directly into the post content. This method provides flexibility and avoids the need for additional plugins.

Identify the FAQ Content Structure:
- Decide on a clear format for inputting FAQs into the post content. For instance:
Create a Custom Function:
- Develop a PHP function to parse the post content and extract FAQ data based on the defined structure.
Integrate into single.php:
- Include the custom function in your single.php template.
- Call the function to retrieve FAQ data and display it in an accordion format.

Display Post Content and FAQs In your `single.php`, add the following code to display the FAQs within the post content area:

<?php

$faqs = get_post_meta(get_the_ID(), ‘_faqs’, true);

if (!empty($faqs)) :

<?php foreach ($faqs as $index => $faq) : ?>

<button class=”faq-question” aria-expanded=”<?php echo $index === 0 ? ‘true’ : ‘false’; ?>” aria-controls=”faq-<?php echo $index; ?>”>

<?php echo esc_html($faq[‘title’]); ?>

</button>

<div class=”faq-answer” id=”faq-<?php echo $index; ?>” style=”display: <?php echo $index === 0 ? ‘block’ : ‘none’; ?>;”>

<?php echo wpautop($faq[‘content’]); ?>

<?php if (!empty($faq[‘link’])) : ?>

<a href=”<?php echo esc_url($faq[‘link’]); ?>” target=”_blank”>Read more</a>

<?php endif; ?>

</div>

<?php endforeach; ?>

</div>

<?php endif; ?>

</div>

Add JavaScript for Accordion Create the `faq-accordion.js` file in your theme’s `js` directory with the following content:

document.addEventListener(‘DOMContentLoaded’, function() {
var faqItems = document.querySelectorAll(‘.faq-item’);

faqItems.forEach(function(item, index) {
var question = item.querySelector(‘.faq-question’);
var answer = item.querySelector(‘.faq-answer’);

if (index === 0) {
question.setAttribute(‘aria-expanded’, ‘true’);
answer.style.display = ‘block’;
}

question.addEventListener(‘click’, function() {
var expanded = question.getAttribute(‘aria-expanded’) === ‘true’;

faqItems.forEach(function(otherItem) {
var otherQuestion = otherItem.querySelector(‘.faq-question’);
var otherAnswer = otherItem.querySelector(‘.faq-answer’);
otherQuestion.setAttribute(‘aria-expanded’, ‘false’);
otherAnswer.style.display = ‘none’;
});

if (!expanded) {
question.setAttribute(‘aria-expanded’, ‘true’);
answer.style.display = ‘block’;
}
});
});
});

</script>

Add CSS for StylingCreate the `faq-accordion.css` file in your theme’s `css` directory with the following content:

<style>

.faq-container {

border-top: 1px solid #ddd;

}

.faq-item {

border-bottom: 1px solid #ddd;

}

.faq-question {

width: 100%;

text-align: left;

background: none;

border: none;

padding: 10px 15px;

cursor: pointer;

font-size: 16px !important;

font-weight: bold;

position: relative;

padding: 18px 0px 18px 0px;

color: #303133 !important;

font-weight: 600 !important;

font-family: ‘Inter’;

letter-spacing: -0.02em;

text-transform: initial;

background : transparent !important;

outline : none !important;

}

.faq-answer a {

font-size: 16px;

margin-bottom: 0;

font-weight: 600;

color: #303133;

margin-top: -10px;

display: block;

}

.faq-answer {

display: none;

padding: 30px 0 30px 0;

border-top-width: 1px;

border-top-style: solid;

border-color: #eaeaea;

}

.faq-question[aria-expanded=”true”] + .faq-answer {

display: block;

}

</style>

Step 5: Add FAQs in Post Content

Go to your WordPress admin dashboard.
Navigate to Posts > Add New (or edit an existing post).
Title the post as desired.
n the content area of the post, add your FAQs in the format Question|Answer separated by new lines. For example:
Publish the post.

Now, when you view a single post, the FAQ accordion should be displayed with the questions and answers provided in the content area of the post. The JavaScript and CSS files will provide the necessary functionality and styling.

Post Views: 69