Video: Make WordPress Look Like a Website

by Don Campbell on January 2, 2009 · 54 comments

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!
 
 

{ 6 trackbacks }

How To Create A Custom Page Template In WordPress | The Expand2Web Blog
January 2, 2009 at 2:46 pm
Recommended Reading - January 3, 2009 | hcidreflections.com
January 3, 2009 at 4:13 am
What's the best free website builder? - Virtual Coach Income Fitness Community Forum
April 26, 2009 at 12:27 am
How To Make Your Blog Look Like A Website « How To Make Money Online
June 16, 2009 at 5:50 pm
WordPress Website vs Blog - What is the Difference? | The Expand2Web Blog
October 10, 2009 at 5:59 pm
Using Wordpress as a CMS « Web Design Basics
December 30, 2009 at 12:14 pm

{ 48 comments… read them below or add one }

1 Jami January 2, 2009 at 5:50 pm

good video, but are you using wordpress.com or wordpress.org?

Reply

2 Don Campbell January 2, 2009 at 9:26 pm

@Jami – thanks. I used a self-hosted WordPress installation (WordPress.org) for this video. As far as I know you cannot do this level of customization on WordPress.com, because you don’t have access to the file system.

Reply

3 ulaga January 18, 2009 at 11:11 pm

Vow! great .. Nice post.. Actually i was wondering in this type of issue.

Reply

4 lawrence January 29, 2009 at 3:32 pm

thanks for this, it was great

Reply

5 Stacey February 2, 2009 at 11:41 am

Hi, this video is great. I’m attempting a university project and we are using Wordpress running off of their server. I cannot find any way to design a template. We are using .org, but through the uni. To be able to design my own templates should I pay for .org myself?

Thanks

Reply

6 Don Campbell February 2, 2009 at 9:27 pm

@Stacey – if you have access to the server, you can get a WordPress theme and upload it to the wp-content/themes directory.

Then you can go into the WordPress Admin panel and change the themes as much as you want.

Does this answer your question? If not let me know!

Reply

7 Rob March 2, 2009 at 7:42 pm

High Don I am struggling with this exercise. I am using WP2.71 so the options are a little different. My first issue is that I can’t find the “custom page templates” plugin that you use to select “cover page.php”.

Can you point me to the right location to get this template?

Thanks
Rob

Reply

8 Don Campbell March 2, 2009 at 9:19 pm

Hi Rob – the Template drop-down is on the right hand side of the screen under the Publish Button when you are editing a Page in WordPress 2.71 – see this screenshot.

To get your page template to show up, you have to create the .php file like I describe in this post.

Does that help?

Reply

9 Rob March 3, 2009 at 8:25 pm

It would help, but for unknown reasons I don’t have the template dropdown menu as an option when I am editing a page …? The only options I have are Parent and Page Order.

Reply

10 Don Campbell March 3, 2009 at 9:42 pm

Hmm… That’s strange Rob. Try switching to another theme (like the default) and then back again. Then see if the page template dropdown shows up.

Reply

11 Vanelli March 13, 2009 at 3:48 pm

Great video.
Is there a way to add a custom database to a template. What i want to do is create a dynamic page (from a custom table) that will display information for seminars. Then have another dynamic page that handels sign ups..

thanks

Reply

12 Bob May 2, 2009 at 8:14 pm

To get the template dropdown to display, you MUST have a template in the theme directory. This – and any other – template must be properly identified through its header (// Template Name: My Template).

Once you have that, everything works as it should.

Reply

13 Clark Smith May 6, 2009 at 3:05 pm

Great Post! I have been trying to remove all the blog stuff and make a website with the backend of Wordpress. My only problem now is I have find 2 templates, one for the theme and a template for my home page. Thanks for the info!

Reply

14 Jarvis Restoration May 8, 2009 at 12:25 pm

Great Article, Is there a way to do this but keep the sidebar and just have a custom middle section? I like the sidebar because my template has some nice pictures that make the website look more professional instead of just keeping the header. Thanks!

Reply

15 Don Campbell May 9, 2009 at 7:58 am

Thanks @Jarvis Restoration!
Sure, to include your sidebar just add

< ?php get_sidebar(); ?>

to your page template php file.

Reply

16 Jarvis Restoration May 12, 2009 at 12:53 pm

Exactly what I wanted! Thanks a lot for your help. You have a lot of great articles. I’m new at wordpress but learned a lot from just your site!

Reply

17 Tiffany Bown May 14, 2009 at 11:07 pm

This is exactly what I want to do, but have rather fallen at first hurdle as cannot even find how to access the content directory! I have just installed WordPress v2.7.1 via Blue Host. Could you please point me in the right direction? Thanks. Tiffany

Reply

18 Don Campbell May 15, 2009 at 7:07 am

Hi Tiffany,
This is a place where most people get stuck. You need to use an FTP program to access the content on your server. This video shows you how to set up and use an FTP client for your BlueHost account.

I hope this helps!

Reply

19 Dr. Spinner Dentist May 18, 2009 at 10:52 am

You have great articles on your site. I installed wordpress on my server and I am customizing my site. I am using GoDaddy. It is a bit slow, what hosting company do you recommend for wordpress? I have heard Godaddy isn’t the best but they are pretty cheap so I tried them out…

Reply

20 Tiffany Bown May 18, 2009 at 11:08 am

Thanks, I have now managed to install the ftp client and access the wp-content file. I have four questions. Firstly, if I create a new template with a page cleared of side bar etc, that means I need to know html (I don’t) to make the new page, right? Secondly, if I install a theme like the chiropractor theme, then I can just make all changes with wp text editor etc without needing to write html, right? Thirdly, are there lots of other website (rather than blog) themes available (and, if so, where?), as I just want to create a simple site for renting out a property, for which I do not think the chiropractor theme is suitable? Fourthly, if there are not other such themes available but I want to avoid working with html, do I just need to keep the blog-like sidebar and use wp text editor? Thanks very much. Tiffany

Reply

21 Don Campbell May 18, 2009 at 11:08 am

@Dr Spinner – thank you!
I like BlueHost for WordPress hosting. They make installing WordPress super quick and easy, and have great customer support. They are also priced competitively at $6.95/month.
I hope this is helpful. Let me know if you have any other questions about this!

Reply

22 Karlo May 26, 2009 at 11:06 am

Great video, very helpful. I’m thinking of converting my current website to a WordPress site. I currently have Blue Host and WordPress installed in a directory within public_html. I want to start creating copies of my current site’s pages into the WordPress installation, but when I’m finished, how would I go about transferring the files to the main directory and overwriting the original non-WordPress site? Thanks for any advice!

Reply

23 Don Campbell May 26, 2009 at 9:22 pm

@Tiffany – that’s true, if you use a custom page template you will need to do some basic HTML to edit the content.

If you’re looking for a small business website, the SmallBiz WordPress theme I created might be a good option for you. It looks like a website rather than a blog, and has a custom options panel that allows you to change details of your business and many other things on the home page and elsewhere on the site without doing any coding.

Reply

24 Don Campbell May 26, 2009 at 9:25 pm

@Karlo – Thanks!
Here are the steps you can take to move your WordPress installation from a sub-directory to the main directory of your site: Moving WordPress.

I’ve done this a bunch of times before, so let me know if you get stuck or need help.

Reply

25 Page June 3, 2009 at 12:46 pm

Great video, a lot easier to understand than readin a bunch of text and coding!

Reply

26 Andrea June 22, 2009 at 12:02 am

Hi Don

Thanks for all the info. I would like to customize my website like you said, but I need to learn the Html and PHP, I can do that but not now, as I owuld like my website quick. Now I look at your small biz theme. My question is for teh blog, then with that theme can I add teh side bar, with links to other websites and advert of products, or teh blog will follow the same template as the whole website?

Thanks
Andrea

Reply

27 Santanu June 22, 2009 at 5:10 am

i am new to wordpress and this tutorial really helped me a lot but i need to know one thing is that how can i create a ligin form and how can i connect it with database which will check whether a user tries to get in my website registered or not.

Reply

28 Don Campbell June 23, 2009 at 8:49 pm

@Page – thank you!

@Andrea – My pleasure! Yes, you can easily add items to the sidebar in my SmallBiz theme. It is “widget enabled”, meaning that you can add any number of pre-defined widgets, or your own widgets, to the sidebar without coding. You do this in the WordPress Admin, and here is a video that shows you how.

@Santanu – thank you for the feedback! Yes, this is a built-in feature of WordPress. You can require users to have a userid and login in order to see your blog, or in order to comment on your blog.

Reply

29 Greg July 17, 2009 at 8:44 pm

Being a conventional web designer I have mostly used frontpage and notepad to design webpages I recently have discovered wordpress and can see how it will solve several design problems that I have recently encountered. I followed your video instruction and have found it to be very informative. I have one problem that I am hoping you can point me in the right direction. I would like to remove the top menu format that is being generated by wordpress and replace it with one of my own but cannot figure out how to do this without losing the background theme. which disappears if I
remove

Thanks for the outstanding video instruction!
Greg

Reply

30 Greg July 17, 2009 at 8:48 pm

Oh URL for website in question is http://robytech.com/wordpress/

Thanks again
Greg

Reply

31 Don Campbell July 17, 2009 at 9:03 pm

Hi Greg – which WordPress theme are you using?

Reply

32 Greg July 17, 2009 at 9:10 pm

Hi Don,

The WordPress theme is Pixeled 1.9.1 by sam

Reply

33 Don Campbell July 19, 2009 at 12:29 pm

Hi Greg,
I’m not familiar with that theme. You’ll need to dig into the style.css and header.php file in the theme directory to hide or remove the navigation menu. Sorry I can’t be more specific but I don’t have any experience with that theme!
-Don

Reply

34 Sunnie July 19, 2009 at 5:50 pm

Dear Don,
Thanks for this video. It is just what I was looking for. Question: can you put a video or DVD up on this website? If so, how do you do it? I created a DVD using Final Cut Pro. I exported it to a Quick Time Movie, and from that I made a DVD. Do you know how I can get this onto this type of website?

Thanks very much,
Sunnie

Reply

35 Don Campbell July 19, 2009 at 8:34 pm

Hi Sunnie,
The best thing to do is upload your Quicktime movie to YouTube or Vimeo, and then grab the “embed” code from that service. Then you can easily post it on your blog.

Reply

36 Dan August 5, 2009 at 9:12 pm

Don,
Thanks for the tips on how to create a static home page in WP and how to make it look more like a website. After you create the WP Custom Page Template, cover_page, taking out the side bar and title, how do you keep the navigation and then customize the content of the page if you don’t know how to code php? I know HTML and CSS, but haven’t ventured into php yet.

Thanks,
Dan

Reply

37 David August 13, 2009 at 9:54 pm

Hey Don,
I wanted to thank you for this tutorial. You did a good job at explaining it in simple terms and in enough detail I think people can follow.

I’ve been wondering about this myself, but the instructions on how to create new pages are a little vague.

Thanks again.

Reply

38 mlc September 1, 2009 at 3:55 am

Cool man, some really good wordpress tips :)
added you to my favorits

Reply

39 Rem September 8, 2009 at 4:36 pm

Hi Don,

Thanks for the tutorial.
I followed all your instructions on how to create custom cover page template but I don’t see it on the drop down menu. I only have Default Template, Archives, and Links. I am using WP2.84. Could that be the problem.

The way I save the file, I open up one of the existing files on the wp_content/themes/default using WordPad and then saving as “cover_page.php”. However, the Save As file type shows as “Text Document”. Could that be another problem?

Thanks for all your help.
Rem

Reply

40 Don Campbell September 8, 2009 at 5:04 pm

Hi Rem – you bet!
Custom Page templates work in WordPress 2.8.4 so I don’t think that is the problem. You need to make sure the file extension is .php and not .txt.

Also, I’ve seen it before where you have to switch back to the default theme, and then back to your theme again to make it show up in the drop-down.

Give that a try and let me know if it helps!
-Don

Reply

41 diana September 13, 2009 at 6:41 pm

hey don,

you are such an amazing help. thank you so much for your video and upkeep with comments. i am wondering if i can modify my wordpress theme as much as you discuss here, if i get my wordpress hosting from godaddy not wordpress itself? i can see some, but not all, of the similar displays that i see in your video. i want my blog to appear more like a business website, but don’t want to erase all my other pages assigned in the template while creating a better looking homepage…how can i do this?

thanks,
diana

Reply

42 Don Campbell September 13, 2009 at 9:39 pm

My pleasure Diana – thanks for the comment!

You actually have more options with your theme if you self-host it with GoDaddy or Bluehost than you do if you are on WordPress.com. (I prefer Bluehost, because they have the WordPress installed dialed-in.)

If you create a page template and use that you won’t lose your other page content. I’ll be glad to help – just let me know where you are at in the process so I can give you some better guidance.

Reply

43 diana September 14, 2009 at 10:19 am

im not sure where to find that coding section that you used to create the new page? i also dont see the templete selection drop down at all in my page editor?

thanks, diana

Reply

44 V November 7, 2009 at 5:30 pm

Can you please write the code because I’m getting “Parse error: syntax error, unexpected ‘?” messages. I must be typing something wrong but I can’t make out the characters in the video.

Reply

45 Don Campbell November 7, 2009 at 8:09 pm

@V – I’ve shared the code in this post – How to create a custom page template in WordPress.

Reply

46 jefferson city chiropractor December 9, 2009 at 5:27 am

that’s look kinda impress me with what you do in your blog that looks like a website. So tell me how would i able to do that.

Reply

47 shannon December 28, 2009 at 9:08 am

thanks for the video. I have will have to try think on my blog site. thanks again.

Reply

48 ratz December 28, 2009 at 6:33 pm

i only wish that was applicable for Hebrew template
there are 2 few of those and the one that exist look
like ****… i tried converting some but they
get messed up in internet explorer (that dam browser)

thanks for the detailed video its cool

Reply

Leave a Comment