How To Create A Custom Page Template In WordPress

by on January 1, 2009 · 179 comments

This is a follow-on from my article called: How To Make WordPress Look Like a Website, where we walked through changing which page shows up as the home page for your WordPress website. The idea was to make it look more like a web site rather than a blog.

We changed the front page, but were left with the Page title and Sidebar still. So what if we want to completely customize our home page?

WordPress Page Templates are the answer

WordPress provides a clever way to do this called Custom Page Templates. To create a WordPress Page Template, you’ll need to use your text editor. Go to the directory on your server where you installed WordPress, and then navigate to the directory of your theme. Usually that looks something like this: “/wp-content/themes/default” where “default” is your theme name.

That’s where you will create your custom page template file. Create a file called “cover_page.php” and add the following code to it:

<?php
/*
Template Name: Cover Page
*/
?>

<?php get_header(); ?>
Here's my cover page!
<?php get_footer(); ?>
 

The Template Name: Cover Page tells WordPress that this will be a custom page template, where Cover Page is the name that will show up in the drop down selector when you create your page.

The other lines in this file simply include the header and footer of your blog. You can add any HTML that you want to display on your page in the middle.

That’s it – now you have a custom page template!

Creating a Page Based on Your Custom Page Template

Now all you need to do is create a new Page in WordPress:

Add Page in WordPress Screenshot

and assign your new custom page template to it:
Assign page template in WordPress
Now you will have a completely blank home page, with only the header and footer for your site. You can add ANY code you want to this page and customize it until your heart is content.

One caveat though – you’ll find that any content you put into the “page” you created in the WordPress editor will not show up here. Since you are overriding the page with a custom page template, you’ll need to add your content to the cover_page.php file that you created in order for it to show up.

Once you have the page looking the way you want it, go into Settings -> Reading in your WordPress Admin panel and set the “Front page displays” settings to look like this:

Selecting a static home page in the WordPress Reading Settings

Now your custom page will be the first thing visitors see when they come to your website!

Here’s a video walkthrough: Creating WordPress Page Templates.

Update: watch this video to see how to create a custom page template that is editable from the visual WordPress editor!

See my WordPress Powered Websites series for more WordPress articles, tips and tricks for small business websites.

Like what you read?

If so, please join over 10,000 people who receive exclusive weekly online business and blogging tips, and get a FREE COPY of my eBook, 10 Steps to Free Website Traffic! Just enter your name and email below:

Subscribe Now

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, the SmallBiz WordPress Theme and the GetFiveStars Customer Feedback and Reviews service.

Don has written 279 articles on Expand2Web

Author Connect » Twitter | | Facebook |

How The SmallBiz Theme Makes Your Business Website Way Better

If you're building a business website these days, you're in luck.

WordPress has revolutionized the ease and power of what a website can do and be. Now you can quickly create a website that is optimized for top search results, and update it yourself whenever you want.

As you'll see in a moment, the SmallBiz Theme is much more than a mere WordPress theme. It's a complete solution for your business web presence including a Website, Blog, Facebook Page and Mobile Website.

Let's take a look at each of these, and how they help you generate new business from the web…

Click to continue...

See my disclosure about advertising and affiliate links

{ 179 comments… read them below or add one }

duncan March 16, 2012 at 7:30 pm

“One caveat though – you’ll find that any content you put into the “page” you created in the WordPress editor will not show up here. Since you are overriding the page with a custom page template, you’ll need to add your content to the cover_page.php file that you created in order for it to show up.”

Is there any way of getting that content to show up? Does your moderator friend or someone on the board know of any code that we could enter into the cover_page.php file that will tell it to pick up the page content that you enter at the admin pannel?

cheers!

Reply

Don Campbell March 18, 2012 at 8:52 pm

duncan – yes, I show you how to do that in this post.

Reply

phjobs March 18, 2012 at 3:23 am

Thanks men, its very helpful to me…

Reply

phjobs March 18, 2012 at 3:24 am

A client wanted this done and this summary has brought me up to speed.

Reply

Trina April 12, 2012 at 8:47 pm

Hello,
I followed your instructions on creating a page template and it worked great.
However, I have links to images in my html source code that do not show up on the cover page. I copied the images into the images directory, but they still do not show up. What do I do?
Thank You!

Reply

Trina April 13, 2012 at 8:14 am

“You can add any HTML that you want to display on your page in the middle. ”

Can the HTML have image references in it?

Reply

lyndamama April 14, 2012 at 2:39 am

Thanks so much for this helpful information.

Reply

Sara April 16, 2012 at 6:57 am

Hi Don,
I am very new to wordpress and website design. I am trying to create a business page with your instructions but am getting stuck when I try to add your code to the custom template file you instructed to create in the theme directory. I am showing two file folders – twentyten and twentyeleven in my theme directory but no default. When I add the new file – cover_page.php. I can not add any code to it. I am using FatCow.com as a host server and am unsure how to continue making my custom webpage.
Thank you in advance.

Reply

Don Campbell April 16, 2012 at 12:38 pm

Hi Sara,
Which theme do you have active – Twenty Eleven? Then that’s the directory you need to place the file in. You will need a code editor and an FTP program to get that done.

Reply

Michael Lopez November 26, 2012 at 12:53 pm

You ROCK Don!!! Your response outran all other responses I had to spend 2 hours reading. Thanks a lot!

Reply

Nerd May 1, 2012 at 12:10 am

Thanx for ur useful post . it works really well

Reply

Matt H May 4, 2012 at 1:57 pm

This is a great resource. I’m also very new to wordpress and web design. Dream Host is Hosting my page. Can you tell me if I need to install code editing software from DreamHost to my website server? Would the website server be DreamHost?

Reply

Omkar June 4, 2012 at 1:07 pm

Thx a lot for this tutorial..
its very useful for us.

Reply

rb saud July 6, 2012 at 10:09 pm

this one explains how to display blog in a separate page
http://www.itwebtalk.com/how-to-create-a-custom-template-for-blog-post/

Reply

LUCTRANQUOC July 29, 2012 at 6:15 am

It’s useful!
Just did it. :D

Reply

Vincent Marketing Mentor August 17, 2012 at 12:55 pm

such an easy code addition but have never really required the custom page my theme rocks :D but with the addition to clickbank checkout for my product this was perfect.

killer custom page template for wordpress
thanks

Reply

Pancho Wilkins September 2, 2012 at 6:24 am

Hi Don.

I can follow your instructions easy enough, but when you say ” you have your header and footer, and now you can add any code to fill the page and show a simple line of code starting ‘id div’ ? you lose me completely. I can’t write php / css code.

I am trying to adapt the Proton free wordpress theme into a serious business website and not a blog. It has limited page templates. Default or portfolio. I want to add text blocks to the portfolio page but the template won’t let me ?, so I thought your advice on creating a custom page might be the answer, but having seen your video etc I know I can’t even begin to adapt it myself. What would you suggest I do?

This is the theme…http://www.intenseblog.com/wordpress/theproton-brand-new-free-premium-wordpress-theme.html

I can email you some screen shots of what I am trying to achieve with a few partially populated pages annotated to show the problem areas, if you would be prepared to have a look?

Failing that, is there a wordpress theme for a similar elegant business website
which you would recommend that already has all the features that are required?

Reply

Don Campbell September 4, 2012 at 9:15 am

Hi Pancho,
I’m not familiar with that theme, but if you are not comfortable with making some coding changes to the theme then you probably should try to find a theme that is closer to what you need the end result to be.

I have created a business theme called the SmallBiz Theme that might be a fit – depending on what you want it to look like when you are done.

Reply

Andy Dill September 13, 2012 at 5:43 pm

Wow! What a fantastic post! I’ve been working to design custom wordpress websites, and posts like this are great!

Reply

Naushad September 15, 2012 at 3:19 am

Thanks, this was helpful.

Reply

Abid Ali September 19, 2012 at 4:47 am

Thanks dear! Much helpful post. Good work.

Reply

Cayden September 28, 2012 at 3:44 am

Excellent article. Keep writing such kind of info on your blog.
Im really impressed by your blog.
Hi there, You’ve performed an incredible job. I’ll definitely digg it and individually suggest to
my friends. I am sure they will be benefited from this site.

Reply

Pawel October 18, 2012 at 1:48 pm

Hi, thanks for this great tutorial. I just have one question, I’m building my own theme from scratch, I would like to have options to add custom templates for some pages, what do I have to add tomy theme files to make it possible? At the moment I don’t see the option to choose custom page template on the right menu in the theme I’m building. I see it in all other themes for example in tventy eleven but not in mine. Do you know what may do the trick?

Reply

Social Media Marketing October 23, 2012 at 2:10 am

Thanks for sharing such interesting info.
Regards
Robert

Reply

santhanaraj October 29, 2012 at 9:19 am

hi
its very nice and very use for me

thank you

Reply

crika November 1, 2012 at 8:42 am

Thanks for help me ! I tried and work perfectly. My problem is to give to this new page a different style.css. In the code I can’t see the name of the css, so how can I do? Hope you can help me again ;)
Crika

Reply

Shazia November 27, 2012 at 4:18 am

Helpful on my page thanks

Reply

Millie Barnes January 20, 2013 at 6:01 am

Don,

You lost me when you wrote “To create a WordPress Page Template, you’ll need to use your text editor. Go to the directory on your server where you installed WordPress, and then navigate to the directory of your theme. Usually that looks something like this: “/wp-content/themes/default” where “default” is your theme name.” I’m not sure where to find that, am I looking in Windows Explorer, within wordpress? Not sure what you mean by I will find it “on my server? Help, please!

Reply

Neil from Beachwood February 5, 2013 at 9:22 pm

Millie: The “server” is the hosting service where your site’s pages are stored. You can create the file with Notepad, and then upload it via ftp to the host.

Or your host may provide a control panel which you can use to upload the file.

Reply

Tim February 4, 2013 at 7:01 am

Cheers Don that’s really helpful. I recently started using WordPress as a solution for some clients due to how quickly you can load a nice looking website. This is a handy bit of information to know.

Thanks for sharing.

Reply

Sanja February 14, 2013 at 7:24 am

Thank you Don!
These instructions are very helpful!

Reply

Wacky June 8, 2013 at 8:56 am

Great tutorial, I am new to WP and this is exactly what I was looking for.

Thanks

Reply

Lukas June 27, 2013 at 4:57 am

thank you man, great tutorial!

Reply

Paul August 8, 2013 at 12:36 am

Is there no easier way than this? Everyone makes websites on wp these days and they don’t look like blogs! Thanks for post.

Reply

Priya August 22, 2013 at 3:15 am

Hi i have a webpage done in html i need help in converting it as a wordpress theme. Please anyone willing to help mail me at the earliest

Reply

Marketing Expert August 22, 2013 at 2:21 pm

for a cost my friend i can make this happen asap, let me know.

Reply

Lindi December 3, 2013 at 2:38 am

Nice one! So easily done. Cheers for your help..

Reply

MIT Bureau December 11, 2013 at 6:30 am

very nice written.. it is very helpful… i am trying to make my website http://mitbureau.com in wordpress ..thanks

Reply

johar December 12, 2013 at 6:12 pm

Greate post, your tutorial very useful and clear, thank

Reply

Lakeside Techies January 17, 2014 at 3:08 am

Thanks for this quick tip. It did the job.

Reply

Multi Biz January 19, 2014 at 2:02 pm

Thanks For such a nice article. I keep working on wordpress and this article helped me a lot

Reply

Gabor Sziladi March 10, 2014 at 4:26 pm

I am trying to make a custom template for my site,i hope your tutorial will help me.It has to be pulling a lot of data from the post.
Thank you in advance

Reply

Adi Ionut March 17, 2014 at 5:32 pm

Thank you very much for this post/tutorial. :)

Reply

Mehmood March 28, 2014 at 2:33 pm

Thanks simply awesome. Great article.

Reply

Khalid May 18, 2014 at 4:03 pm

Very simple and useful, thanks a lot for this sharing :)

Reply

Nick May 24, 2014 at 10:26 am

Hi! Thank you very much for this explanation. Also, I’m having the same problem as crika. I have to give this new page a different style.css. How do I do this?

Reply

Leave a Comment

{ 11 trackbacks }

Previous post:

Next post: