Time for action – creating a basic Loop

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.

  1. Find the code for the first sample article in the mockup:
    <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 &raquo;</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.

  2. Now, working with the code you've left in and above the opening <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>
  3. Add the code which will display the content for the article. This goes inside <div class="entry-content">, and replaces any static text (paragraphs and blockquotes) we had in there before:
    <?php the_content();?>
  4. Under the content, where we have a Read more link, replace the existing code with:
    <p class="left"><a class="more" href="<?php the_permalink() ?>">Read more &raquo;</a></p>
  5. The Loop won't work unless you close it, so below your closing </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; ?>
  6. Now save your index.php file, open your site in your browser and refresh the screen.

What just happened?

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 &raquo;</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; ?>
  • The first two lines open the Loop by checking if there are posts to display, and then if that is the case, start to work with the first post.
  • The code we added to the <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.
  • Inside our entry-content div, we used <?php the_content;?> to display the content of the post.
  • Our Read more link uses <?php the_permalink() ?> to link to the full post.
  • We stopped displaying posts with the code <?php endwhile; ?>.
  • Before ending the Loop completely, we added some text to display if no posts were found, along with a search form, called using the tag get_search_form.
  • Finally, we closed the Loop with <?php endif; ?>.

Tip

You must include the code to close the Loop, or it won't display anything. The Loop has to have the following lines in the appropriate places to work:

<?php if (have_posts()) :?>

<?php while (have_posts()) : the_post();?>

<?php endwhile; ?>

<?php endif; ?>

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.40.53