Without plugin how to manage FAQ section in WordPress

May 31, 2023

0 Views 0

SaveSavedRemoved 0

In your website, there might be some questions that your users may ask. To answer those common queries you should add a FAQ or frequently asked questions section. For basic questions, your visitors do not need to get in touch with you. You can answer those questions in the FAQ section so your users find the solution without any hassle, right?
In this article, I will demonstrate how you can add or manage FAQ section in WordPress without the help of any WordPress plugin. If you are a developer, this article is perfect for you. For a non-technical person, I would suggest you use a free plugin available in the WordPress directory.

If you want to use a shortcode to manage FAQ, read this article.

Steps we are going to follow to create WordPress faq

We are going to follow four steps. First, we will create a custom post type called “FAQ”. Then we will add some posts there and show them in the front end using a shortcode. Afterward, we will add js and css code.
1. Create a custom post type
2. Add some entries
3. Create a shortcode to display the FAQs in the front-end
4. Adding JS and CSS

Create a custom post type WordPress faq

Go to your active theme’s function.php file. Add the below code after the last line of the file.

add_action('init', 'faq_post_type');
function faq_post_type() {
register_post_type( 'faq',
array(
'labels' => array(
'name' => __( 'FAQs' ),
'singular_name' => __( 'faq' ),
'add_new_item' => __( 'Add New FAQ' ),
'new_item' => __( 'New FAQ' ),
'edit_item' => __( 'Edit FAQ' ),
'view_item' => __( 'View FAQ' ),
'all_items' => __( 'All FAQs' ),
'search_items' => __( 'Search FAQs' ),
'parent_item_colon' => __( 'Parent FAQs:' ),
'not_found' => __( 'No FAQs found.' ),
),
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'faq', 'with_front' => false,),
'supports' => array( 'title', 'editor'),
)
);
}

You should see an admin menu called “FAQs” in your dashboard. Let’s add some questions and answers by clicking the “Add New” link.

Create shortcode and display the FAQs in the front-end WordPress faq

Next, we will create a shortcode that will help us to display FAQs in the front end.
Let’s do it and yes paste this code in the same file functions.php right after the above code you have just pasted.

add_shortcode('faq', 'faq_function');

function faq_function(){
ob_start();

$args = array(
'post_type' => 'faq',
'post_status' => 'publish',
'posts_per_page' => -1,
);
$faq_query = new WP_Query( $args );

if ( $faq_query->have_posts() ) { ?>
<div class="accordion"><?php $i = 1; ?>
<?php while ( $faq_query->have_posts() ) { $faq_query->the_post(); ?>
<div class="accordion-single acc-close">
<div class="accordion-title"><?php the_title(); ?><span class="plus">+</span></div>
<div class="accordion-content"><?php the_content(); ?></div>
</div>
<?php $i++; ?>
<?php } ?>
<?php wp_reset_postdata(); ?>

</div>
<?php }
return ob_get_clean();
} ?>

Great! We have just created a shortcode [faq]. Let’s add this in any page and see the result.

Add css and javascript code

Next create two files in the root directory of your current theme.
1. wpeng-accordion-style.css
2. wpeng-accordion-script.js

Now we will enqueue these scripts.


add_action('wp_enqueue_scripts', 'accordion_js_css');
function accordion_js_css() {

    wp_register_script('wpeng-accordion-script', get_template_directory_uri().'/wpeng-accordion-script.js', array(), false, true);

    wp_enqueue_script('wpeng-accordion-script');


    wp_register_style( 'wpeng-accordion-style', get_template_directory_uri().'/wpeng-accordion-style.css', array(), false, 'all' );

    wp_enqueue_style( 'wpeng-accordion-style' );

}

Add the css code below in the wpeng-accordion-style.css file. This code will add styles of the FAQs. You can change the style according to your design if you want.


.accordion-single{
    margin: 0px 0px 10px 0px;
}

.accordion-title span{
    float: right;
}
.acc-close .accordion-content{
   height:0px;
   transition: transform 0.4s ease;
   transform: scaleY(0);
   display:block;
}
.acc-open .accordion-content{
   padding: 20px;
   background-color: #f0f1f1;
   border: 1px solid #ddd;
   width: 100%;
   margin: 0px 0px 10px 0px;
   display:block;
   transform: scaleY(1);
   transform-origin: top;
   transition: transform 0.4s ease;
   box-sizing: border-box;
}

.acc-open .accordion-title, .accordion-title{
   margin:0px;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
   background-color: #ddd;
   border: 1px solid #ddd;
   padding: 5px 20px;

}

Finally, add this js code in the wpeng-accordion-script.js file


var accSingle = document.getElementsByClassName('accordion-single');
var accTitle = document.getElementsByClassName('accordion-title');

for (i = 0; i < accTitle.length; i++) {
   accTitle[i].addEventListener('click', toggleItem, false);
  }
function toggleItem() {
   var itemClass = this.parentNode.className;
   for (i = 0; i < accSingle.length; i++) {
   accSingle[i].className = 'accordion-single acc-close';
   }
   if (itemClass == 'accordion-single acc-close') {
      this.parentNode.className = 'accordion-single acc-open';
    }
   }