Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

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

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

1 Answer

Sue Dough
Sue Dough
35,800 Points
  1. I am pretty sure you need to use wp_reset_postdata.
  2. Having Page Template in your template name is excessive.
  3. $args=array would look better like $args = array.