Video: Make WordPress Look Like a Website

by Don Campbell on January 2, 2009 · 63 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!

{ 56 comments… read them below or add one }

Next Comments →

Jami January 2, 2009 at 5:50 pm

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

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.

ulaga January 18, 2009 at 11:11 pm

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

lawrence January 29, 2009 at 3:32 pm

thanks for this, it was great

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

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

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

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?

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.

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.

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

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.

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!

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!

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.

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!

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

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!

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…

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

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!

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!

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.

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.

Page June 3, 2009 at 12:46 pm

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

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

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.

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.

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

Greg July 17, 2009 at 8:48 pm

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

Thanks again
Greg

Don Campbell July 17, 2009 at 9:03 pm

Hi Greg – which WordPress theme are you using?

Greg July 17, 2009 at 9:10 pm

Hi Don,

The WordPress theme is Pixeled 1.9.1 by sam

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

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

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.

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

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.

mlc September 1, 2009 at 3:55 am

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

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

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

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

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.

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

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.

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.

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.

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.

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

Evan March 28, 2010 at 7:53 pm

Great video. Thanks. I would like to make my blog look exactly like my website including the look of my website navigation and header.

Is this difficult to do?

My site is http://www.signexpo.com
My blog is blog.signexpo.com

Sheila June 7, 2010 at 8:08 pm

I am new in all this matter. Could you help me to answer this question?
How can you change the CSS in Wordpress? What does exactly means that?

Dean June 30, 2010 at 2:17 am

Hi Don, great tutorials. Am learning as i go with wordpress. Quick question, I have a site that is showing the | (pipes) bar before the title. I have checked everything on the site, and also the settings for all in one seo. How do I get rid of that? (hope am not off topic too much)

Thanks
Dean

Don Campbell June 30, 2010 at 7:40 pm

@Sheila, the CSS determines the layout and styling in your WordPress theme. To edit it, you’ll need to use an FTP program to go to the style.css file for your theme. You can also edit it while logged into WordPress, by going to the Appearance section and then choosing Edit.

@Dean, Thank you! This depends on the theme, and if you have any plugins installed to handle your SEO. But many times you can update this by going into your WordPress General Settings and changing the Site Title.

Next Comments →