Use The Loop to create a custom htmlstructure

Question

Im using a plugin to create slides, and typically you have a structure where a parentpage with vertical slides is defined by a class, and then a child inside that container is defined by another class to create horizontal slides inside the parentage. This is how the structure is needed for this work:

<div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div>

however, I'm implanting this to wordpress and have a loop that creates vertical slides from pages automatically, but this makes horizontal pages trickier.

So i wonder if i can make a loop that creates the needed htmlstructure, and maybe a subquery? to put a class on child pages and place them in the parent container?

`if (($locations = get_nav_menu_locations()) && $locations['main-nav'] ) { $menu = wp_get_nav_menu_object( $locations['main-nav'] ); $menu_items = wp_get_nav_menu_items($menu->term_id); $pageID = array(); foreach($menu_items as $item) { if($item->object == 'page') $pageID[] = $item->object_id;

    }

query_posts( array( 'post_type' => 'page','post__in' => $pageID, 'posts_per_page' => count($pageID), 'orderby' => 'post__in' ) );

} while(have_posts() ) : the_post();

?>

post_name;?>" class="section"> --> post_name;?>" class="section" data-anchor="post_name;?>">`

Nishant Solanki Nishant Solanki · Accepted Answer · 2014-02-19T19:21:33

try this code

$a = 5; //number of slides you wanted
$b = 3; //number of parent div
$string = '';
for($i=0;$i<$b;$i++)
{
  $string .= '<div class="section">';
  for($j=0;$j<$a;$j++)
  {
   $string .= ' <div class="slide"> Slide '.$j.' </div>';
  }
 $string .= "</div>"
}

you should try this.. while loop inside while loop.. I am not sure this will work or not... But give it a try

<?php get_header(); ?>

<!-- Post all pages content -->
 <?php    if (($locations = get_nav_menu_locations()) && $locations['main-nav'] ) {
    $menu = wp_get_nav_menu_object( $locations['main-nav'] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    $pageID = array();
    foreach($menu_items as $item) {
        if($item->object == 'page')
            $pageID[] = $item->object_id;
    }
query_posts( array( 'post_type' => 'page','post__in' => $pageID, 'posts_per_page' => count($pageID), 'orderby' => 'post__in' ) );
}
while(have_posts() ) : the_post();      
?>


<!--     <div id="<?php echo $post->post_name;?>" class="section"> -->
<div id="content2">
 <?php while(have_posts() ) : the_post(); ?>

    <div id="pageSlide-<?php echo $post->post_name;?>" class="section" data-anchor="<?php echo $post->post_name;?>">

        <div id="inner-content" class="wrap clearfix">

            <div id="main" class="twelvecol first clearfix" role="main">

                <article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">

                            <header class="article-header">

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

                            </header>

                            <section class="entry-content clearfix" itemprop="articleBody">
                                <?php the_content(); ?>
                            </section>

                            <footer class="article-footer">
                                <p class="clearfix"><?php the_tags( '<span class="tags">' . __( 'Tags:', 'bonestheme' ) . '</span> ', ', ', '' ); ?></p>

                            </footer>

                </article>

            </div>

        </div>
    </div>

</div> <!-- end of page div-->

`

Use The Loop to create a custom htmlstructure

1 Answers