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:
and assign your new custom page template to it:
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:
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!
{ 5 trackbacks }
{ 44 comments… read them below or add one }
Nice info! what i’d like to see next are some instruction on how to actually use wordpress as a website — to use your own template and style sheets to create a website in wordpress.
Followed the steps and everything worked great. I know there is a way to add a custom size to the page as well but having super issues writing the code on the custom page template. I am trying to frame another page at 800×600 and need the header and footer to stretch to the same dimensions. Any advice or a link where to go would be most helpful. Thanks!
This may sound dumb to those who know the answer, but anyhow:
What’s the use of making cover_page.php if pages that are based on it get over-ridden? How do I make pages with custom content that can be edited within Wordpress based on the cover_page.php template?
I suspect that is done in a more complicated way.
Thanks for any clarification
@Luly – Good question. To make pages that you would like to be able to edit in the WordPress editor, you can just create a WordPress “page” (vs post) and edit it using the rich text editor. But you will have your sidebar and page name, etc.
The only time you would use a custom page template is if you want to completely customize what is shown on a particular page (e.g. the home page of your website.) In this case, you might want to use the header and nav of your blog, but not the sidebar for example, and a custom page template allows you complete control over the content. The disadvantage is that you will be editing HTML to do this.
Does this answer your question? If not let me know!
…great!!!, but I have a question about it: can I do a custom page with different CSS? (by example, If I want a different background or header in my custom page)
Could you explain me how can i do this?
Thanks
@jan – to use a different header, you could choose not to include the < ?php get_header(); ?> in your custom page template, and provide your own code there.
At this point you are essentially editing an HTML file and including your own content, or content from the blog using WordPress code snippets. So you could specify your own CSS stylesheet for the page as well.
How can I add an image to this new “cover page” using, for exemple, Dreamweaver.
I have no problem adding some text, but when I add any image, I can’t see it in th site.
John – where are you putting the image? I usually create a images directory off the root of the blog for these images, or put it in the images directory for the theme.
Then you can reference it from your HTML in Dreamweaver. Check in your Dreamweaver site definition and see where it is putting the image.
Don – thanks for all the excellent advice! Here’s a follow-up to your answer to Luly’s question about making pages (using a custom template) that can contain content that can be edited in the WordPress editor.
Is there PHP code that can be inserted into the template that will pull content from the WP database?
I thought a simple
would do it, but content entered in the page editor doesn’t show up when the page displays.Thanks!
JohnMiller – you’re most welcome!
Yes, you can – this is the cool part. You can include any WordPress content you want in the page template.
For example, if you want to show you latest blog posts, you can add this code to the page template: (not in the wysiwyg editor, but in the page template php file itself)
< ?php if (have_posts()) : while (have_posts()) : the_post();?> < ?php the_ID(); ?>< ?php the_title();?> < ?php the_content('Read the rest of this page'); ?> < ?php endwhile; endif; ?>This WordPress Cheat Sheet has a list of the other WordPress functions you can call to add content to the page.
Brilliant, Don! Thanks for such a prompt and 100% helpful response.
The last par of my previous comment should begun “I thought a simple
should’ve done it – but you understood what I was asking anyway!
I had wondered about putting that in The Loop – but thought that because The Loop is testing for posts, that wasn’t relevant to pages. I guess in WordPress any content is a post – even when it’s in a page!
Sorry, I didn’t allow for the PHP code I was trying to insert being interpreted as code!
Let’s try again:
The last par of my previous comment should begun “I thought a simple
[php tag] the_content[php tag]should’ve done it …I still can’t make an image appear at my cover_page template.
I have this HTML code:
The image is inserted in the “images” directory of the template, and nothing.
What can i do?
Don, I got it. Here are the key points I missed in the tutorial.
The template option only shows up in the classic theme view.
The file cover_page.php needs to saved in the themes directory of each theme you want to use.
When you ftp the file into the theme directory double check the file extension. In my case the file extension was still a .txt file, so I had to manually delete the .txt extension.
Now its up and just need to create the html. Check it out and be my first vistor.
http://www.mobilelandscapingpro.com
Nicely done Rob – I like your site!
And thanks for coming back and sharing your findings with everyone.
Here’s another quick tip (maybe you already know this) – you can change the order that your pages show up on the Nav menu by changing the value in the Order field just below the template drop down when editing a page. Lower numbers show up to the left, with higher numbers to the right.
Don-
Is there any way to remove the page title with out doing the custom page? I want to be able to edit the page in the WP editor still. There must be some line of code or something somewhere that needs to be tweaked, I have searched and searched to no avail online for an answser. Thanks much
Hello,
I have followed this tutorial and the tutorial at http://wordpress.org/support/topic/268730 but when I go into to choose the template – I don’t have the Page Template drop down list as you have screen grabbed above. It’s not that my new template isn’t appearing – the option is not there at all. Is this something to do with the fact that it is not a default theme? If so is there a way to add a new template using a bought theme?
Much obliged for any help!
Hi,
I am not sure if this has been answered, but when this happens, it can be resolved by reactivating the theme that you are on. Not sure what the issue is…maybe a bug in WordPress.
Thanks
Dean
Thanks for sharing the info. However I’m not to fond of the plain WP page. Can you still do the same thing on a different template like lets say you have a template from freewordpresstheme and you want to use a custom static page from that but not have all the recent comments and such on the side bar. Maybe a video in the sidebar would be ok but nix everything else. Oh and a name and email capture in the side bar would be good too. Is a page like this possible? Thanks
@Sinead – Here is a link to a screenshot of where your Page Template drop-down list should be. While editing the Page (make sure your are editing a Page, not a Post), it should be on the right hand side of the page, and look like this screenshot.
Let me know if this doesn’t answer your question, ok?
@Dannah – absolutely. Just add this to your page template to include your sidebar:
Then use Widgets to include things like the opt-in form and other items that you want to include.
Here is a video showing how to add an Aweber opt-in form to your WordPress sidebar.
Thanks Don but nope – it ain’t there.
I made the new template and just uploaded it to theme directory. Am I missing a step? ( or steps!?)
P.S. I have Parent and Order on the right – just no Template.
@Sinead – I’ve seen this before. Go to Appearance and select a different theme, like the default one. Activate it. Then switch back to your theme and activate it. See if your page templates show up after doing that.
Hi again. Just to let you know. I did as you said and it worked! Though not until I cleared my cache. Unfortunately, although I now have the drop down I haven’t totally solved the problem. The page is blank. I was following this tutorial [http://wordpress.org/support/topic/268730] to get the Category specific results showing – so I suppose I need to go back there to ask for help
Thanks for your help though.
Hello, I was wondering if on your business website if you can embed a video on the left where the large picture is on the home page? Thanks
@Dannah, do you mean on the SmallBiz WordPress theme?
Yes, I’ve had several people who use the theme add a video to the home page instead of the picture.
You have to edit the .css, but it is simple and I can show you how. And videos can be added to any other post or page without any customizations.
Thanks for this great article. I’m new to WordPress, so this is very helpful. I do have a question. I’ve created the cover_page.php file as suggested, and I have it coming up on my web site. The problem is, before I created this page, I had two tabs at the top of my web site called “Home” and “About”. I now have three called “Home”, “About” and “Cover”. When I bring up the main web site, sure enough…the “Cover” page I created is shown. So when I click on “Home” tab, the “Cover” page is shown, when I click on “About” the about pages is shown, and when I click on “Cover” the cover page is shown again.
I see that I have only two pages, so “Home” must be a default somewhere. Is there anyway that I can have only two tabs… say “Cover” and “About”, or perhaps only “Home” and “About” (with home displaying the cover page that I just created?)
I’ve been around all the WordPress options and cannot seem to see anything.
Thanks
Hi Jason – thanks!
In your Reading Settings in WordPress, do you have it set to a static home page with your new cover page set to be the front page?
Also, if you go into Edit Pages is there a page called Home? If so, try setting that to unpublished and it should disappear.
Also, which WP theme are you using?
-Don
Hi Don,
Yes, I have the reading settings set to have a static home page, and this is set to “Cover”.
I don’t have a page called “Home”, so I therefore can’t set it to unpublished.
Could the WP theme template be creating this “Home” page? The theme I am using is: Piggie Bank 1.2 by Lorelei Web Design
Thanks for your help.
-Jason
I know this is a ridiculously basic question, but how do I “Go to the directory on your server where you installed WordPress, and then navigate to the directory of your theme.”
I’m using Bluehost, if it helps knowing that.
Thanks in advance,
Jesse
Jesse – good question, and yes knowing your hosting provider helps. In Bluehost, your directory probably looks something like:
/public_html/blog/wp-content/themes/themename
Where blog = the directory you installed WordPress in (or if you installed it in the root of your domain, then you don’t need this directory.)
And themename = the name of the them you are using. The default WordPress theme would be “default”, if you are using my SmallBiz theme then the directory name would be “smallbiz”.
Does this help? If not let me know.
Hi Don,
Fantastic posts so far. I had a fairly simple question but cant really find any information. When creating additional content for a wordpress “site” do you write posts or pages?
Can “pages” be pinged the same as a post would? Is there any advantage over using a post over a page?
Thanks!
Kawika
Good question Kawika.
Typically you would write new “posts” for your blog. Posts are considered “updates” or new information posted to your website. Pages are typically used for more static pages on your site, like the “About” page or “Contact” page.
There are no real advantages of one over the other as far as the search engines are concerned. Both can have trackbacks and pings.
I hope this helps!
-Don
Hey Don,
If I put the custom page template inside a directory inside the my theme’s folder will it still work. I plan on making a ton of these custom templates and don’t want them to appear on the theme editor.
Thanks
Hi Don,
I’d like the blog page to have a different header than the other pages, so I created a custom page template (called “Blog Page”) that calls a custom blogheader.php (with the new image). I also registered a new sidebar just for the blog page with different widgets than those on my other pages and added the different widgets in the WP admin. In the Pages edit menu I selected the blog page to edit and applied the “Blog Page” template from the drop-down menu on the right. But it’s not working. The blog page still looks the same as all the others. I’ve tried creating other completely new templates (all of which show up in the drop-down correctly) and applying them, but the pages are still using the default no matter what. What am I missing?
Thanks so much…
Follow-up with more info: When I change my Posts page (in Reading) to any page other than my current blog page, then go to the blog page, the template applies correctly. Is that what’s wrong? A Posts page won’t apply a custom page template?
Hi Don,
Excellent post.. You answered exactly what I needed to know…
For testing, I left the text as “Cover Page…” ,etc.. When I pull up the Home page, everything is as it should EXCEPT, the white background disappeared, and I simply have my text on a black ground…
When I tried to insert the following HTML:
The background doesn’t appear as white… Am I doing something wrong?
Thanks,
Pat
Hi Pat – thanks!
I can’t see the HTML you posted. Which theme are you using? Did you include the header in your custom page template?
How about plugins and addons for “static” WordPress created websites. Any suggestions? Most of the cool stuff out there is related to posts…
Don,
Just discovered all the information you have posted…I’m seriously $$ crunched and forced to a DIY creating my website and blog. If not so jammed I would pick up you website template…and probably will as personal finances improve…in the meantime, kudos to you for posting very helpful information!! And, also sorry, this is not the place for that but wanted to get it to you.
river
@riverrance
Well, I must say Don….. I’m hooked.
Wish I’d found your site a long time ago. I’m a bit of a tweaker myself but the amount of time that takes when you’re experimenting every step of the way (well, almost) is considerable. You obviously have the technical skills to understand the code PLUS the knack of writing clear explanations.
Bravo.
I’ve subscribed to your weekly newsletter and will be looking out for each issue.
Gary
@River – thanks for the feedback, I appreciate it. Let me know when you get your DIY site up and running, I always like to see them.
@Gary – thank you; that means a lot! Welcome, and I welcome your feedback too – if there is anything else you would like to see videos or tutorials on just let me know!
Don, This always happens to non-nerds like me: your advice: ‘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.” – assumes that I know how to get to the directory on my server and then how to navigate to my ‘Theme”. I called GoDaddy to see if they could help me find that directory, and they told me that you were probably referring to those who host with WordPress. Is that right? If so – then what are the instructions for those who don’t?
Also – on Themes – I went through the whole thing and did ‘install’ and received confiration that it had installed – yet my site still looks like the bare-bones ‘wordpress’ blue banner with words on it. What do I have to do to make the theme show up? Many thanks, Hamish.