WordPress.org

Ready to get started?Download WordPress

Forums

Page children with feautured image and text. (2 posts)

  1. FummeL
    Member
    Posted 10 months ago #

    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>
  2. FummeL
    Member
    Posted 10 months ago #

    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(); ?>

Reply

You must log in to post.

About this Topic