How Do You Create A Wordpress Post Template

Have you ever seen a post details page with a completely different layout from other posts on the same site? That's probably considering it's using a custom template. You can assign a custom template to individual posts, giving you increased flexibility over the advent of your site.

Interested in learning how to create a custom single-mail service template? In this post, I'll show you how you can hands create your own!

The benefit of custom templates

Before we start creating i, let's explore why you might need a custom template and what it does.

If you desire a particular mail service or post type to stand out from the rest of your content, you may want to consider creating a custom unmarried-post template. This template will merely be applied to the post(s) yous assign information technology to, meaning it tin can have an entirely unlike layout than your standard posts. A unique design and layout can so increase user engagement for that particular mail service.

Ready to develop your ain? Creating and using a custom post template is like to a custom page template.

How to create a custom mail service template

I volition exist using the Twenty Seventeen theme for my example, but the process will be same for any theme.

Before creating a custom post template, I volition create a kid theme first. You lot can work in the main theme, but since you're creating a custom template, if you update the parent theme you lot'll lose your template. For this reason, it's adept practise to go on your custom templates separate from the main theme.

For a custom template, you have to define a Template Proper name (the proper noun of the template) and a Template Post Type (where this template volition exist used). It looks similar this:

          
<?php /* Template Name: Full Width Post * Template Mail Type: post*/ /*The template for displaying total width single posts. */ get_header( ); ?>          
        

When yous save the file, keep the file proper name relevant to the template name, like full-width-post.php. If you view a post from the admin panel, it will show the new template in a dropdown of the Mail service Attributes section.

Our custom template is prepare, just it'south not useful yet. Let's make it a bit more beneficial!

Note: We'll be working on multiple files, and so keep rails of the file names and folders.

Here's the electric current layout of blog post pages in the Xx Seventeen theme. I'm happy with that, so we'll leave information technology be.

Now, let'due south say yous desire a total-width layout for a few posts. Nosotros'll put the post title in a higher place the meta data. The meta data should have a edge at the top and lesser, and both the title and meta data should be centered aligned. Hither's the wireframe:

To make this layout, you demand to detect which file is responsible for displaying post details pages. In most themes, single.php is the file, unless there are certain predefined templates. The lawmaking construction varies from theme to theme, so information technology may have a little learning to empathise how your particular theme works.

One time you've found the file that displays mail service details pages, you should find if a part is used to call another file or the template is created directly. In this example with the Twenty Seventeen theme, information technology's get_template_part function.

The get_template_part path is the nearly important role to follow here.

          
<div course="wrap">  <div id="primary" form="content-area">         	<master id="main" form="site-main" office="main">               	<?php /* Commencement the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/mail/content', get_post_format() ); // If comments are open or nosotros have at least one comment, load up the annotate template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' => '<span course="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><bridge aria-hidden="truthful" form="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-championship"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',                           	'next_text' => '<bridge class="screen-reader-text">' . __( 'Next Postal service', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Adjacent', 'twentyseventeen' ) . '</span> <span course="nav-championship">%championship<span course="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',                     	) );               	endwhile; // End of the loop.               	?>          
        

As you tin can see, it'south referring to a path:

          
get_template_part( 'template-parts/post/content', get_post_format() );          
        

So the content.php file is called within unmarried.ph to output the mail details folio.

Now that y'all know how the unmarried.php file is working, let's copy the code from it and paste it into our previously createdtotal-width-postal service.php file in the child theme. Since it will be a full-width template, we'll remove the sidebar.

Now copy the content.php file from the above-mentioned path. You can paste it in the same directory where your template file exists, but I'd suggest following the same folder structure as the parent theme.

You lot tin go along the file name every bit information technology is, only if you ever wish to change something in the default template information technology'll cause a conflict, and then to avoid any issues, I'd suggest renaming the file and keeping information technology relevant to the template proper noun, such as content-total-width.php.

The files are in place, and then now let's modify the lawmaking to swap the mail service title and post meta data.

          
<header class="entry-header">         	<?php          	if ( is_single() ) {               	the_title( '  <h1 class="entry-championship">', '</h1>  ' );         	} elseif ( is_front_page() && is_home() ) {               	the_title( '  <h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>  ' );         	} else {               	the_title( '  <h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>  ' );         	}          	if ( 'post' === get_post_type() ) {                	echo '  <div class="entry-meta">';                     	if ( is_single() ) {                     	  	twentyseventeen_posted_on();                     	} else {                           	echo twentyseventeen_time_link();                           	twentyseventeen_edit_link();                     	};               	echo '</div>  <!-- .entry-meta -->';         	};         	?>   	</header>  <!-- .entry-header -->          
        

To apply this template, edit the desired post from the WordPress admin and assign the template from the dropdown menu.

If you check the post on the front terminate, information technology's still not total-width, merely the title and meta data have swapped places, so nosotros know that the mail service is using our custom template

Nosotros have to add some CSS to make it full width. WordPress auto generates a course as per the template name in the body section.

Use that grade to target this item template. You tin can add the CSS to the child theme style.css file.

          
.post-template-full-width-mail.has-sidebar:not(.error404) #primary{ bladder:none; width:machine; }  .postal service-template-total-width-post .entry-header{ text-align:center; margin-lesser:i.3em; }  .postal service-template-full-width-mail service .entry-meta{ border-peak:1px solid #ccc; border-lesser:1px solid #ccc; padding:15px 0; }          
        

Now we take the layout equally we wanted. Any mail service using this template will have this verbal same style.

You lot can create as many custom templates as yous desire to fit your requirements. You lot can even create templates based on mail categories.

Can I utilise a plugin for this?

If you are non comfortable with PHP codes, then you can use some plugins, but I must admit, there are very few plugins bachelor for creating custom post templates and most of them are not very useful because you accept to manually create the template anyways.

I have found the Post Custom Templates Lite plugin very useful. It's a costless plugin that allows you to create post templates without whatever coding in a nice drag-and-drib interface. It has lots of customization options, so if yous want to customize a post template, in general this plugin can help you out.

Note: The free version only allows your to customize normal post templates. You lot have to use the pro version to exist able to create custom post templates and get some additional features.

Determination

Whether you work manually or use a plugin to create a custom single post template, it allows your virtually important posts to stand out from the rest. For inspiration, check out Brian Dean'south site; he uses a item template for his definitive guide posts to make them await unique from remainder of his posts.

So, give it a try and create your own unique single-mail service template.

All photography in this commodity was shot in-firm at Flywheel.

---

Withal demand to convince your clients?

Convincing your clients that managed WordPress hosting is correct for their business concern is no easy feat. To help your mission, we've packaged upward a couple of one-sheeters explaining the value of managed hosting that you can pass straight to your client. Download it here!

---

What are yous going to learn next? Endeavor ane of these tutorials!

• How to choose the all-time CSS units to create better site layouts
• How to add together a responsive Google Map in WordPress
• How to efficiently drift your sites from Adobe Concern Goad to WordPress (+ over 20 resource!)

How Do You Create A Wordpress Post Template,

Source: https://getflywheel.com/layout/create-custom-single-post-templates-wordpress-how-to/

Posted by: whitfielddidess.blogspot.com

Share this post