Extending Longview for a Custom Post Type

The Longview theme supports the Portfolio Post Type plugin by Devin Price. This tutorial explains how this support was added to the theme.

Please note: Unless otherwise specified, the functions in this tutorial are in the includes/portfolio.php file.

Changing Page Layout

First of all, when we’re displaying an archive of portfolio pieces, we want to use the full width of the page. The thmfdn_layout_class filter lets us change the layout class, which controls the page layout and sidebar arrangement.

function thmfdn_portfolio_archive_layout( $layout ) {
	if ( is_post_type_archive( 'portfolio' ) ) {
		$layout = 'content-full-width';
	}

	return $layout;
}
add_filter( 'thmfdn_layout_class', 'thmfdn_portfolio_archive_layout' );

If we’re on a portfolio archive page, we change the layout class to “content-full-width” which is a layout already built into the theme for displaying full width content with no sidebars.

Changing Content Format

Content format refers to the format given to the content inside the primary content column. Since we just set the page layout to fill the page with no sidebars, the primary content column will be the only column.

Content formats are typically tied to template parts in the Longview theme. Since we don’t want to use the default template part to display the content, we’ll filter thmfdn_content_format_class. This class is used to determine which template part should be loaded.

function thmfdn_portfolio_archive_content_format( $format ) {

	if ( is_post_type_archive( 'portfolio' ) ) {
		$format = 'portfolio';
	}

	if ( is_singular( 'portfolio' ) ) {
		$format = 'page';
	}

	return $format;
}
add_filter( 'thmfdn_content_format', 'thmfdn_portfolio_archive_content_format', 100 );

Just like before, we check to see if we’re on an archive page for the Portfolio post type. If we are, we change the content format class to ‘portfolio’ which will automatically cause the theme to display the content using the template-parts/content-portfolio.php file. Then we check if we’re on a single portfolio page. If we are, we change the content format class to an empty string. This will cause the the template-parts/content.php file to be used. If we don’t do this, the theme will automatically use the template-parts/content-single.php file because this is a single portfolio post, not an archive page. If the content-single.php file is used, it will add things like post navigation and comment functionality to the page.

Displaying the Portfolio Content

Here is the simplified code of the content-portfolio.php file:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="<?php echo apply_filters( 'thmfdn_entry_content_class', 'entry-content' ); ?>">
		<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail( apply_filters( 'thmfdn_thumbnail_size', 'portfolio' ) ); ?>
		</a>
	</div><!--.entry-content-->
</div><!-- #post-number -->

The actual content-portfolio.php file includes a number of action hooks as well, but we’re not going to deal with them in this tutorial. The code above is all we really need to display the portfolio archive content. This code adds the standard div tags around the content, and then displays the featured image inside those divs. The image is wrapped in an anchor tag so that clicking on the image will take the user to the single portfolio page.

Please note: The function the_post_thumbnail() in the code above specifies a particular image size (in this case, “portfolio”). If you need an image size that’s not already supported by the theme, you can add new image sizes in the includes/settings.php file.

Removing the Page Title

The following function removes the page title from the top of the Portfolio archive page.

function thmfdn_portfolio_archive_remove_title() {
	if ( is_post_type_archive( 'portfolio' ) ) {
		remove_action( 'thmfdn_content_top', 'thmfdn_archive_title', 200 );
	}
}
add_action( 'thmfdn_template_setup', 'thmfdn_portfolio_archive_remove_title' );

Please note: the last parameter of the remove_action() call should match the priority at which the original function was added to the action hook.

And with those small changes, the theme now supports the Portfolio Post Type plugin and the “portfolio” custom post type it introduces.