Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

ben pines
ben pines
8,389 Points
Posted by ben pines
ben pines
8,389 Points

How can I use bootstrap collapse to create an FAQ page in my wordpress?

I put the bootstrap collapse code into the FAQ template - but I hard coded it. How can I manage the q&a from the wordpress editor? Should I Use custom fields or custom post types?

here's the page: http://benpines.todaydiet.co.il/%D7%A9%D7%90%D7%9C%D7%95%D7%AA-%D7%95%D7%AA%D7%A9%D7%95%D7%91%D7%95%D7%AA/

Craig Watson
Craig Watson
27,930 Points

Hi Ben,

Do you mean like the "Things to Know" Section on this page ? HERE

Craig

3 Answers

Craig Watson
Craig Watson
27,930 Points

Hi Ben,

Followed your link and it looks like that is what you mean so here is my code from how it did it :)

                    <div class="drop-group-title">

                          <h2 class="home-page-content-heading">Things To Know!</h2>

                    </div>

                    <!-- Declare Custom Post Type for Custom Query -->
                    <?php 

                        $args = array(

                            'post_type' => 'info-dropdown'

                        );

                        $infoDropdown = new WP_Query( $args );

                    ?>
                    <!-- //Close Custom Query Declaraiton -->

                    <!-- Open Panel Group For Custom Query Info -->
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                        <!-- Open Panel For Looped Content to be Displayed Inside -->
                        <div class="panel panel-default">

                            <!-- Custom Query Loop For Info-Dropdown -->
                            <?php if ( have_posts() ) : while ( $infoDropdown->have_posts() ) : $infoDropdown->the_post(); ?>

                                <!-- Get Items From Custom Post Type Info-Dropdown -->
                                <?php 

                                    //Get Custom Post Type By Slug and Declare as Variable
                                    $title = get_field('title');

                                    //Get Custom Post Type By Slug and Declare as Variable
                                    $info = get_field('description');

                                    //List ID Modifiers For href attr Drop Down Links 
                                    $dropdownContols = array( 'One', 'Two', 'Three', 'Four', 'Five' );
                                    $i = $infoDropdown->current_post;

                                ?>

                            <!-- Open Panel Heading -->
                            <div class="panel-heading red-bg" role="tab" id="headingOne">

                                <h4 class="panel-title">

                                    <a  class="panel-toggle-control"
                                        data-toggle="collapse"
                                        data-parent="#accordion"

                                        href="#collapse<?php echo $dropdownContols[$i]; ?>"

                                        aria-expanded="true"
                                        aria-controls="collapse<?php echo $dropdownContols[$i]; ?>">

                                        <!-- -->  
                                        <?php the_title(); ?>


                                    <i class="fa fa-lg fa-toggle-off"></i>

                                    </a>

                                </h4>



                            </div>
                            <!-- //Close Panel Heading -->

                            <div id="collapse<?php echo $dropdownContols[$i]; ?>"
                                 class="panel-collapse collapse <?php if( $infoDropdown->current_post == 0 ) : ?>in<?php endif; ?>"
                                 role="tabpanel"
                                 aria-labelledby="headingOne">

                                <div class="panel-body">

                                    <?php echo $info ?>

                                </div>

                            </div>        

                            <?php endwhile; endif; ?>
                            <!-- //Close Custom Query Loop -->

                        </div>
                        <!-- //Close Panel for Looped Content -->

                    </div>
                    <!-- Close Panel Group -->

There was a little css which is here :)

/* Panel Styles
==========================================================================*/
.panel-heading {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.panel-heading:not(:last-child) {
    border: 1px solid #fff;
}
.panel-title a:hover,
.panel-title a:focus {
    text-decoration: none;
}
.panel-body {
    box-shadow: inset 0 0 12px #000;
    border: 1px solid #fff;
}

And a splash of Js to :

jQuery(document).ready(function ( $ ) {
    $('a[href*="#collapseOne"]').children().addClass( 'fa-toggle-on' );
    $('a[href*="#collapse"]').click(function (e) {
        $('a[href*="#collapse"]').children().removeClass( 'fa-toggle-on' );
        $(this).children().addClass( 'fa-toggle-on');
    });

This took me days to figure out but it works for me now, and I use custom post types and field as you mentioned to make the content :)

Hope this at least helps get you going :)

Craig

khubbaib Naeem
khubbaib Naeem
337 Points

You should use get_posts function for custom posts and pass the post_status parameter to make sure only publish posts show on faq..

ben pines
ben pines
8,389 Points
ben pines
ben pines
8,389 Points

I am now trying to solve this without the use of custom posts. I feel it is wrong to use custom posts as it is only one page of faq. I think it is much better to use custom fields name question1, answer1, question2,answer2 etc...

Craig Watson
Craig Watson
27,930 Points

You could even just use category's really Ben, anything you can hook into will work and its more about what you feel is suiting the project better :)

I created a custom post type and used custom fields just because I wanted the name of the specific posts on the admin menu handy as i will update the regular :)

In your case you could could hook into any posts with the category of FAQ and publish the latest 3 for example in the collapse..

This is a plugin I am developing to so be sure to keep an eye out!

Craig

ben pines
ben pines
8,389 Points
ben pines
ben pines
8,389 Points

I did it! I did finally use the custom post. here is my code:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <?php $args = array( 'post_type'=>'faq' ); $the_query = new WP_Query( $args); ?> <?php if (have_posts()) : while ($the_query->have_posts() ): $the_query->the_post(); ?> <!-- --> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <? $faq_count = $the_query->current_post +1;?> <a <?php if($the_query->current_post==0):?>class="collapsed"<?php endif;?> data-toggle="collapse" data-parent="#accordion" href="#<?php echo $faq_count?>" aria-expanded=<?php if($the_query->current_post==0):?>"true"<?php else :?>"false"<?php endif;?>" aria-controls="<?php echo $faq_count?>">

                <?php 
                    $post_meta = get_post_meta($post->ID, 'q', true);
                    echo ($post_meta);

                ?></a>
              </h4>
            </div>
            <div id="<?php echo $faq_count?>" class="panel-collapse collapse <?php if($the_query->current_post==0):?>in<? endif; ?>" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <?php 
                    $post_meta = get_post_meta($post->ID, 'a', trues);
                    echo ($post_meta);
                ?>
              </div>
            </div>
          </div>

<!-- -->

        <?php $faq = $the_query->current_post +1; ?>
        <?php endwhile; endif; ?>