Codeable info

Creating a Custom WordPress Homepage

Posted on by in WordPress Tutorials

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.


In order to follow along in this tutorial, it is expected that you know the basics of PHP and HTML. To be able to effectively create a page template in WordPress, you should be familiar with JavaScript and CSS as well. A decent understanding of the WordPress infrastructure and the WordPress admin area are also helpful.

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:

Template Name: homepage

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

Now go ahead and build your webpage in PHP. You are free to use JavaScript, HTML, and CSS in your file as needed. However, you need to create an include folder to include all supporting files for you custom page so they are easily identifiable form the rest of the files in your current theme’s directory. I made a folder named homepage_includes for my custom page’s includes. This is where any images and supporting files will go including CSS and JavaScript files.

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:

  1. Login to your WordPress admin dashboard.
  2. Click on “pages” then “add new” to add a new page to WordPress.
  3. Give the new page an appropriate title at the top of the resulting page. I named mine Home page as an example.
  4. 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.
  5. 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.

custom wordpress homepage

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:

  1. Login to the admin dashboard
  2. Go to the settings option in the main left-side navigation menu and select the “reading” option.
  3. Tick the option for a static home page and find your custom page template in the dropdown and select it.
  4. 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!

Codeable info

Comments (3)

Comment by Sandeep says:

i did the same, exactly you have mentioned in this tut, But my homepage file does accept css and js files. when i review it, it seems like just plain html file.

anyways..this is a great tutorial…thanks

Comment by grails says:

I started noticing that you can create templates when I bought some commercial themes. Then I tried copying the file, rename, and then edit the comment section to give it a new template name. It’s cleaner this way if you want to change a template behavior, because you don’t override the original version. You just create a new one.

Comment by kishore wp says:

hi. i asked my question in some forums, but no one reply me..

I need a category which can update latest posts (only headings).
if i click on the heading it will go for another category which have sub category menus on left side. if i click on the sub categery menu it will show the content.

below the reference link.

link is

my Question is.

journals >>
-Journal of Addiction & Prevention >>
— Home >>
— article, images or videos.
— Aims & Scope >>
— article, images or videos.
-Journal of Andrology & Gynaecology >>
-Journal of Antimicrobial Drug Design and Therapy >>

I need this kind of Structure. any suggestions for me.. and how will i get this. kindly help me with code.

thank you.

Codeable info