Skip to Main Content

How to understand the Post Type WordPress Template 4.7

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

WordPress 4.7 has come up with some fantastic new enhancements to the CMS template system. The templates have been broadened to encompass all post formats, allowing developers to create more nuanced themes and at the same time allowing site owners to manage content more easily.

But how does it work? In this tutorial, I will show you how to use the Post Format templates in your themes with some easy examples.

What are templates on WordPress?

Templates are basically special files that can change the look and feel of a page and / or add functionality to your WordPress site.

Prior to WordPress 4.7, templates were only available for pages, so they were nicknamed the page templates . However, WordPress 4.7 has expanded their use to include any publication format, so in this tutorial, I will talk about models to designate these.

Item attribute

Once the templates are saved in the theme, they can be selected on the article edit pages.

Preparing the ground for using models

We will work on an example.

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

To test this, we need to create a child theme first. use  Twenty Seventeen , the new default WordPress theme.

To get started, create a new folder in the theme directory. I got mine named "cPPT" (short for custom post type templates) then I added new new files: style.css et functions.php . Use the code below to configure these files:

/ * Theme Name: Custom Post Type Theme Template Example URI: http://blair-jersyer.com Description: An example theme That Utilizes custom post types templates Author: Daniel Pataki Author URI: http://blair-jersyer.com Template : twentyseventeen version: 1.0.0 * /
<?php

add_action( 'wp_enqueue_scripts', 'cptt_assets' );
function cptt_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));
}

All together! You should now see the child theme in the Appearance section of your WordPress dashboard. Once activated, you should see an unmodified vanilla that is from the parent theme.

Create a custom post format

We will begin by testing the Template system with a custom publishing format. Imagine that you are creating a website related to video games.

While you're writing video game content, you'll want to post new content that's concise but already enough to provide most of the information.

To make one visually different from another, you need to use an arbitrary category or device. Templates greatly simplify the process.

add_action ('init', 'cptt_custom_post_types'); function cptt_custom_post_types () {register_post_type ('game', array ('labels' => array ('name' => __ ('Video Games'), 'singular_name' => __ ('Video Game')), 'public' => true, 'has_archive' => true, 'supports' => array ('title', 'editor', 'thumbnail'), 'menu_icon' => 'dashicons-laptop')); }

I omitted some labels and options, but this code will be sufficient for the purpose we want to achieve.

Template creation

A template is a regular PHP file with a special comment at the top, which tells WordPress the title of the template and where it should be used.

We will create one for video game reviews.

<?php
/*
Template Name: Critique de Jeu
Template Post Type: game
*/

When you create a new video game post, you will see a selector appear with two options: "Default" and "Game Review". Once you have selected a template, the code inside the template will be used.

Using a template

 

Video game review
To create a view, all I'm going to do is copy from Twenty Seventeen. I create a file which is therefore called "template-game-review.php" with the following code:
' '. __ ('Previous Article', 'twentyseventeen'). ' '. __ ('Previous', 'twentyseventeen'). ' '. twentyseventeen_get_svg (array ('icon' => 'arrow-left')). ' % title ', 'next_text' => ' '. __ ('Next Post', 'twentyseventeen'). ' '. __ ('Next', 'twentyseventeen'). ' % title '. twentyseventeen_get_svg (array ('icon' => 'arrow-right')). ' ',)); endwhile; // End of the loop. ?>

I have copied all this code from "Twenty Seventeen". I modified the "get_header" function with one parameter, so that it resulted in a different header. I also modify the parameters of the templates "get_template_part ()" so that it is like this: "get_template_part ('template-parts / game / content', 'review'); ".

I then create a file for the header which I name "header-review.php" and I paste the code from the "header.php" file of Twenty Seventeen and I remove the following line:


I then created a "template-parts / game / content-review.php" file. I pasted the code from Twenty Seventeen's "content.php" and removed a few lines of code that wasn't really needed. I added this code at the very top:

Full Video Review

I added the following CSS code:

.site-content-contain {position: static; } #-Head review {position: absolute; top: 55px; left: 0px; padding: 22px; color: #fff; width: 100%; text-align: center; background: rgba (0,0,0,0.3); } #-Head review h1 {font-weight: 300; margin: 0px; padding: 0px; } # Review-small head {color: rgba (255,255,255,0.5); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 1px}

That's all it takes to create a template for a custom post format on WordPress. If you have any questions, please don't hesitate to ask them.

 

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
15 shares
Share10
tweet1
Save4