We'll start by placing the following loop code into the widest column under the This Month header, overwriting the sample content. This code is the Loop at its most basic. As we'll see, it will need some tweaking later on to be in line with our theme design.
<article class="post"> <h2><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2> <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p> <div class="entry-content"><!--//post--> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p> <blockquote class="left margin-right third bg-dark2 img-quote-dark bdr rnd rnd-right shdw-centered">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blockquote> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p> </div><!--//.entry-content--> <p class="left"><a class="more" href="#">Read more »</a></p> <p class="right"><a class="comments-count" href="#">150</a></p> <div class="push"></div> </article>
In our mockup, this code appears more than once; so, we start by deleting all but the first example of it.
<article>
tag, add the code to start the Loop:<?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?>
Next, add the code to display the title of the post in place of our old static heading:
<h2 class=""><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></h2>
<div class="entry-content">
, and replaces any static text (paragraphs and blockquotes) we had in there before:<?php the_content();?>
Read more
link, replace the existing code with:<p class="left"><a class="more" href="<?php the_permalink() ?>">Read more »</a></p>
</article>
tag, add the following:<?php endwhile; ?> <?php else : ?> <h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking for something that isn't here.</p> <?php get_search_form(); ?> <?php endif; ?>
index.php
file, open your site in your browser and refresh the screen.You've just completed a major step towards developing your WordPress theme, namely allowing WordPress to display posts on a page. Well done! Let's work through the code:
<?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> <article class="post"> <h2>a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></h2> <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p> <div class="entry-content"><!--//post--> <?php the_content();?> </div><!--//.entry-content--> <p class="left"><a class="more" href="<?php the_permalink() ?>">Read more »</a></p> <p class="right"><a class="comments-count" href="#">150</a></p> <div class="push"></div> </article> <?php endwhile; ?> <?php else : ?> <h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking for something that isn't here.</p> <?php get_search_form(); ?> <?php endif; ?>
<h2>
tag displays the post title using <?php the_title();?>
and creates a link using the tag <?php the_permalink() ?>
. This means that when users click on the title, they'll be taken to a page displaying that post on its own—the permalink
is the url for that post.entry-content
div, we used <?php the_content;?>
to display the content of the post. Read more
link uses <?php the_permalink() ?>
to link to the full post.<?php endwhile; ?>
.get_search_form
.<?php endif; ?>
.