"Don't Know Where To Start?"


No worries - click the link below and I’ll help you figure out what you should read and do first...


Getting Started with Expand2Web

How To Create A Custom Page Template In WordPress

by · 152 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.

If you enjoyed this article, get email updates (it's free).

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

{ 144 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

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

Leave a Comment

{ 8 trackbacks }

Previous post:

Next post: