Create a fancy footer and sexy front page – Part 3

Step 2: Understanding the power of the loop

From looking at our PSD we can see that our home page has three different content areas. WordPress is powered by the loop and different content areas can easily be created simply by looping more than once.

In our WordPress admin, let’s set up two new pages, called About Us and Our Work. Let’s make these children of our Home page and we can link the read more links to the About and Portfolio pages. Next, let’s also edit our home page. Let’s remove all of the content and upload the banner photo.

Once all set up, we can edit our front-page.php with the following three loops.

	
 <section id="banner">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<?php the_content();?>
	<?php endwhile; endif; ?>
 </section>

 <section class="column first">
	<?php 
		$new_query_1 = new WP_Query();
		$new_query_1->query(array('page_id' => 2));
		while ($new_query_1->have_posts()) : $new_query_1->the_post(); ?>
		<h2><?php the_title(); ?></h2>
		<?php the_content();
		endwhile;
		wp_reset_query(); ?>
 </section>
	
 <section class="column second">
	<?php 
		$new_query_2 = new WP_Query();
		$new_query_2->query(array('page_id' => 4));
		while ($new_query_2->have_posts()) : $new_query_2->the_post(); ?>
		<h2><?php the_title(); ?></h2>
		<?php the_content();
		endwhile;
	wp_reset_query(); ?>
 </section>

The code in the first section (banner) should be familiar to you. It’s the default loop and identical to the one in your page.php. Since we’ve set our Home page to display on our Front page in our settings (Settings > Readings), we can simply use the default loop to pull the content from our Home page, which in this case is our banner photo.

Next we are using the WP_Query() to pull specific page content. The two pages we’ve just created were given a page-id number. This number is used in the query to pull the desired content. Please note that your page id may be different than mine. To find out what id to use, go to the Page admin and hover over the page titles. The id numbers will appear in the browser status bar like so: