How To Add Custom Page Template In WordPress

In modern web development, we try to avoid building a website from scratch if we can. Websites are usually built on top of a platform like Sitecore, Drupal, WordPress and so on. When I first thought about creating this blog, I tried to code everything from scratch, going against the trend. After a few months of PHP coding, I realised the effort would be too much. So, I decided to use WordPress. It is probably the easiest platform to create a blog site with enough customisability.

The power of WordPress lies in rich template choice and its customisability. You build your pages by using the existing templates and functions. It’s like Lego. It provides blocks and we can combine them to build something new.

In this post, I will go through how to add a custom page template in WordPress. It’s the low-hanging fruits in WordPress customisation with high effort-reward ratio. In fact, my home page is on the custom page template. I customised the PHP code to display latest blog entries per category.

Steps

(1) Log into wp-admin.

(2) Go to Appearance > Editor

(3) Find Single Page under Theme Files

(4) Copy and paste the code and save it with a new name (e.g. custom_page.php). You can edit it as you like. Make sure to include the tag as below. You can add this at the beginning of the file. Template Name value will be displayed as the page name under theme files.

1
2
3
4
5
<?php
/*
Template Name: My Home Custom Template
*/

?>

(5) Once you finish editing, upload the file in the folder for the theme you are currently using in the server (e.g. /home2/mydatahack/public_html/wp-content/themes/mytheme/).

To connect to the web server, you have to follow the host provider’s instruction. I set up SSH connection to the web server and used WinSCP to transfer files from my Windows machine. You can use any FTP client.

(6) You will see your custom template with the name you specified in Theme Files.

(7) You can create a new page with the custom template selected as Page Attribute.

You can now have the page with custom template like my home page.

Fun!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …