Video: Make WordPress Look Like a Website

by · 106 comments

email

This video walk-through is a follow-on to my recent post How To Create a Custom Page Template in WordPress. In the video, we’ll walk through how to create a WordPress Page to show up as the default for your website (instead of the standard list of blog posts.)

Then we’ll take it to the next level and customize that start page by removing the title and sidebar so that you can completely control what shows up on the home page of your website.

Check it out and let me know if you have any questions in the comments below!

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).

See my disclosure about advertising and affiliate links

{ 98 comments… read them below or add one }

George July 2, 2010 at 8:59 am

Hi,

I like your tutorial and just started understanding Wordpress.
I have created a test website first as a static website for business.
What I like to do now is create a Gallery where I can post pictures and videos but at the same time have a Blog.

Basically my menus are like this:
Home | About Us| News | Blog | Gallery |Contact Us

I can’t seem to create a Gallery for my photos and videos that acts like a blog and a Blog at the same time.

I wonder if this is possible for wordpress themes

Reply

Don Campbell July 2, 2010 at 10:09 am

George,
Thank you! WordPress has a nice photo gallery feature built in that allows you to post pictures. Here is a video tutorial – How to Create an Image Gallery . And here is a video that shows you how to add a video to your home page.

Reply

mark compton July 16, 2010 at 4:18 pm

Hi,

Thanks for your video on adjusting the page templates for pages.
I think I got most of it, but didn’t have any luck in it working.

I’m assuming it’s something minor with my code transcription, as aspects of yours didn’t show clearly in the video when I viewed it and I’m unfamiliar with what might be common to others. The result was the option to change templates didn’t show in the page theme window.

Here’s what I copied down from you:
<?php
/*
?Template Name: Cover Page
*/
?=

I think I got all the other steps. If you could give a quick tip that would be great.
Thanks,
Mark

Reply

Don Campbell July 18, 2010 at 5:01 pm

Hi Mark,
Take a look at this post – WordPress Custom Page Template with No Sidebars – it includes some actual code for a page template. If you compare that to what you’ve got that should help.

Reply

Allen September 7, 2010 at 5:26 am

Thank you very much for the video. Just been scouring templates to make WP look like a webpage and you’ve saved me the time.

Thanks again!

Allen

Reply

Catherine September 13, 2010 at 6:16 pm

Thanks for posting this video. I’m having a problem, though, in that neither dreamweaver nor coda is allowing me to put cover_page.php in my remote server? Any suggestions?

Reply

Don Campbell September 13, 2010 at 6:56 pm

@Allen – you bet! Thanks for leaving a comment.

@Catherine – I use Coda quite a bit – what kind of problem are you having posting to your remote server?

Reply

Aron Davis October 3, 2010 at 10:54 pm

Is there any way that I could customize the inside part using HTML and CSS?
I would like the home page of my site to have easily editable info like a blog, but I still would like to keep to look and feel of my site.

Thanks!

-Aron

Reply

Don Campbell October 4, 2010 at 6:46 am

Hi Aron,
Sure – Just follow the steps in this video to create a WP Page that you can edit and assign it to the home page. While in the WP Editor, you can choose the HTML tab.

Another way to do it is explained here, in a WordPress Page Template that You Can Edit

Reply

Elsa October 15, 2010 at 12:43 pm

Hi Steve, very useful tutorial. I have one question, on my site when I create a new page and set it as the front page, it does not replace the home page that already exists from the theme I picked. Instead I end up getting 2 tabs which lead to the same page basically. How can I get rid of this and make the home page static as well?
The “home” page I’m talking about is not listed on the pages list for some reason…

Reply

Elsa October 15, 2010 at 2:06 pm

nevermind I figured it out! sorry for posting a noob question.

Reply

Don Campbell October 15, 2010 at 2:08 pm

Absolutely no problem Elsa. I’m glad you’ve got it working!

Reply

Chris October 19, 2010 at 9:23 am

Does this also work on FREE Wordpress websites at wordpress.com, or just on full installations that are installed on a server? I don’t see the file structure listed anywhere on the free site (I’m new to this) as you show in your video.

Reply

Don Campbell October 19, 2010 at 10:08 am

Hi Chris,
Sorry – this only works with self-hosted (WordPress.org) sites, not on WordPress.com.

Reply

kay October 30, 2010 at 12:15 pm

Hello,
Thank you for this info it is great for new wordpress users. I have done everything you said in terms of creating a new page template, putting it in my template directory etc. and it is showing up in the that particular theme’s directory on my server. However, it just won’t show up in Wordpress as a template option. When I go to the template editor it is not listed with the other .php files either.

Any idea what I should do. I am using Wordpress 3.0.1
Thanks in advace.

Reply

Don Campbell January 24, 2011 at 9:32 am

@kay, make sure that you’ve added the header to the file that identifies it as a page template. For example:
< ?php
/*
Template Name: No Sidebar
*/
?>
Identifies it as a page template.

Reply

Jose January 13, 2011 at 6:06 am

Hello Don,

Thanks for having so much resourceful information on your website. I’m a newbie to WordPress and I was wondering how do I edit the web page that I built like in your “Cover Page.php” example so I can add content to my site.

When I open up the page to edit/add content, the editor does not display anything of what I just designed but the code is all there when I look at the source.

Thanks in Advance,

Jose

Reply

Don Campbell January 24, 2011 at 9:35 am

@Jose – How are you editing the .php file? Are you using an FTP client and creating a new file?

Reply

Tropper January 23, 2011 at 10:23 pm

problems with page template are:
1. will not seotize via seo plug ins (i.e (all in Seo)
2. when update to newer version of WP, them template may get effected in terms of font displays along with other issues.

Reply

Don Campbell January 24, 2011 at 9:38 am

@Tropper,
It depends what you put in your page template. You can include anything, for example if you include the WordPress header in your page template, it will work with the SEO plugins.
Also, I’m not sure what you mean that WP upgrades could effect the font display in pages created with the template. I have not seen that; but I want to make sure I understand your point. Do you have an example?

Reply

Jasa January 31, 2011 at 11:04 pm

That was really helpful bud.. Thanks for sharing.. Nowadays there is a default template in the create pages section named ‘one column, no sidebar’. This option means that we neednt do any php work anymore. :)

Reply

Elaine February 2, 2011 at 3:08 pm

Dear Don,
I really appreciate your wonderful articles and videos – its exactly what I’m trying to learn to do for my website!
I’m a complete novice, so please bear with me. I do not know how to access the directory that you edit the code in. (I use a PC)
Many thanks,
Elaine

Reply

Don Campbell February 2, 2011 at 10:45 pm

Hi Elaine,
Thank you!
You need to use an FTP program and edit the file on your host (not the PC.)
Do you know how to use FTP?

Reply

Elaine February 3, 2011 at 9:17 am

Don,
I do not know how to use FTP. I use Blue Host to host my website. Maybe that is something I need to learn.
Meanwhile, I found a friendly theme that allows me to easily show or remove sidebars.
I will definitely bookmark your site – a real asset to small business owners like me! Thanks again!
Elaine

Reply

Don Campbell February 3, 2011 at 9:24 am

Hi Elaine,
Good, I’m glad you found something that will work for you. My SmallBiz WordPress Theme also allows you to remove the sidebar without any coding, and it comes automatically with a home page rather than a list of blog posts like most themes have. It’s designed to make setting up small business websites easy.

Reply

Frank Tibbetts February 16, 2011 at 8:13 am

I have been using DNN exclusively for projects but am branching out into WordPress because of the cheaper hosting when cost is a big factor. Can what you are doing be done with no coding?
Thanks,
Frank

Reply

Don Campbell February 16, 2011 at 8:22 am

Hi Frank,
Yes, the SmallBiz WordPress Theme is set up with a home page that displays business information instead of a list of blog posts. It also has a No-Sidebars Page template by default (some other themes have this as well.)

Reply

Sylvia Mallonee April 24, 2011 at 5:21 pm

Hi Don,
I enjoyed your tutorial and I have finished creating my website, but I have a quesiton. I am a novice at this and now that I have all the pages I want, I can’t seem to find my Blog. You stated in your tutorial that I could move my blog to another part of my site – how do I do that?
thanks for your help.
Regards,
Sylvia

Reply

Don Campbell April 25, 2011 at 1:58 pm

Hi Sylvia,
All you need to do is create a new page in WordPress, and assign it the “List Posts” page template (see this screenshot.) Then this page will become your list of blog posts.

Reply

Norwegian May 21, 2011 at 6:51 pm

Did they remove the “Advanced options” im currently using Wordpress 3.1.2 And i cant seem to find advanced options to for example disable comments and other things :( ((

Reply

Amita Shrestha June 17, 2011 at 10:27 am

hi don campbell, thanks for the video tutorial..if i have any questions then i’ll surely contact you

Reply

Irene August 14, 2011 at 11:56 am

Your tutorials are very informative and it is helping me understand Wordpress more. I have a website currently that someone else set up for me. The hosting is through Go Daddy and I have Wordpress on it so that I’m able to make changes / updates. The problem I am having is that there are a couple pages I can’t seem to access. One of the pages is the home page but it is not in the list of my pages on WP. I’d like to periodically make changes to my home page but can’t seem to find it to make those changes.
The other page is one that I can get to if I want to edit, but none of the content is there for me to edit (although the web page shows up fine). Any reason for this or any tutorials you can direct me to? Thanks, in advance…

Reply

AJIT BHANDARI August 19, 2011 at 7:50 am

How are you editing the .php file? pls describe it

Reply

Irene August 19, 2011 at 4:31 pm

Please forgive my ignorance but I am unsure how to edit the .php file. Someone else had set the site up for me. I am able to access most of my pages through wordpress and I am able to access my godaddy account but I have no idea how to access my website files in godaddy. Actually, I can see the files in godaddy (again excuse my ignorance…this is very new to me), but no idea how to open them to view, edit, or anything. Someone suggested I install filezilla, which I did, but have not figured out what I need to do.

So, I will describe what I can do in wordpress and hopefully I am answering your question.

Through my wordpress account, I can go in and see most of my pages and edit those by hitting “edit page”.
From there it takes me to the Edit Page for that page where I am able to make changes…
but for some reason, I can not see any content on this “Edit Page” page for ONE of my pages – I am unsure why I can edit (and see) content on the other pages except this one.
The box where the content should be is blank (in both the visual view and the html view). However, this particular web page is viewable when I try to view it by hitting “view page”from wordpress or if anyone were to hit that page while viewing my website.

The other issue is my home page. It is not listed in my list of pages in wordpress. The page is viewable doing a regular internet search but I can not see it in my list of pages nor can I edit it or view it through wordpress.

I would think I could access the content through wordpress for these 2 pages in question but obviously have not figured out what I am doing wrong and why it would be any different than the other pages I am able to edit. And, I would think I could access the content through godaddy to make changes but in the end, no luck.

If you could offer any help, I would appreciate it. If you need further information, please let me know. Thank you.

Reply

Don Campbell October 11, 2011 at 6:11 pm

Irene,
It depends on how your page template was created. If you create it like this – a WordPress page template you can edit – then you can still use the WordPress visual editor to edit the content on the page.

Reply

?mieszne gify September 13, 2011 at 12:09 am

I really enjoyed your article. You should write more about that topic.

Reply

waqar October 8, 2011 at 3:01 pm

Sorry if its a stupid question i really need to work on wordpress, today was my first day at bloggin and i made http://freelancingideas.wordpress.com/ and Steve i have questions for you, i really undertand and liked you tuturial , i was just worndering do you have any video where you are trains noobs to start work on wordpress and can u tell me what is difference between wordpress.com and .org………….. both of them free or not ? i started working on .com and i made 2 pages and they look to great i also added video and all…any one can help me thanks you so much.

Reply

Don Campbell October 11, 2011 at 6:13 pm

Waqar – here’s an article that describes The difference between WordPress.com and WordPress.org.

Reply

American Fork Dentistry November 4, 2011 at 1:13 pm

I’m amazed with how many websites are actually Wordpress blogs. I especially love the easy editor option of Wordpress.

Reply

PilmariG December 20, 2011 at 11:26 pm

Hi there Don …
Can you please tell me how to write some extra notes on your home page if you want to show posts after that. I want to add a slogan that will show only to the homepage and before the posts right after the nav bar. I am using thesis theme for that. Thank you in advance.

Reply

Don Campbell January 6, 2012 at 4:24 pm

Hi PilmariG – you can do that but you’d need to add the extra notes to the top of your page template. This video shows you how to make a custom page template in WordPress.

Reply

natalie December 21, 2011 at 2:14 pm

Hi Don

I’m totally useless with wordpress. I just created the webpage the other day and followed the above tutorial to make my main page static, however on the 2nd part of the video i noticed on the “home” page you scrolled down you show “advanced options”. i don’t have that, how do I get it?

Also, I didnt understand where you were going on your computer to insert your written code. is there a program i have to download to do that? you said, “navigate to your content directory”. lost me :(

Any insight you can provide will be very appreciated.

-Natalie

Reply

Don Campbell January 6, 2012 at 4:29 pm

Hi Natalie,
If you want to create a custom page template in WordPress, you’ll need an FTP program so that you can navigate to the directory where WordPress is installed on your host. I was using a tool called “Coda” in the video, but there are many free FTP programs.

Reply

Roscoe Greco January 6, 2012 at 3:16 pm

Hi. Just simply would like to place a quick note and question where you grabbed your particular blog page layout I will be creating own weblog and tremendously really like your theme.

Reply

Don Campbell January 6, 2012 at 4:30 pm

Thanks Roscoe,
Do you mean the page in the video or on this site?

Reply

Karelia January 30, 2012 at 2:26 pm

hello, i have a cuple of questios, fist of all im new usis worpress, plis help me…

in what place or page can I’ll find the pugin for Add media? or…. what should a do to activate that part????

sorry about my english….

Reply

Leave a Comment

{ 8 trackbacks }

Previous post:

Next post: