With the launch of WordPress, website development and maintenance became easy to handle. This page template allows users to change their website’s design and layout to their liking. This introduction has provided ease to all website owners and website designers.

In this post, I am going to give you some rudimentary facets of WordPress Custom Page Template which cover everything including its usage, hierarchy of template, naming your page template, advantages of using a page template, and how to create a custom page template.

But before jumping onto that, I would like to first cover what a custom page template is. Let’s begin.

What is a Page Template?

When we talk about the template in WordPress, “Templates are those files which provide WordPress the information about how it can display a different kind of content.”

This is exactly what a page template is in the context of WordPress. WordPress chooses the most appropriate template file from your theme’s file list. WordPress identifies the most appropriate file by an internal set of hierarchies. This is known as Template hierarchy.

Let’s unfold some facts about Template hierarchy.

The Template Hierarchy

Let us understand this term like this, all the pages of a WordPress website are interconnected to each other. Every template of that WordPress represents a page. And together they all form the entire content of the website. The selection of these templates by a file is entirely based on a solid hierarchy, based on the name convention. This hierarchy is the “Template Hierarchy”.

This Template Hierarchy decides which PHP template file will be chosen to construct a given web page on your WordPress website.

How Template Hierarchy Works?

You can think of it like a decision tree that works its way down to the roots. Let’s illustrate this to have a better understanding of the hierarchy. Suppose you want to access a website http://xyz.com/category/events, the WordPress will start looking for the template in this order.

→ category-[slug].php:- category-events.php
→ category-[ID].php:- if here the category is 7, then category-7.php
→ category.php
→ archive.php
→ index.php

The last one index.php will be most often used because if WordPress is unable to find any more specific template files. In short, if the rank of your template file is higher than that WordPress will be always bound to use that file automatically.

Uses of WordPress Custom Page Template.

Generally, the template for pages is appropriately named page.php. WordPress usually uses page.php to display the content of all the pages.

However, sometimes a designer needs a change of layout by the pages, layout, or functionality. Whenever these kinds of situations arise, a page template is the best solution. This enables you to customize those selected parts of the website which you want to individualize in your website.

Now, let’s move on to the next part. Now, we will be making a custom page template in WordPress. However, I want you to take special attention. Because when you make changes in one of the templates, there can be a lot of complications. Hence, I always recommend it to be built on a child theme. So, I hope you understand why I made such a request. So, let’s create a child theme and then add a custom WordPress page template.

Step by Step Building a Custom Page Template

These steps are not very hard to follow, however, I still recommend my readers pay attention to some of the details. So, let’s go through the process one step at a time.

Let’s Find a default template

Now, it is considered to be wiser, if you just copy the default page template and use those codes. Writing from scratch can be a good thing, but it is too lengthy. Most of the time, the default page template is page.php.

For a demo, Let me choose the Twenty Twelve WordPress theme for this illustration.

/**
* The template for displaying all pages
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other ‘pages’ on your WordPress site will use a
* different template.
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/

<?php get_header(); ?>

<div id=”primary” class=”site-content”>

<div id=”content” role=”main”>

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!– #content –>

</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

As it is visible, there is nothing fancy all the elements are normal. It will look like this:

Now, Let’s copy and rename the template file.

Now, you’ve identified the default template file. Now, it’s time to copy that file and rename it. Now, you’re going to make changes to this file. Here I named it, “My Custom Template”.

The Template file header Customization.

Now, we have to inform WordPress about this new custom page template. So, for this purpose, you have to make the following adjustments,

/*
* Template Name: My Custom Template
* Description: Page template without sidebar
*/
// Additional code goes here…

As you can see, the name under “Template Name” is the name you had given to your template in step one. Please make sure that you change the template name.

Code Customization

Now, it is the time when you will have to get the main ingredients of your page template: The Code. Here, I just want to remove the sidebar of the template so that it can become a full-width template.

This part is easy, all I have to do is remove the “<?php get_sidebar(); ?>” part from the template file. So, now the template will end up looking like this,

/*
* Template Name: Custom Full Width
* Description: Page template without sidebar
*/
get_header(); ?>
<div id=”primary” class=”site-content”>
<div id=”content” role=”main”>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_footer(); ?>

Uploading the Template file.

Now, you have to activate the theme on your website. A custom page template can be saved in many places such as:
In the folder of the Main Theme.
A subfolder of the Main Theme.
In the folder as your active child theme.
In a subfolder of your active child theme’s folder.

So, upload the theme in such a folder where you can easily differentiate it from others.

Activate the Page Template

Just go to the Page attribute→ Templates in the WordPress editor.

After activating the theme you’re done, now just visit your page and see it yourself,

As I said it’s not as hard as it seems. Now, Let me mention some other important ways to Use a Page Template. Here we go,

Different Methods to Use Page Templates.

As I mentioned above, you can use a Page Template in every tangible way, Let’s have a look at these ways,

l Full-Width Page Template

This is a whole lot of advanced versions of the demonstration we’ve done above. In the above demonstration what we’ve done is just remove the sidebar. You can see there (In the screenshot), that we just remove the sidebar however the text is all of the same width.

So, to address this problem, we have to go to CSS,

.site-content {
float: left;
width: 65.1042%;
}

Here, the width of the text element is limited to 65.1042%, and this is the element we want to change or rather I say increase.

Looks like we can change the number, aye? If we do that, then things might go rogue on all the other pages. So, to do this let’s first change the primary div’s class in our page template to class=”site-content-fullwidth”.Then the result will be like,

<?php
/*
* Template Name: Custom Full Width
* Description: Page template without sidebar
*/
get_header(); ?>
<div id=”primary” class=”site-content-fullwidth”>
<div id=”content” role=”main”>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_footer(); ?>

Now, All we need to do is adjust the CSS for the new custom class.

.site-content-fullwidth {
float: left;
width: 100%;
}

Now, the webpage’s text will be fully stretched to 100%, here are the final looks of the web page.

l For the Custom Post Type.

The custom post type is a unique way to present content as it has its own sets of data points and designs. It is Ideal for reviewing purposes. In this demonstration, I’ll show you how to use custom post types to build a portfolio platform for items.

To create a custom post type, you’ll have to ask for help from a plugin that facilitates you to build a CPT (custom post type). Now, install and activate that plugin after which you can add a custom post type. P.S. make sure for the slug, it must be ‘Portfolio’.

Now, you have a portfolio custom post type, Just consider one thing, the slug for the custom post type should be unique. In this demonstration, I am using clients-portfolio as a slug.

Portfolio page without custom page template.

Now, add some items to the Portfolio page. Now, I want to show these items underneath the page content. For this purpose, we’ve to again use a copy of page.php. Name it portfolio-template.php. We will change the header to this,

<?php
/*
* Template Name: Portfolio Template
* Description: Page template to display portfolio custom post types
* underneath the page content
*/

Now, there’s a twist, we’ve to make some changes to the original one as well. If you observe the coding of page.php you’ll see that in the middle it is calling another template file content-page.php. In that particular file, we’ve to look for the following codes,

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<header class=”entry-header”>
<?php if ( ! is_page_template( ‘page-templates/front-page.php’ ) ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h1 class=”entry-title”><?php the_title(); ?></h1>
</header>
<div class=”entry-content”>
<?php the_content(); ?>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”>’ . __( ‘Pages:’, ‘twentytwelve’ ), ‘after’ => ‘</div>’ ) ); ?>
</div><!– .entry-content –>
<footer class=”entry-meta”>
<?php edit_post_link( __( ‘Edit’, ‘twentytwelve’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
</footer><!– .entry-meta –>
</article><!– #post –>

Once, you find it, You’ll have to make changes to our page.php file. The changes will look like this,

<?php get_header(); ?>
<div id=”primary” class=”site-content”>
<div id=”content” role=”main”>
<?php while ( have_posts() ) : the_post(); ?>
<header class=”entry-header”>
<?php the_post_thumbnail(); ?>
<h1 class=”entry-title”><?php the_title(); ?></h1>
</header>
<div class=”entry-content”>
<?php the_content(); ?>
</div><!– .entry-content –>
<?php comments_template( ”, true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now add the following code just below the_content() call

<?php
$args = array(
‘post_type’ => ‘portfolio’, // enter custom post type
‘orderby’ => ‘date’,
‘order’ => ‘DESC’,
);
$loop = new WP_Query( $args );
if( $loop->have_posts() ):
while( $loop->have_posts() ): $loop->the_post(); global $post;
echo ‘<div class=”portfolio”>’;
echo ‘<h3>’ . get_the_title() . ‘</h3>’;
echo ‘<div class=”portfolio-image”>’. get_the_post_thumbnail( $id ).'</div>’;
echo ‘<div class=”portfolio-work”>’. get_the_content().'</div>’;
echo ‘</div>’;
endwhile;
endif;
?>

This will make the Custom Post type as,

Now, if you want to add some more designs you can copy-paste the following codes,

/* Portfolio posts */
.portfolio {
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.75);
margin: 0 0 20px;
padding: 30px;
}

.portfolio-image {
display: block;
float: left;
margin: 0 10px 0 0;
max-width: 20%;
}

.portfolio-image img {
border-radius: 0;
}

.portfolio-work {
display: inline-block;
max-width: 80%;
}

.portfolio h3{
border-bottom: 1px solid #999;
font-size: 1.57143rem;
font-weight: normal;
margin: 0 0 15px;
padding-bottom: 15px;
}

This change will look like this,

Isn’t that great?

So, these are some cool ways you can use custom post types, once done, they can make your website not just stylish but also unique.

Wrapping Up

In this entire journey from 2003 till now, there are many things we learned and to be honest, we all have evolved. And WordPress is the platform that witnessed a revolution in the evolution of technology. HTML to a user-friendly CMS. Complex to easy.

Learning WordPress and its page templates can be complex. I will recommend you go one step at a time, and you will see how fast you can master the art.

If you like my post please share it and if you guys are stuck somewhere over the steps, remember one thing, “I am just a comment away”.

Author Bio

Kiara Marsh is a WordPress developer and a passionate blogger. She works for Wordsuccor Ltd., a leading WordPress theme customization company. Kiara has 5+ years of experience in the industry, and she likes to share her development experience and knowledge with insightful posts.

Using a professional image editing tool for editing and optimizing your featured images can greatly enhance the visual appeal of your website, and can help to drive more traffic and engagement

Importance of Adding Featured Images in WordPress:

• Makes an article or post look more appealing.
• Summarizes all the content in form of an image.
• Increases the visual presence of the site.
• Gives better SEO results.
• Makes blog a qualitative blog.

Procedure to Add Featured Images in WordPress

• First of all Login to the Dashboard of your page. Click on the button Posts and then on Add Posts.

• Write a post completely. After writing a post, to Add Featured Images on the right side of the page click on the option Set featured image.

• Users can get two options whether to Upload files by dropping the files or selecting them from Media Library. The easy one is to, Select the files as per the named saved.

• Search for the file and after finding it. Click on the button Open.

• While making the featured image always consider the image size before adding it to the site.
• Fill up all the spaces which are highlighted in red color in the below Screenshot. Write the Title, Caption, Alt Text, and Description of the image.  

• Finally, click on the button Set featured image.

• Now, the user can see the Featured Image as shown below Screenshot before publishing the article. In case the user wants to change the image. Users can simply click on the button Remove featured image and add the new one again.

Wrapping Up

It’s really easy to add Featured Images in WordPress to WP Beginners as well. After Adding a featured image, viewers can get basic knowledge about the objective of the tutorials, articles, or posts. Hope the information was useful. Any WordPress beginner can add Featured images in an easy step of 1,2,3…! After viewing this tutorial.

Also, check out other WordPress Tutorials over here:

• 10+ Best Free Wedding WordPress Themes
•  Add JavaScript to WordPress pages or posts?
• Bulk Delete WordPress Posts?
•  Translate a WordPress Plugin in Your Language?

Importance of Bulk Delete WordPress Posts:

• Makes the site lightweight.
• Reduces loading speed.
• Performs crucial functions timely.
• Removes all the unnecessary strains from the site.
• Makes more sites more impressive and SEO Friendly.
• Maintain the site in a well way.

Bulk Delete WordPress Posts without Plugin

• First of all, login to the Dashboard of your WordPress Site. There click on the button Posts. Among the different options, click on the All Posts page. Click on the bulk select box to select all the pages displayed on a page.

• Users can simply click on the button Bulk select and choose the articles, blogs, and posts that they are willing to delete. Before deleting it would be better if, users will check whether to delete which posts before the final decision.  

• For the posts which you don’t want to delete don’t click on them or unclick the button of the particular post. In the option of Bulk Actions, Users can find an option ‘Move to trash’. Click on the button to delete the selected posts.

• Click on the Apply Button to delete the selected posts. All the selected posts will move to the Trash.
• Select/Click on the button Screen Options at the top of your page and choose the number of items per page that you want to delete. On View Mode, Users should choose whether to List View or Excerpt View. Enter the number on the option Number of items per page. At the end don’t forget to click on the button Apply to fix all the changes that you have made.

Wrapping Up

Do you want to Bulk Delete WordPress Posts? Then, here is the easiest way to do so without the use of any plugin. Even, WP Beginners can Delete WP Posts through the guidance of this tutorial within a few easy couple of steps. Hope the information was useful to you. Viewers can leave the recommendations below.

Also, check out other WordPress Tutorials over here:

• 5+ Best WordPress Testimonial Plugins (Premium Collection)
• 10+ Best Premium Sports WordPress Themes
• How to Optimize Your WordPress Site for Better SEO?
• 10+ Best Free Fashion WordPress Themes
• Things that Make Your Website Look Crappy
• How to Translate a WordPress Plugin in your Language?

Images help a reader to read more effectively and understand the content, articles, and blogs more conveniently. A site must keep SEO-friendly images as it helps to make the information more effective as well and search engines like Google are very friendly.

Things to consider while making images SEO Friendly Images:

• Make sure the image is relative to the page
• Use proper ALT text and title text
• Use images in your XML sitemaps
• Choose the proper file name
• Use original high-quality images
• Beware of copyright
• Improve images with tools
• Using appropriate images for the scale
• Utilizing only the proper images
• Add the different tags for your images
• Reduce the unnecessary size of the file for faster loading
• Always add the proper image to your article
• Select the proper caption
• Consider the optimized image in your website

The process of creating SEO Friendly images in WordPress

• First Crop the proper Image which you are going to insert using the appropriate tools you have been consistently using for it. Then rename the given file according to the proper matching name of the article. So, that your image will be easily found while searching.

• Now, drop the image/featured image to your site. Consider the size of the picture as per the need of your site requirement. But, keep in mind its size should be as small as possible. As it will help your image appear faster while searching it on Google and decrease the uploading speed.

• Then add the proper URL, Title, Caption, All Text, and Description as the nature of your site image which is situated on the right side of your site. Always choose the proper caption. Are you don’t have a definite idea then study the site before giving it any type of caption.

• Hence, after filling in all the required URLs, titles, captions, text, and descriptions click on the set featured image that will appear at the end of your page, then That image will appear as SEO SEO-friendly image on Google which will help you to increase the traffic.

It is also possible to use different plugins to create SEO Friendly images in WordPress  as listed below:

• PB SEO-Friendly Images
• Yoast SEO
• Semrush
• OUTREACH PLUS
• WP Meta SEO
• KeywordTool.io
• SEOquake and so many others

Benefits of creating SEO Friendly images in WordPress

• Helps you rank higher in Google
• Provides clean code regarding your site
• Increase traffic to your site easily
• Increase your site uploading speed as all the unnecessary equipment is deleted
• Supports for featured image
• Increase overall browsing experience
• Balance quality and size
• Makes easy to appear while searched

Wrapping Up

If you are uploading an image to your site then it’s really important to keep it SEO-friendly to deal with all the clients in an easy, efficient, and effective way. Hence, one should always consider that if you are uploading an image to your site then keep it SEO-friendly to make your site easily accessible among all the viewers.

Also, check out other WordPress Tutorials over here:

• How to Add a New WordPress Admin User?
• Exclude a category from your WordPress homepage
• Integrate Twitter Feed on the WordPress website
• Add Feature Image in WordPress
• Bulk Delete WordPress Posts

Features of the AccessPress Twitter Feed are:

•  Supports the dedicated Email forum support.
• Provides free updates for a lifetime.
• Fetch the latest tweets from any account.
• Displays tweets in the slider.
• Option to show and hide full username and so on.

Procedure to Integrate Twitter Feeds on your WordPress website using Plugin

• First of all, log in to the Dashboard of the site.
• Click on the Plugins button and then click on the Add New button to add new Plugins to the site.

• Search for the Plugin that you want to install on your site. After getting the Plugin for the site. Click on the button Install Now.

• Then again click on the button Plugins and then on Installed Plugins. Users can see the plugin installed currently, then click on the button Activate. 

• After activating the plugin in the second last Option, get the AccessPress Twitter Feed. Click on the button.
• Fill up all the links to the Twitter account. But, if not then Create it through the link as highlighted in the below screenshot. Fill the Settings blank spacesettings like Twitter Consumer Key, Twitter Consumer Secret, Twitter Access Token, Twitter Access Token Secret, Twitter Username, Cache Period, and Total Number of Feeds as per the account name and detail as shown in the screenshot below.

• Then see the Feeds Template. Choose Feeds Template Options to display the site to the customers.

• Choose the Time Format to show news feeds to the users. It provides three options i.e. Full Date and Time, Date only Elapsed Time.

• Click on the button Display Username to Display username otherwise leave the place empty. Click on the Button Display Twitter Actions(Reply, Retweet, Favourite) to display it. Fill up the space for Fallback Unavailable Message to display the message if Twitter API is unavailable sometimes. Click on the button Display Twitter Follow Button to display the Twitter follow button at the end of the feeds. In the end, click on the button Display Cache to display the caching of the tweets and to fetch new tweets.

• Finally, click on the button Save Settings to save all the changes made to the Website. 
• Users can also see the available demo after clicking on the button Demo which is given at the end of the page.
• Then finally after doing all the procedures click on the button Update to see all the changes made to the site.

Wrapping Up

With the use of the AccessPress Twitter Feed Plugin, users can make all the necessary changes to Twitter Feed. It’s reliable even for the WP beginner. As it is a free plugin it can be used by everyone to increase the general clients more conveniently through the Twitter Feed which will make your site even more appealing.

Also, check out other WordPress Tutorials over here:

• How to exclude a category from your WordPress Homepage?
• 5+ Best WordPress Blog Manager Plugins (Premium List)
• Add Featured Images in WordPress
• Bulk Delete WordPress Posts 
• Translate a WordPress Plugin into Your Language

What is Robots.txt for SEO?

Robotx.txt is considered a useful SEO tool that directs search engines on how to crawl your website. It is stored in the root directory (known as the main folder ) of your WordPress website. Its basic format somehow looks similar to this.

User-Agent: *
Allow: /wp-content/uploads/
Disallow: /wp-content/plugins/
Disallow: /wp-admin/

Sitemap: https://example.com/sitemap_index.xml

Why Optimize Your WordPress Site Robots.txt for SEO?

You need Robots.txt to tell search engines which pages or folders shouldn’t be crawled. If you don’t have it, the search engine will still crawl and index your website. It doesn’t affect you a lot to your site. But, when your website keeps on growing and you have lots of content on your site, it becomes unwantedly compulsory for your site too.

Anyway, it can’t be considered the safest method to hide your content or posts from traffic or users. But, it will help you to hide content from the search result.

There are different ways to Optimize Your WordPress Site Robots.txt for SEO. Today, we will be doing this by using Yoast SEO. Learn to Install Yoast SEO on your WordPress site.

Optimizing WordPress Site Robots.txt for SEO

Once you’re done Installing and Activating Yoast SEO,

• Click on Yoast SEO>>Tools page in your WordPress admin and click on the File Editor link.
• Click on the File Editor that appears on your page.

• After you click on the File editor, you can see your robots.txt file on your next page headed
• Click on Create a robots.txt file

By default, your WordPress site adds the rules to your robots.txt file.

It is necessary to remove the text as it stops all the search engines from crawling your website.

• Delete or Erase the text written
• Go ahead and add your own robots.txt rules
• Click on Save Changes to robotx.txt to save your changes.

You have made your changes in the Robots.txt file and now you can only crawl the content or pages as per your wish.

How can we Test Your Robots.txt File?

Once you are done, you can always check for its surety. There are different ways of checking the robots.txt file. Anyway using Google Search Console can be an easier way of doing it.

• Login to your Google Search Console account
• Switch to the old Google search console website.

• Launch the robots.txt tester tool located under the ‘Crawl’ menu.

You now automatically fetch your website’s robots.txt file and highlight the errors and warnings if it found any.

Wrapping Up:

In this tutorial, we learned How to Optimize Your WordPress Site Robotx.txt for SEO. It has a certain sort of importance in your WordPress site as previously mentioned. We have briefly explained your method and idea to add it to your site too. If you have any confusion then please let us know.

Also, check out other WordPress Tutorials over here:

• How to Add a New WordPress Admin User?
• Exclude a category from your WordPress homepage
• Integrate Twitter Feed on the WordPress website
• Add Feature Image in WordPress
• Bulk Delete WordPress Posts