Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using Bootstrap with Wordpress and I want to implement the collapse functionality in the content for single pages of a specific custom post type.

I know I could create a shortcode, however, with hundereds of posts shortcodes are not going to be ideal. Is it possible to include collapse in the_content of the custom post type (custom-single.php). So when a user enters an .H2 with text below it .p it uses this for a collapse group.

So in the custom-single.php I wrap the_content in a custom div id

 <div id="my-accordion"><?php the_content(); ?></div>

How I can associate the H2 and p with appropriate div classes for bootstrap. Is this possible?

    <div class="accordion" id="accordion2">
        <div class="accordion-group">
          <div class="accordion-heading">
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Collapsible Group Item #1
               </a>
          </div>
          <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
              Anim pariatur cliche...
          </div>
          </div>
      </div>

       <div class="accordion-heading">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
           Collapsible Group Item #2
           </a>
       </div>
      <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">
         Anim pariatur cliche...
     </div>
   </div>
  </div>
</div>
share|improve this question

2 Answers 2

up vote 2 down vote accepted

The script

First you have to enqueue the script. We conditionally load it only for your custom post type and its archive(s).

// in your functions.php
function wpse69274_enqueue_tbs_collapse()
{
    if (
        ! is_post_type_archive()
        AND 'YOUR_POST_TYPE' !== get_post_type()
    )
        return;

    wp_enqueue_script(
         'tbs-collapse'
        ,get_stylesheet_directory_url().'path/to/your/collapse.js';
        ,array( 'jquery' )
        ,filemtime( get_stylesheet_directory().'path/to/your/collapse.js' )
        ,true
    );
}
add_action( 'wp_enqueue_scripts', 'wpse69274_enqueue_tbs_collapse' );

The MarkUp

Now we need to add the proper MarkUp. The targets get marked by using the actual the_ID() of the currently looped post.

<div class="container">
<div class="accordion" id="accordion">
    <?php
    global $wp_query;
    if ( have_posts() ) 
    {
        while( have_posts )
        {
            the_post();
            ?>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <h2><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>">
                        <?php the_title(); ?>
                    </a></h2>
                </div>
                <div id="collapse-<?php the_ID(); ?>" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        <?php
                        if ( is_singular()
                        {
                            the_content();
                        }
                        else
                        {
                            the_excerpt();
                        }
                        ?>
                    </div>
                </div>
            </div><!-- // .accordion-group -->
            <?php
        } // endwhile;
    } // endif;
    ?>
</div>
</div>
share|improve this answer

From the Codex you can wrap your post title in before and after elements. So ... I think you would cut out / change your POST TITLE'

<?php the_title('<h2 class="accordion-heading">', '</h2>'); ?>  
share|improve this answer
    
I only want to edit html that appears within the_content() of a specific custom post type and only when and .H2 and .p (or perhaps a specific p class) are being used. –  stemie Oct 15 '12 at 13:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.