WordPress: Custom, Specialized, and Partial Templates

Custom Page Templates

Used for defining the layout of one or more Page.

Custom Page Templates generally define the overall structure of the Pages in your website. The default Page Template is located at wp-content/themes/mytheme/page.php. We often want certain pages to appear differently than others, so lets see how easy it is to create a new Custom Page Template.

Step 1:First lets create our new Custom Page Template. Create a new file named home-page-template.php (wp-content/themes/mytheme/page-templates/home-page-template.php). At the beginning of our file we have to tell WordPress that this is a Template, so the first few lines must look like this:

	// wp-content/themes/mytheme/page-templates/home-page-template.php  	<?php 	/* 	Template Name: Home Page Template 	*/ 	?> 	

Step 2:Now lets define the content and structure of our new Template. Refer to page.php in your themes directory if you want to copy some of that code. You may add whatever you like, but here is a quick example:

	// wp-content/themes/mytheme/page-templates/home-page-template.php  	<?php  	/* 	Template Name: Home Page Template 	*/  	get_header(); 	?> 	<div>This is the Home Page Template</div> 	<?php  	get_footer(); 	?> 	

Step 3: We are done creating a Custom Page Template! The last thing to do is set one (or more) of our Page’s templates to be our new Home Page Template (you would probably only have one home page, but keep in mind that you can apply this new template to as many Pages as you like). Navigate to your wp-admin page and go to Pages–>All Pages. Select a Page (or create a new one if you like) and click the Template dropdown under the Page Attributes section.

If you did everything correctly, you should now see the option for ‘Home Page Template’. Select this, update your page, and go check it out! For our simple example, you should see a header, our div, and a footer.

Specialized Page Templates

Used for defining the layout of a single Page.

Similar to the Custom Page Templates, Specialized Page Templates allow us to define a new layout for a Page. The difference is that Specialized Page Templates define the layout of a single Page, and cannot be used by any other Page. Lets see what this might look like.

Step 1: Inside of our themes directory, create a file named page-home.php (wp-content/themes/mytheme/page-home.php). This is where our Specialized Page Template will be defined. Note that we cannot place this file in a sub-directory, or if using a Child Theme in it’s Parent Theme’s directory.

Step 2:Lets add some content to our new Specialized Page Template.

	// wp-content/themes/mytheme/page-home.php  	<?php get_header(); ?> 	<div>My Specialized Page Template</div>  	

Step 3: Now, to tie things together, navigate to your wp-admin page. Go to Pages –> Add New. For the Page title, enter ‘Home’. A Specialized Page Template filename must match the format page-{slug}.php, where {slug} in our case is ‘home’. The title of our new Page must match this {slug} for things to work (with the exception of the first letters capitalization).

We have now defined a Specialized Page Template and a new Home Page. Navigating to our new Home Page, we should see exactly what we placed in our page-home.php file.

Now try deleting page-home.php and refresh the browser. What happens? WordPress does not see a Specialized Page Template in your themes directory anymore, so it falls back to the default page.php layout!

Partial Templates

Use Partial Templates when you have a common piece of code among your Templates.

More than likely, you have already used Partial Templates without even knowing it. The header, footer, and sidebar are essentially default Partial Templates: they are sections of code defined in a seperate file that we can add to our templates. Using Partial Templates, also known as partials, is a great way to increase the modularity and re-usability of our code, which will always pay off in the long run. The best way to understand what partials are is to look at an example. Let’s say that we have a site with multiple templates and we want to add a section containing social media icons on every page. We want these icons to appear in different locations depending on the template, so we dont really want to put them into the header or footer (otherwise, this isnt a bad idea). The wrong way to do this is to copy and paste our new code into each and every template that we want it to appear. Instead, we are going to define this code in a single file, known as the partial template, and then use a WordPress function wherever we need our social media icons.

Step 1: Inside your theme’s directory, create a new directory named partials (wp-content/themes/mytheme/partials). This directory is not required, but is a nice way to keep things organized.

Step 2:Inside of our new directory, create a file named social.php (mytheme/partials/social.php).

// wp-content/themes/mytheme/partials/social.php  <div class="social-media"> 	<ul> 		<li>Facebook</li> 		<li>Twitter</li> 		<li>YouTube</li> 	</ul> </div> 	

Step 3: Now, wherever we want our social media icons to appear, we simply use the function get_template_part().

// Sample locations that we might add our partial to: // wp-content/themes/mytheme/page-templates/mytemplate.php // wp-content/themes/mytheme/page.php  <? php get_template_part( 'partials/social' ) ?> 	

A quick note: The format of your partial filename (social.php in our case) may change things slightly. For example, if we would have named our file social-media.php, the ‘-‘ would act as a deliminater and our function call would look like this now: get_template_part( ‘social’, ‘media’ ). Check out the documentation for more specifics.

Thats it! We have just added a partial to our site, and it was unbelievably easy. Hopefully it was apparent in the example, but Partial Templates are a great way to factor out common code among your templates and makes it that much easier to modify your code in the future.

Conclusion

This was a quick overview of the tools at your disposol for adding layouts/structure (via Templates) to your WordPress site. Custom Page Templates are the most general form of templating, which allows you to apply a template to as many Pages as you like. Specialized Page Templates are slightly more restricted in the fact that you are creating a template for a single Page: one that cannot be used on any other Pages. And last but not least, Partial Templates are used for defining smaller sections of code that you may use across all of your templates.