WordPress Templates

WordPress Film Festival Site: template-parts (single)

For the SINGLE view, I am going to make another template-part by copying content-home and renaming it content-single.

A QUICK CAVEAT: another option, of course, is to just use conditions within the original template-part. If we did cover conditions in class, feel free to use them. They represent a better way to do this, in fact, because it means there will no repetition of code.

Anyway, for the SINGLE view, I want to have the following features in each article.

  • No Feature Image, since the Video will appear
  • The full text of the post
  • The title
  • Some film-related meta data

The meta-data is attached to each post with the ADVANCED CUSTOM FIELDS plugin, which is one of the most used plugins in the WordPress world. If you look at one of the posts in the dashboard editing window, you will see the additional fields (for Country, Director, and Year).

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
			the_title( '<h1 class="entry-title">', '</h1>' );
	</header><!-- .entry-header -->

	<div class="entry-content">
               the_content( sprintf(
				/* translators: %s: Name of current post. */
				wp_kses( __( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'untouched' ), 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:', 'iff' ),
				'after'  => '</div>',
			) );
	</div><!-- .entry-content -->
        <div class="entry-meta-data">
                    <li><b>Country: </b><?php esc_html(the_field('country')); ?></li>
                    <li><b>Director: </b><?php esc_html(the_field('director')); ?></li>
                    <li><b>Year: </b><?php esc_html(the_field('year')); ?></li>                   
</article><!-- #post-## -->

To learn how to output data from Advanced Custom Fields, consult the developer’s Documentation.

You have likely noticed in the metadata section that I have wrapped the ACF calls ( the_field() ) inside the WordPress esc_html() function. This function, and others that are similar, is used throughout underscores. This is called SANITIZING.

The reason for using it is that if either malicious code ( small example: <script>alert(‘this site sucks!’)</script> ) or badly formed HTML is entered into a field, it can have embarrassing (or worse) consequences.

A couple tests make me suspect that ACF sanitizes user input anyway, but it is never a bad idea to sanitize on output as well as input.

Anyway, with some styling, the page looks like this (click image for larger, detailed, view):

Please style it to look like that.

I didn’t style the comment form to take less than the full width of the page. Please style it so that it is the same width as the article.

NEXT: remaining tasks