Custom Templates in WordPress

Summary: Learning about the single.php, archive.php and search.php templates in WordPress.

single.php

The single.php template is used to display individual post pages. WordPress uses a specific order to find the correct template for displaying a single post.

  1. single-{post_type}.php
  2. single.php
  3. index.php

Template Tags for single.php

To display individual posts effectively we can use a variety of template tags that help retrieve the relevant information.

  • the_title(): Displays the post title.
  • the_content(): Outputs the post content.
  • the_permalink(): Retrieves the URL of the current post.
  • the_post_thumbnail(): Displays the featured image.
  • the_author(): Displays the post author’s name.
  • the_date(): Displays the post’s publish date.
  • get_post_meta( $post->ID, 'meta_key', true ): Retrieves a specific custom field value for the current post.
  • get_the_term_list( $post->ID, 'taxonomy', 'before', 'separator', 'after' ): Retrieves a list of taxonomy terms (e.g., genres, categories) for the current post.
<?php get_header(); ?>

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

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <div class="movie-meta">
                <span class="release-date">Release Date: <?php echo get_post_meta( get_the_ID(), 'rt-movie-release-date', true ); ?></span>
                <span class="rating">Rating: <?php echo get_post_meta( get_the_ID(), 'rt-movie-rating', true ); ?></span>
            </div>
        </header>

        <div class="entry-content">
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="movie-poster">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            <?php endif; ?>

            <div class="movie-description">
                <?php the_content(); ?>
            </div>
        </div>

        <footer class="entry-footer">
            <div class="post-navigation">
                <?php previous_post_link(); ?>
                <?php next_post_link(); ?>
            </div>
        </footer>
    </article>

<?php endwhile; endif; ?>

<?php get_footer(); ?>
  • Custom Fields: The metadata like “Release Date,” “Rating,” and “Director” are pulled using get_post_meta().
  • Featured Image: the_post_thumbnail() is used to display the movie poster.
  • Navigation: previous_post_link() and next_post_link() provide links to navigate between individual movies.

archive.php

The archive.php template is used to display a list of posts grouped by a particular category, tag, author, date, or custom taxonomy. WordPress uses a template hierarchy to determine which template file to use.

  1. archive-{post_type}.php
  2. archive.php
  3. index.php

Custom Post Types and Archive Templates

When we register a CPT with the has_archive parameter set to true, WordPress will generate an archive page for it.

  • We can create a template file specifically for our CPT archive by naming it archive-{post_type}.php, replacing {post_type} with the slug of our CPT.
  • If archive-{post_type}.php doesn’t exist, WordPress falls back to archive.php.

Template Tags for archive.php

Template tags are PHP functions that we can use within our template files to display dynamic content.

  • have_posts(): Checks if there are posts to display.
  • the_post(): Iterates to the next post.
  • while ( have_posts() ) : the_post(): The loop structure.
  • the_title(): Displays the post title.
  • the_permalink(): Retrieves the URL to the post.
  • the_content(): Displays the post content.
  • the_excerpt(): Displays the post excerpt.
  • the_post_thumbnail(): Displays the featured image.
  • get_post_meta( $post->ID, 'meta_key', true ): Retrieves custom field data.
<?php get_header(); ?>

<h1><?php post_type_archive_title(); ?></h1>

<?php if ( have_posts() ) : ?>
    <div class="post-archive">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    </div>
    <?php the_posts_pagination(); ?>
<?php else : ?>
    <p>No posts found.</p>
<?php endif; ?>

<?php get_footer(); ?>
  • post_type_archive_title(): Displays the archive title for the CPT.
  • the_posts_pagination(): Adds pagination to navigate through multiple pages of posts.

search.php

The search.php template is used to display search results. WordPress uses search.php to render the search results page. If it doesn’t exist, it falls back to index.php.

WordPress search only includes posts and pages. To include CPTs in our search results, we need to modify the search query.

We can use the pre_get_posts action hook to alter the main query before it’s executed.

function include_cpt_in_search( $query ) {
    if ( $query->is_search && !is_admin() && $query->is_main_query() ) {
        $query->set( 'post_type', array( 'post', 'page', 'rt-movie' ) );
    }
}
add_action( 'pre_get_posts', 'include_cpt_in_search' );

Template Tags for search.php

  • get_search_query(): Retrieves the search query.
  • get_post_type(): Retrieves the post type of the current post.
<?php get_header(); ?>

<h1>Search Results for: <?php echo get_search_query(); ?></h1>

<?php if ( have_posts() ) : ?>
    <div class="search-results">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" class="<?php echo get_post_type(); ?>">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>Type: <?php echo get_post_type(); ?></p>
                <div class="entry">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    </div>
    <?php the_posts_pagination(); ?>
<?php else : ?>
    <p>No results found for "<?php echo get_search_query(); ?>".</p>
<?php endif; ?>

<?php get_footer(); ?>
  • get_search_query(): Displays the user’s search term.
  • get_post_type(): Useful to display the type of content returned in the search results.

«
»

Leave a Reply

Your email address will not be published. Required fields are marked *