WordPress.org

Support

Support » How-To and Troubleshooting » display content and title of child pages – HORIZONTALLY

display content and title of child pages – HORIZONTALLY

  • I’m looking to display the content and title of child pages – horizontally (not vertically/the default) on the homepage.

    Can this be done via php, css? I’m having trouble figure this out!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Float them left and give them widths.
    E.g to get these elements side-by-side;

    <div class="item">
     ...
    </div>
    <div class="item">
     ...
    </div>

    Add this CSS;

    .item {
     float: left;
     width: 49%;
    }

    when the content is displaying it just puts in a smaller column. I’d like the content to be put into three separate columns.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Can’t see what you mean.

    I’m looking for something like this, but to display the title and excerpt of as many pages as I want.

    <ul>
    
    									 <li>
    											<?php
    
    // The Query
    $the_query = new WP_Query( $args );
    
    // The Loop
    while ( $the_query->have_posts() ) :
    	$the_query->the_post();
    	echo '<li><h3>' . get_the_title() . '</h3></li>';
    endwhile;
    
    /* Restore original Post Data
     * NB: Because we are using new WP_Query we aren't stomping on the
     * original $wp_query and it does not need to be reset.
    */
    wp_reset_postdata(); ?>
    											This is specialized training in criminal procedure, trial procedure, and investigation for Judges from Hangzhou Province China.<br>
    											<a href="#" class="button">Read More</a>
                                                <div class="ext_box program">
    												  <figure></figure>
    												  <div>
    														  <ul class="list1">
    																 <li><a href="#">Networking </a></li>
    																 <li><a href="#">Criminal Justice </a></li>
    														  </ul>
    												  </div>
    											</div>	
    
    									 </li>
    									 <li><?php
    /* The 2nd Query (without global var) */
    $query2 = new WP_Query( $args2 );
    
    // The 2nd Loop
    while( $query2->have_posts() ):
    	$query2->next_post();
    	echo '<li>' . get_the_title( $query2->post->ID ) . '</li>';
    endwhile;
    
    // Restore original Post Data
    wp_reset_postdata();
    
    ?>											Footwear imprints have historically been found at all types of crime scenes from homicides, sexual assaults, to burglaries.<br>
    											<a href="#" class="button">Read More</a>
    											 <div class="ext_box program">
    												  <figure><img src="<?php bloginfo('template_directory'); ?>/images/1page_img2.jpg" class="img" alt="" /></figure>
    												  <div>
    														  <ul class="list1">
    																 <li><a href="#">Link 1 </a></li>
    																 <li><a href="#">Link 2 </a></li>
    																 <li><a href="#">Link 3 </a></li>
    														  </ul>
    												  </div>
    											</div>
    									 </li>
    									 <li>
    <?php
    /* The 3rd Query (without global var) */
    $query3 = new WP_Query( $args3 );
    
    // The 3rd Loop
    while( $query3->have_posts() ):
    	$query3->next_post();
    	echo '<li>' . get_the_title( $query3->post->ID ) . '</li>';
    endwhile;
    
    // Restore original Post Data
    wp_reset_postdata();
    
    ?>																		Crime scene investigation and reconstruction is important to any law enforcement agency. This basic crime scene course is being taught by the Henry C. Lee Institute of Forensic Science.<br>
    											<a href="#" class="button">Read More</a>
    											<div class="ext_box program">
    												  <figure><img src="<?php bloginfo('template_directory'); ?>/images/1page_img3.jpg" class="img" alt="" /></figure>
    												  <div>
    														  <ul class="list1">
    																 <li><a href="#">Link 1 </a></li>
    																 <li><a href="#">Link 2 </a></li>
    																 <li><a href="#">Link 3 </a></li>
    														  </ul>
    												  </div>
    											</div>
    									 </li>
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘display content and title of child pages – HORIZONTALLY’ is closed to new replies.
Skip to toolbar