Creating your own Custom Page Templates in WordPress

By jaymanangan, 22 November, 2015
custom page template

Nowadays, it is difficult to attract audiences to your website. For one thing, you are not the only Internet user in the 21st century and, although the World Wide Web is expansive, being “original” or unique can be a bit tricky. It is possible that someone, somewhere had the same website idea as you do now, and has probably setup their pages in the Internet. Now do not feel distressed when this happens because, in this day and age, this occurrence is quite common.

Ever since the Internet has become accessible to all mankind, companies have utilized this space to make it easier and friendlier to use. That is why, today, almost everyone in the world has posted a webpage or has seen or managed a blog. Though it is simple to write something on a blank webpage, making it visually pleasing is another matter. It is a fact that humans absorb information faster through their visual means. When we see something, we immediately imply our own opinions and ideas as to what that thing is and it is because of this factor that many website owners do their best to make their webpages appealing to the eye.
If you want to stand out and be somewhat different than the other pages, however, there is one powerful WordPress tool, which can help you give your pages individuality and that is the custom page templates option.

WordPress Custom Page Templates

Just like the other well-known social networking and media sites, WordPress, for example, has its own version of custom page templates. Since this site is 100% free for all Internet users, it is one of the easiest and simplest ones to use. To understand the function of this system, you first need to know what a page template is. Basically, page templates give users the ability to transform how their webpage looks. They are allowed to post images, their own customizable sidebars, and the like giving their pages a unique and personalized touch.

How Can I Create My Own Page Template?

WordPress uses the PHP or Hypertext Preprocessor language, as its format for page templates. Although, it might seem that you are being bombarded with a wall of text that you need to memorize, creating a webpage in this site gets easier each time you are exposing yourself with the system. When it comes to creating your own website, there are many tutorials, posts, applications, and the like circulating around the Internet that can certainly help you obtain your preferred template. WordPress provides its own custom page template option in their site, however if you want to make things a little bit easier, simpler and yet, more detailed, you will need the help of programs like FileZilla or Views.

The WordPress Template Hierarchy

Now, before you begin creating your own page templates, you need to be knowledgeable with the WordPress Template Hierarchy. This mode of placement helps users like you understand the ranks of each file. It does not necessarily show the importance of a certain page, but more on how WordPress wants to display a certain webpage. An example of a template hierarchy would look something like this:

  1. category-{slug}.php: in this case category-news.php
  2. category-{id}.php>: if the category ID were 5, WordPress would try to find a file named category-5.php
  3. category.php
  4. archived.php
  5. index.php

Creating Custom Pages with FileZilla

  • Step 1: Open your FileZilla FTP Client or go directly to the root directory section of your blog. Once there, you will notice that the directory consists of three main folders which are: wp-admin, wp-content, and wp-includes.
  • Step 2: Click on the wp-content folder and select themes.
  • Step 3: Inside this folder, you will find all the current themes installed in your blog. You will have to select the style your webpage is currently using, but if you are having a difficult time looking for the theme’s name, choose themes under the appearance tab on the left-side panel and you will find the name of your current template.
  • Step 4: You will need to identify the file names of your page templates by consulting the documentation of your theme. It is also important to note that these static page files are part of your theme, with each having their own function and purpose. Some of the common file names you might see are the sidebar.php, search.php, and single.php.
  • Step 5: After you have identified the page templates, simply download one of them to your desktop.
  • Step 6: Modify the existing page’s code to whatever you see fit. For beginners, it is highly recommended that you use WordPress’ Creating Your Own Page Templates Section, because not only will it help you familiarize yourself with this site’s own tools, but at the same time, train you to be accustomed to use this format.
  • Step 7: To save your files you will need to follow a certain file naming rule. You cannot use characters such as the quotation marks (“), dashes (-), underscores (_), and the like because it will just complicate things. Upload this new file in the same directory folder where you downloaded the original form.
  • Step 8: Once you are satisfied with your new template you may now upload it to WordPress. To do this, you will have to log in to the backend area of your block and then click on the All Pages option, which can be found under the Pages navigation. Click Edit and on the right hand side column, you will see a drop-down box named Templates. This is where you will choose the template name.

Creating Custom Pages with Views

  • Step 1: Once this plugin is installed, go to Views-> Content Templates to get you started.
  • Step 2: Add fields to the template by clicking the Fields and Views button. Here, you will see a list of fields that are available at your disposal. Click on one to insert the shortened code into your template.
  • Step 3: You can now design the content template by using HTML codes and tags.
  • Step 4: Customize the display of your template the way you want it by going to the Settings box.
  • Step 5: View your finished custom page template in your website.
  • Optional Step: Before step 5, you may opt to inline your templates with CSS and Javascript editors. To do this, click to open the CSS or Javascript editors, add the styling of JS you need, and then, update your content template.

How Does This Help Me and My Website ?

Code Cleanliness and Organization

You have seen firsthand how basic coding looks like and seems like it is a barrage of letters, numbers, and characters. Without a systematic coding process, it will be even more difficult to find which paragraph, sentence, or image you want to edit or customize because the information is all over the place.

A Sense of Uniqueness and Originality

Even if there are numerous sites and blogs that use the same templates, you are still able to spin it according to your will – especially if you decide to purchase a premium service. Also, by enabling you to customize the appearance of your webpage, your audience will have an easier time navigating through your website.

Your Own Personal Touch

There is nothing more satisfying than the feeling of creating something all on your own. Every image, code, layout, and displays are all done by your own choices and imagination – empowering you to do better each time you edit or create new pages.