Uncategorized

WordPress Film Festival Site: template-parts (home)

So we have constructed a front-page template that outputs our content in two defined loops rather than one “reverse-chronological” default loop.

But when we test, we see that too much content is being output. If we look at the screenshot on the page about the front-page template, we will see that we need the following in each article on the home page:

  • Category
  • Feature Image
  • Post Title

To do this we will now edit the content-home.php file we created earlier in the template-parts folder.

When we open it, we are confronted by the following code:

<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 iff_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">&rarr;</span>', 'iff' ), 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 -->

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

That might seem like a lot of code. However, there are a bunch of conditions that are not relevant to our situation here: this template_part was intended to be used in a number of contexts, but our site does not need that level of complexity. In other words, we are making a much simpler article, so we can remove a big chunk of this.

<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;
             
		?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php

                    the_post_thumbnail();
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
               <?php the_category(' &bull; '); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

So what is happening here?

We are outputting an ARTICLE with the following content, in order:

  • The Title
  • The Feature Image
  • The Categories (separated with a bullet)

Even though the order is different from that in the screenshot, it makes sense to do it this way: having the header ahead of the category makes sense from the perspective of SEO and accessibility.

Test the page. You will see that the link is clickable, taking the user to the SINGLE view of the article. As well, the categories are clickable, taking the user to an archive view.

You have, however, most likely noticed that the feature images are not clickable.

We could take the element from the ELSE condition in the entry-header, wrapping it around the permalink. That is a common technique:

   <a href="<?php esc_url( the_permalink() ); ?>">
		<?php the_post_thumbnail();?>
  </a>

However, another way is revealed in the WordPress Codex page about feature images.

The disadvantage of the code above is that we would need to do it on any template-part that had the feature image. The code below, when added to FUNCTIONS.PHP, will make all post thumbnails regardless of template file link to the SINGLE full view of a post (the permalink, in other words):

/**
 * Link all post thumbnails to the post permalink. 
 *
 * @param string $html          Post thumbnail HTML.
 * @param int    $post_id       Post ID.
 * @param int    $post_image_id Post image ID.
 * @return string Filtered post image HTML.
 */
function iff_post_image_html( $html, $post_id, $post_image_id ) {
    $html = '<a href="' . get_permalink( $post_id ) . '" alt="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
    return $html;
}
add_filter( 'post_thumbnail_html', 'iff_post_image_html', 10, 3 );

I changed the function name (in two places) to keep the standard best-practice naming conventions described earlier.

NEXT: do_shortcode();

Standard