Page children with feautured image and text.

  • Hi,

    I want to lists the current page’s children with depth 1.
    I made this possible by unsing:

    <?php global $post; wp_list_pages( array('child_of' => $post->ID, 'depth' => 1) ); ?>

    But the problem is that i don’t just want to list the sites, i also want to display a featured image and the excerp of the page.

    What wordpress function should i use ?

    This is the html structure i want to repeat for each children:

    <div class="wrapper p4">
	<div class="grid_4 alpha">
		<div class="wrapper p2">
			<figure class="border fleft">
				<img src="url-to-featured-image" alt="" />
			</figure>
		</div>
		<h6 class="prev-indent-bot">
			<a class="link" href="url-to-post">Title</a>
		</h6>
		<p class="indent-bot">Excerp of page</p>
		<a class="button" href="url-to-post">Read more</a>
	</div>
</div>
Viewing 1 replies (of 1 total)
  • Thread Starter FummeL

    (@fummel)

    Well it was more work than i thougt, this is what i ended up with:

    The code works but i still have 1 more styling problem, i want this html:

    first 3st divs of type: grid_4 should be nested with:
    <div class="wrapper p4">

    next 3st divs of type: grid_4:
    <div class="wrapper">

    <?php
    $args = array(
	    'post_parent' => $post->ID,
	    'post_type'   => 'page',
	    'post_status' => 'publish',
	    'numberposts' => -1,
        'depth' => 1
    );

    $postslist = get_posts($args);
?>

<?php get_header(); ?>

<section id="content">
			<div class="main">
				<div class="container_12">
					<div class="wrapper">
						<article class="grid_12">
							<h3 class="p2">Behandlingar</h3>
                            <div class="wrapper p4">
                            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                            <?php
                            $i = 0;
                            foreach ( $postslist as $post ) :
                            $i++;
                            ?>

		                    <?php setup_postdata( $post ); ?>
								    <div class="grid_4<?php
                                                           if ($i == 1) { echo ' alpha'; }
                                                           elseif ($i == 3) { echo ' omega'; }
                                                           else { echo ''; } ?>">
                                    <?php
                                      if ($i == 2) {
                                          echo '<div class="indent-left3">';
                                      }
                                      elseif ($i == 3) {
                                          echo '<div class="indent-left2">';
                                      }
                                      else {
                                          echo '';
                                      }
                                    ?>
									<div class="wrapper p2">
										<figure class="border fleft">
                                            <?php
                                                if ( has_post_thumbnail() ) {
                                                    the_post_thumbnail();
                                                }
                                                else { ?>
                                                    <img src="<?php bloginfo('template_directory'); ?>/img/page3-img3.jpg" alt="<?php the_title(); ?>" />
                                            <?php } ?>
                                        </figure>
									</div>
									<h6 class="prev-indent-bot">
                                        <a class="link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                    </h6>
									<p class="indent-bot"><?php html5wp_excerpt('html5wp_index') ?></p>
					                <a class="button" style="margin-bottom: 20px;" href="<?php the_permalink(); ?>">L?s mer/Boka tid</a>
								</div>
                                    <?php
                                      if ($i == 2) {
                                          echo '</div>';
                                      }
                                      elseif ($i == 3) {
                                          echo '</div>';
                                      }
                                      else {
                                          echo '';
                                      }
                                    ?>

                             <?php
                                if ($i >= 3) {
                                    $i = 1;
                                }
                            ?>
					  <?php endforeach; ?>

		<?php endwhile; endif; ?>
                                </div>
						</article>
					</div>
				</div>
			</div>
		</section>
	</div>

<?php get_footer(); ?>
Viewing 1 replies (of 1 total)
  • The topic ‘Page children with feautured image and text.’ is closed to new replies.