This is an intermediate level tutorial for aspiring theme developers. Although I will not go into the finer points of theme developments, I will demonstrate how to create a custom page template that you can add to your current theme. The purpose of the tutorial is to create a customized home page that doesn’t necessarily follow the same theme design as the rest of your site. This is desirable for many WordPress developers who may want a very different home page that has attributes unlike what your WordPress theme currently offers. So, if you have an idea for a home page for your WordPress website that cannot be created easily with the standard WordPress WYSIWYG editor from the dashboard’s add page feature, this tutorial offers the solution you have been seeking.
Starting a Page Template
In order to add a custom home page to your current theme, you will want to start a new page template. This is necessary for the WordPress engine to recognize your new page. That way you can access the page from the admin area and activate it once you have created it. Select a name for your file and make sure it isn’t too common and that it doesn’t already exist in your current theme’s folder. I choose the name “homepage.php” since I intend to use it as the site’s home page. You do not have to user your own page as a home page, it could go anywhere in the site’s infrastructure that you desire. I just thought a custom home page template was a more common need so that is what this tutorial is based on. You can make a few fairly simply changes as you go and build a custom page for any page you wish in WordPress though, so let’s get started. Open your favorite text editor and start the homepage.php file with the following PHP code. If you already have a page coded that you want to use as a custom page template, then add the following code to the very top of the file:
The Template Name attribute inside of PHP comment tags is what WordPress uses to recognize your new file as a page template. Where I named my template, “homepage” in the above template code, replace the homepage text with the name of your template which should correspond with the filename itself.
Building your webpage
Uploading your custom page files
Once you have created your custom page and supporting files, it is time to upload them to your server and see if they work. The main PHP file you created as your template page, homepage.php in our case, needs to go in the main folder of your current theme which should have a directory pate similar to the following:
Where “your-theme” is the name of the theme you have selected as your active theme form the WordPress admin. Upload your homepage.php file to your theme directory. Next upload the folder containing all the support files for your new template page into the same directory, your theme’s main folder.
Activating a Custom Page from the Dashboard
Finally, it’s time to activate your new webpage from the WordPress admin so that the rest of your WordPress site or blog recognizes the page and adds it to the proper Navigation menus and provides links as needed. Here are the necessary steps to make your new page officially part of your existing WordPress site:
- Login to your WordPress admin dashboard.
- Click on “pages” then “add new” to add a new page to WordPress.
- Give the new page an appropriate title at the top of the resulting page. I named mine Home page as an example.
- Move over to the right column of the page and locate the template drop down and you should see your new template named as one of the options. Select it.
- Publish the page. There is no need to enter any content in the WYSIWYG editor since you already coded your HTML in the custom page template, homepage.php in our case.
Here is an image of the WordPress admin area that corresponds to the above steps. Notice the template drop down and the title attributes are the only things I selected or filled in before hitting the “publish” button.
That is really all there is too it! You should now have a working page. Click view page at the top of the add page dialog and it will take you to the custom page you have created.
Using a Custom Page Template as Your Home Page
For those of you that do want to make the custom page, your WordPress site’s home page or landing page, here are the few simple steps necessary to achieve a custom home page setup:
- Login to the admin dashboard
- Go to the settings option in the main left-side navigation menu and select the “reading” option.
- Tick the option for a static home page and find your custom page template in the dropdown and select it.
- Click the save button at the bottom of bottom of the page
Now when you go to your sites base URL or Domain name, you will see your new custom page as the home page for your WordPress site.
After following along with this rather simple WordPress template or custom home page tutorial, you should be able to add any custom locally made home page to your WordPress site. Of course, I could go on all day and half of tomorrow about how to properly code the template page using standard WordPress coding methods, but that is beyond the scope of this tutorial. This tutorial was meant to simply show you how to add a custom page. You need to learn some about developing templates in order to build a proper template yet, but this tutorial should get you off in the proper directions. Happy coding!