WordPress Loop, single.php, page.php

MMP 460 > Week 5

WordPress Loop

The WordPress loop is the fundamental way content is loaded into our webpages. It iterates through available content and makes it available to the template code. This makes it easy to customize the content we create in the WordPress CMS to fit our theme and design.

WordPress Codex: Loop

Let's take a look at the WordPress loop in our theme. We'll look at page.php first, which is the template used to build the main pages of the site.

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

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

			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		endwhile; // End of the loop.
		?>

	</main><!-- #main -->
</div><!-- #primary -->

while ( have_posts() ) : the_post();
endwhile; // End of the loop.

These two lines are the main part of the loop. Basically what this does is say: "While there are posts to load, go through each post, make a new section of the web page, and add the content for that post. We don't have to change anything her. What we need to look at is the way the content is being loaded.

get_template_part( 'template-parts/content', 'page' );

This line loaded a specific template part, which is used in multiple templates, to populate the content of the site. Let's take a look at the template in template-parts/content.php:

<?php
/**
 * Template part for displaying posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package portfolio
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php
		if ( is_single() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
		endif;

		if ( 'post' === get_post_type() ) : ?>
		<div class="entry-meta">
			<?php portfolio_posted_on(); ?>
		</div><!-- .entry-meta -->
		<?php
		endif; ?>
	</header><!-- .entry-header -->

<div class="entry-content">
		<?php
			the_content( sprintf(
				/* translators: %s: Name of current post. */
				wp_kses( __( 'Continue reading %s <span class="meta-nav">→</span>', 'portfolio' ), array( 'span' => array( 'class' => array() ) ) ),
				the_title( '<span class="screen-reader-text">"', '"</span>', false )
			) );

			wp_link_pages( array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'portfolio' ),
				'after'  => '</div>',
			) );
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php portfolio_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

The template uses a few WordPress functions to add content:

if ( is_single() ) :
	the_title( '<h1 class="entry-title">', '</h1>' );
else :
	the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
endif;

This adds the page title in an <h1> or an <h2> depending on if it is a single post or note.

the_content();

This loads the main post content.

There are other functions that load in different parts of the post information:

// loads the data
<?php portfolio_posted_on(); ?>
// loads footer with comments and categories
<?php portfolio_entry_footer(); ?>

Some of these functions are references in the inc/template-tags.php file, where we can see how everything is being generated. We don't need to change these functions, we can just use the line in the template to add or remove them.

single.php is used to layout single post pages. This takes the main content of the post in full and display it as a single page. It also adds extra features like comments and other links. Some of these features we may not need. We can also add new parts to the template.