Wordpress Code Check Need Please :) Custom Query for Bootstrap Panels

Question

Hi everyone :)

I have been tinkering on with this a while now so I would really appreciate some extra eyes to see if improvements can be made in any areas.

I had to use to loops to get the content generated in the right areas and I'm not sure if that's a crazy could be buggy thing to do!

The code works fine and looks good but I just have this feeling I could be a little more solid somehow but I may be over thinking it due to the time I've spent on it and the research it took to get here. Also I am still very new to wordpress....

<?php
/*
    Template Name: Tabs Sub Page Template
*/
?>

<?php get_header(); ?>


    <!-- Container for Content from What We Do Page -->
    <div class="container">

        <div class="row">

            <div class="col-md-12">

                <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                    <div class="page-header">
                        <h1><?php the_title(); ?></h1>
                    </div>

                    <?php the_content(); ?>

                <?php endwhile; else: ?>

                    <div class="page-header">
                        <h1>Oh no!</h1>
                    </div>

                    <p>No content seems to be registed to this page please check your Pages and Template Settings!</p>

                <?php endif; ?>

            </div>

        </div>

    </div>
    <!-- //Content from What We Do Page -->

    <!-- Container for Content from Sub Pages -->
    <div class="container">

        <div class="row">

            <div class="col-md-12">

                <!-- Open Tab Panel for Sub Page Content -->
                <div role="tabpanel">

                    <!-- Open UL for Tab Panel Headings List Of Page Titles -->
                    <ul class="nav nav-tabs" role="tablist">

                        <!-- Open Custom Query for Sub Page Details -->
                        <?php
                            $args=array(
                            'post_type' => 'page',
                            'post_parent' => '14' 
                        );

                            $page_query = new WP_Query($args);

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

                        <!-- Open Custom Loop For Query Objects as Ul LI A Elements -->
                        <?php if ( have_posts() ) : while ( $page_query->have_posts() ) : $page_query->the_post(); ?>

                        <?php 

                            //Counter Variable from Current Post to Give Each Item a Unique ID Relevant to its Post
                            $i = $page_query->current_post;

                        ?>

                        <!-- Open LI for Panel Headings -->
                        <li role="presentation" class="<?php if( $page_query->current_post == 0 ) : ?>active<?php endif; ?>">

                            <a href="#subPagePanel-<?php echo $i ?>" aria-controls="subPagePanel-<?php echo $i ?>" role="tab" data-toggle="tab">
                                <?php the_title(); ?>
                            </a>

                        </li>
                        <!-- //Close LI for Panel Headings -->

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

                    </ul>
                    <!-- //Close UL for Tab Panel Headings -->

                    <!-- Open Div Wrap Panel Content -->
                    <div class="tab-content">

                        <!-- Open Cutom Loop for Panel Contnet -->
                        <?php if ( have_posts() ) : while ( $page_query->have_posts() ) : $page_query->the_post(); ?>

                        <?php 

                            //Counter Variable from Current Post to Give Each Item a Unique ID Relevant to its Post
                            $i = $page_query->current_post;

                        ?>

                        <!-- Open Div to Loop Panel Content -->
                        <div role="tabpanel" class="tab-pane <?php if( $page_query->current_post == 0 ) : ?>active<?php endif; ?>" id="subPagePanel-<?php echo $i ?>">

                            <?php the_content(); ?>

                        </div>
                        <!-- //Close Div to Loop Panel Content -->

                        <?php endwhile; endif; ?>

                    </div>
                    <!-- //Close Div Wrap Panel Content -->

                </div>
                <!-- //Close Tab Panel for Sub Page Content -->

            </div>

        </div>

    </div>
    <!-- //Container for Content from Sub Pages -->


<?php get_footer(); ?>

This code is aimed at sub page data from a 'what we do' page and then echos out the sub pages into bootstraps tab panels.

Also below is the jQuery I used but again just some strong feelings although it works I would have to over code the js in case I were to ad a page in the future .. (not great practice really)

    $('#subPagePanel-1 a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    });
    $('#subPagePanel-2 a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    });
    $('#subPagePanel-3 a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    });

As mentioned this code does work but before putting into practice it would be nice to here other peoples opinions :)

Thanks Craig

Answer 1 · 2015-04-29T05:02:52Z

April 29, 2015 5:02am

I am pretty sure you need to use wp_reset_postdata.
Having Page Template in your template name is excessive.
$args=array would look better like $args = array.

Welcome to the Treehouse Community

Looking to learn something new?

Craig Watson

Craig Watson

Wordpress Code Check Need Please :) Custom Query for Bootstrap Panels

1 Answer

Sue Dough

Sue Dough