Using WordPress to Build Small Websites: Step by Step Tutorial

Posted on by Richard

Update: This article has proven more popular than anticipated. If you find it useful, I would appreciate your leaving a comment as to how it could be made better. Also, any suggestions for other similar tutorials would be very welcome.

Recently I found myself – for one reason or another – having to build a number of small websites. The kind that have a home page, an “About” section, a “Products” (or services) section, a Contact page and a blog/news page.

A big requirement in building these sites was that it didn’t take too much time and that post-launch, the sites would be editable by somebody who’s not me. Enter WordPress.

I decided to try my hand at using WordPress as a Content Management System (CMS). It worked wonderfully and, being a process freak, I took notes which I’m now sharing here. So, here’s how to quickly build a basic website using WordPress as your CMS.

What you need:

  1. A web hosting service that supports MySQL databases and PHP
  2. Download the WordPress source code
  3. A WordPress theme like this one: Fresh
  4. Ideally, PHP and MySQL installed on your local machine for faster testing
  5. If you have your own custom design/stylesheet, try to prepare the HTML in the following way
    • Have a big “wrapper” div that encloses the entire page
    • Have a “header” div that includes the main navigation
    • The main navigation should be structured in a way so that the menu items are <li> tags
    • Have separate “footer” div that contains the copyright notice, credits, etc
    • Keep all the page content (article and sidebar, if any) enclosed within one “page” div
    • If your “page” div contains a main section and a sidebar, make sure the sidebar markup comes after the page content.

Step 1: Install WordPress

  1. Create a new MySQL database on your server (local or remote) and take note of the host, username, password, and database name.
  2. If you’re working locally on a Mac, your host name is likely to be “localhost:/tmp/mysql.sock”
  3. Unzip the WordPress source code into the folder where your website will be located
  4. Make sure the folder containing the WordPress files has permissions that allow anyone to “Read/Write”
  5. Navigate to the website URL in your browser, e.g.: http://localhost/~richardmuscat/newwebsite.local, and run through the install.
  6. If you’ve done everything correctly you will be given an admin password and asked to login. Make sure you copy the password. [Update: If you use the latest version of WordPress (v.3.0+) you should be able to choose your own password rather than be given a randomly generated one.]

Step 2: Setup Basic WordPress Settings

  1. When you login to your new WordPress account, the first thing you should do is click on your username (“admin”) on the top right and change your password to something more memorable than the random one WP gives you.
  2. Next, unzip the WordPress theme you downloaded and place it in the path: /yoursiteroot/wp-content/themes/newtheme
  3. In the WordPress control panel, click on the “Appearance” section on the left and activate the new theme
  4. Next, click on the “Pages” section on the left and add your website pages, e.g.: Home, About Us, Products, News and Contact. You can leave the pages blank for now. Make sure you click on the “Publish” button when saving the pages.
  5. Finally, click on the “Settings” section on the left and then choose the “Reading” sub-section.
  6. Set the first option – Front page displays– to “Static” page
    • Choose what you’d like to be your homepage from the drop down list.
    • Then choose which of the pages you just created – e.g. News & Events – you’d like to be your “blog” page that shows latest news, articles, events etc.
  7. Save your settings

Step 3: Customising your Theme

If you’re happy with the theme you’ve chosen, just go ahead and upload everything and you’re done! If however you have your own custom design for the website you will need to modify your chosen theme. Here’s how to do it assuming that you have an HTML/CSS version of your site’s layout.

  1. Open up your website in your preferred HTML editor, e.g. Dreamweaver or TextMate
  2. Navigate to the theme folder and open it up. You should have a bunch of PHP files, a stylesheet (styles.css) and an images folder.
  3. Stylesheet: There is usually only stylesheet associated with a WordPress theme. You can do the following:
    • Either edit the existing stylesheet to match your requirements,
    • Replace the contents of “stylesheet.css” with your own pre-defined stylesheet, or
    • Leave the stylesheet as is and include your own stylesheet in addition by referencing it in the header.php file.
  4. The PHP files: WordPress renders your page by ‘gluing’ a number of different php files together. The following image deconstructs what goes where:
What goes where
What goes where

That’s it! Well, I’m sure it takes a bit more than that (it always does for me) but those are the principal steps. There’s a whole bunch of tutorials and other information on the web, especially on the WordPress forums and support sites.

Further Reading

This tutorial barely scratches the surface of WordPress development. If you need more in depth detail or more beginner’s guidance I recommend the following books:

Beginner:

Intermediate

Advanced

—

If you liked this post follow me on Twitter, I’m @richardmuscat, or subscribe to this blog’s RSS feed.

Published by Richard

Designer.

133 thoughts on “Using WordPress to Build Small Websites: Step by Step Tutorial”

  1. Enjoyed your tutorial. Do you think that it is possible to build a good web site (maybe web presence is a better term) using just wordpress.com? Obviously in this case you cannot get under the hood much but would it be good enough for a personal or small business purpose?

    Cheers.

    1. Hi – was hoping I could find the answer to my question. When I receive payment notifications that someone has placed an order for one of our products, the notification does not show the size that the customer ordered. In order to see the size, I have to go into my Dashboard and look for the specific order. This is something that has only been an issue with WordPress – not with my previous Dreamweaver site. PayPal handles our payments – is this a PayPal settings issue or is this a WordPress issue? I did not build my site-someone else did.

  3. As always it depends on what the web presence is for. I recently read an article (can’t remember where) that said a number of small/micro businesses are finding that even a Facebook page is good enough for their purposes.

    WordPress.com has a lot of advantages: it’s free, can deal with huge traffic, constantly updated and plugs you into a social network.

    For a small fee you can also get a proper domain name associated with a wordpress.com account without needing fully-fledged web-hosting.

    Of course, If you want shopping, forums or other stuff it’s not a good choice there…

  6. hi,
    I’m new to the concept of web site designing.
    nor do I know too much….so I’m progressing only learning from the Internet from people like you.
    I’m trying to make a few web sites, very simple ones basically.
    had been able to install WordPress and login.
    then I tried making a post, and pressed on publish.

    however. the web site still shows the same default page. there is no change.

    also, based on some forum ; deleted the index.html file too from the road directly but still no change.

    can someone guide me..

    thanks

  18. Fantastic Blog! It’s nice that people go to the trouble of making content like this available for beginners.

    You did a fantastic job explaining everything and I think most people could follow this very easily.

    Again Great Job!

    Karl

  20. Hi,
    Your directions were pretty good by the way. But i am a designer wanting to move into web and would like to know how to use wordpress to upload my own designs and make it work.

    If for example i have done a page in adobe illustrator, is there a way to upload that graphic or elents to wordpress?

  21. There is no completely automated way that I know of to do that. To create a custom design for WP you will need to create your own theme… which does require quite a bit of HTML/CSS knowledge (though not necessarily PHP, depending on the complexity of your design).

    I would suggest having a look at services like http://www.psd2html.com/ who get as close as possible to automating what you seem to be looking for at very good prices.

  25. Nice tutorial, Richard. I have to say that most designers and also programmers have a lot of issues going beyond developing very simple layouts in WordPress and Joomla.

    Using a service like ours works out much cheaper and hassle free for web designers.

  26. Thank you for great and useful tutorial about WordPress tutorial about building a small sites. This is exactly what I have been looking for but I have one major issue: Is there anyway to remove the duplicate HOME link in Navbar?

    How can the HOME page be set? When the fresh theme is installed, a HOME menu item is automatically created and creating a new page also creates a menu item on the NAVBAR.

    So how can the HOME link ever be set properly without created a duplicate LINK in the NAVBAR?

    Any clues appreciated. Happy holidays.

  30. I have a web site which is a pure html site. I have made a directory structure as 1]css 2]docs 3]html 4]images
    now i want my client to edit the static html pages.

    I have installed the wordpress

    So how can i do it?
    the site is
    http://www.spmenglishschoolpune.org
    thanks in advance.

  31. Hi webmaster, commenters and everybody else !!! The blog was absolutely fantastic! Lots of great information and inspiration, both of which we all need! Keep ’em coming…

  32. In response to granthamtech:

    > Enjoyed your tutorial. Do you think that it is
    > possible to build a good web site (maybe web
    > presence is a better term) using just
    > wordpress.com? Obviously in this case you cannot
    > get under the hood much but would it be good enough
    > for a personal or small business purpose?

    My 2 cents is more about control and longevity. When you use any service like wordpress.com or facebook to house your primary web presence you are subject to the rules and longevity of that environment. Facebook is here today, but myspace was the rage just two years ago, and what about twitter a year from now. If you have a domain and website you are in control, you can link it to whatever is hot and ditch what ever is not as you see fit.

    A few horror stories to think about that I know have happened. Since both facebook and wordpress.com are free services if anyone complains about your content or behavior or even suggests you are breaking copyright they will delete your account… no appeals, no judge, no jury. If you own your domain you are master of your environment. If a ISP goes out of business or cancels your account for what ever reason, take your offline backup and move to another ISP and your clients are none the wiser.

  35. Thanks a lot for yet another first-rate WordPress tutorial. I am always trying to find great WordPress tutorials to suggest to my clients. Thanks for posting this tutorial . It’s exactly what I was trying to find. Truly great post.

  36. thank you for your tutorial but I have a question my “tags” not sure what you call them are on the right hand side and I want to move them to the left and the names to be in text can you please point me in the correct direction to do this thank you in advance

  37. Hi Richard! :-)
    I must say, this was one of the most effective, clear, up to the point, comprehensive yet very simple tutorial about WP I came across! Hats off to you…

    I have been playing around with editors like Dreamweaver and Firworks, and now want to transition to WP as I find it to be very versatile. So I have started to read about it and play around. My objectives are;
    1. to build a site for visitors to subscribbe and recieve newsletters.
    2. to build a picture & comments sharing site for my family members all over.
    3. if i master the system, to share it with my community and teach to the youth…

    Again, good job Richard!! keep up the good work!

    cheers
    Indika Ajith Kuruppu

  39. Hello Richard,
    I’ve been studying web design from tuts like yours for the past 7 months and I’m trying to build a static site with wordpress/GoDaddy.com and Nvu web freeware. Is it practical to do this with Nvu?
    I also have PSpad2 in my computer. Also when uploading my files, do I upload them to WordPress or to my account at GoDaddy?
    Thanks alot.
    (I do architectural rendering and sign work.)
    Thank you, Larry A.

    1. In response to Larry’s question regarding Dreamweaver I don’t think it is practical to use WordPress cms with Nvu. In fact, Nvu isn’t really good for much. If you are able to invest in Adobe CS software then definitely make that move!! It will be worthwhile from a web designers point of view from all angles.

  40. Hi Larry,

    I can’t say that I’m familiar with NVU so can’t really comment on how practical it is. My preference is for Dreamweaver although if you’re on a Mac I would suggest having a look at Coda (www.panic.com/coda/)

    Re uploading files: it depends on whether you have bought a web hosting account from GoDaddy or just your domain name. If you have a hosting account, you would upload files to GoDaddy directly.

    Having said that, I’m not sure what you mean by “uploading to wordpress directly”. If you’re building your site directly on wordpress.com (e.g. larrysdesigns.wordpress.com) then I don’t think you can upload to wordpress. If you’re building your own (as suggested in this tutorial), they would download the wordpress installer from wordpress.org and, yes, upload it (and anthing else) directly to GoDaddy.

    (I would suggest getting in touch with GoDaddy’s support if you’re having trouble doing that… they’re quite helpful most of the time.)

  43. Hello,

    I’m very new to WordPress but your tutorial is getting me most of the way to getting where I want to go already! I’m trying to adapt the WP “Mininimalist 1” theme to make a small site with the standard NEWS, CONTACT, ABOUT pages etc. However I don’t want these buttons to be ‘hidden’ in a Word Press menu, I just want them to be separate buttons in the side bar. I.e. Is it possible to create simple buttons to target each of the pages rather than use the ‘Pages’ menu ???
    Hope there is a way to do this.
    Thanks so much for posting the tutorial.

  44. Hi Richard
    Really nice “Simple” set of instructions.
    BUT I have two ‘Home’ pages on the recommended theme (Fresh v2.0)
    How do I get rid of one of them.
    I have looked and only found 4 pages listed.
    I have unpublished ‘Home’ and both Home pages disappear.
    On restoring Home both reappear.
    I have DWeaver if needed to do any alterations.

    BTW I worked in the 1970s in the UK with a Richard (Dick) Muscatte so seeing your name related to WP, I had to go with your instructions !!!!

    Best Regards and thank you again for a clear set of instruction.

    Richard W Mulholland

  45. I am just learning about WordPress as a web page and your instructions are very helpful however I have a question regarding hosting. This is the part I am not familiar with as we did this with the college server during classes. I am understanding that I need a host account for any sites I will produce in the future, but where do I get this? I have heard of go daddy and hostGator? any idea which is better? Is there another way to do this if I don’t have my own server?

    Thanks
    Cindy

  46. its a very good tutorial representing verywell. fortunatlly i found this link on net. it makes my basic understanding web development with a CMS.
    thanks to u a lot for writing this tutorial….

  47. does my homepage have to be a static page although I really am not going to blog on it? I am new to WordPress and used the post to start my first page then created 2 other pages for ABout Us and Request Listings> ? I am a newbie. Should I create another Home page instead of the current Home page or is it OK to leave it as it is ? Just don’t want Read More on page at bottom. http://www.portorangejuice.com

    Thanks

  48. I have a website installed with wordpress.. In that i want post blogs in different pages, and under the heading only a little description, and a a button to read more. how can i do it any idea. Mail me.. Abinavdps@gmail.com

  49. […] Using WordPress to Build Small Websites: Step by Step Tutorial (via Serious Simplicity) Posted: November 18, 2010 by just be there in Uncategorized 0 Update: This article has proven more popular than anticipated. If you find it useful, I would appreciate your leaving a comment as to how it could be made better. Also, any suggestions for other similar tutorials would be very welcome. Recently I found myself – for one reason or another – having to build a number of small websites. The kind that have a home page, an "About" section, a "Products" (or services) section, a Contact page and a blog/ne … Read More […]

  51. Very helpful, as a small site with pages like home, about us, events, blog/news… is what I need.

    A lot of web hosting services said “wordpress provided,” but I seemed like wordpress wouldn’t let me design a simple home oage with my art. I made the title-banner art myself in jpeg format and had some photo art for me home page, which I wanted to use. I also was confused because my home page is not a “blog.” Now I have some idea that this is going to work.

  63. Great starting point, thanks Richard.

    I have been designing sites with XHTML/CSS for a while and am now looking to start using CMS for some sites so that clinets can update themselves, freeing up some time for new projects. This was just waht i needed to get my foot in…Thx

  67. Thanks for the post and tutorial. Trying to work my way around the codex tutorials has been a bit much. Keeping it simple seems the best way forward. Have you used dreamweaver CS5 on wordpress themes. Is there any tutorials
    Thanks again
    Gary

  68. WordPress should be an option that every business owner seriously considers when building or redesigning their website.

    For the sake of more control and customization, business owners should consider finding a suitable host and run the free WordPress install from WordPress.org. Many of the bigger hosts now have automated WordPress installs that take less than 5 minutes to install.

    I’ve written a 50+ page ebook guide to help business owners build and maintain a WordPress site called The Small Business Guide to Building & Managing a Website: The Power of WordPress

  72. Wow, that’s some guide. As someone less techie who’s done something similiar, I’m very impressed with your talent for altering the code and customizing your theme. That was awesome.

    It’s something that I’m still getting used to, playing around with large blocks of code but once you start to get the hang of it, it’s strangely fulfilling, like solving a puzzle!

    Code is one of those things any non-techies like me are reluctant to mess around with, and with good reason. If you make an error it can wreck stuff pretty quickly. But knowing even a little can be hugely helpful when you’re improving any website.

    Have you tried, or explored many themes or plugins yet? There’s presently over 14,000 free plugins, 1300 free themes, WordPress is something awesome. Best of all it’s free!

    Full kudos on your personal statement above as well Richard. Entrepreneurs will change the world, and the web can be a catalyst for that!

  73. […] While waiting for the affiliate networks to review your application, don’t waste that time, instead get WordPress installed. Simply google, “how to install wordpress on *enter controlpanel name or host name here*” and you will find so many tutorials to help you out that there is no need to explain here. It is very simple with the “5 minute installation” so even if you have zero experience on website development then I’m sure you will have no problems whatsoever! This may be a good place to start. […]

  76. Hi there, interesting article, thanks.

    Is it wrong to charge clients for me to develop a fully functioning website (via WordPress) and using someone else’s theme (that I have purchased/licensed)?

    1. I don’t see anything wrong with that (I’ve done that in the past myself). As long as you pay the correct license fees to the theme producer there’s nothing incorrect. It’s no different to buying stock photography and using it for client work.

  78. Hi Richard,

    Although it should be noted that with certain web hosts part of this installation process with regards to downloading the latest build and uploading the files can be automated (i.e. its built into the hosting panel) I would agree that getting the files yourself and doing it this way means you have a bit more control. Besides, its really not that complicated even for a beginner I would think.

  79. For any given page on my WordPress Express-created web site, for example the About page, I can right-click on it and select the View Page Source to see the underlying HTML code, but how do I modify or edit that code to add, for instance, Google AdSense code units to it? Thanks?

  81. hi richard,
    what do you meant by “navigate to the website URL in your browser”.. i cant get it???
    pliz i m waiting for your reply.. can anyone help me???????

  87. thanks, nice tutorial!

    Quick tip, for ‘dummies and newbies’, try using the Microsoft WebMatrix. It makes things so much easyer to get going.

    And if your with Godaddy, they have a app installer for wordpress that allows you to install WordPress straight to your hosting plan with no fuss!

  95. I’m more than happy to discover this great site. I need to to thank you for ones time just for this wonderful read!! I definitely appreciated every bit of it and I have you saved to fav to see new things on your site.

  98. I have my site set up, even installed a customer form. I would like to create a job application for potential applicants that I can search for future applicants to staff openings. I have access to the php and my SQL (I am on a hosted platform), do you have any advice for me to create the application? Can I just use the same form plugin on a different page of the site?i just want to be sure that I am going about this correctly, any advice would help!

  104. Nice tutorial. Will give it a try this evening on my local computer and and see if I can get it running.

    Thanks again.

  114. Reblogged this on Subhashbohra's Blog and commented:
    Seriously Simple !!!
    Read the whole article and I am going to try this today and will try to finish it today itself… at least on my local Apache server. Later will purchase the WebHosting Option and launch the website there.

    Thanks RIchard for seriously simple steps blog.

  116. Ok, I’m seeing that the other tuts or more using the php code. I’m good with html css and jquery, now I was wondering how to get other content on the ‘about’ page. I guess i can’t use the page.php?

Leave a reply to Boilerplates and Frameworks for Responsive Design | Fall 2012 Advanced Development Cancel reply