Liteboxweb - Tutorials
Just another WordPress weblog
Using wordpress to power a normal website (Part 1)
This tutorial is designed to walk you through the process of installing wordpress, making custom template types and deliver your content. The point of creating a wordpress-driven website is to provide your client with a familiar and simple method for content management. While some would prefer using a more robust CMS such as Drupal or Joomla, Wordpress blogging cms is typically much easier to use, style, expand with plugins, and customize due to its straightforward file and php structure. Additionally, there is an advantage to using Wordpress rather than the previously mentioned CMSs because it is very lightweight vís-a-vís database queries.
Before we begin, I would like to suggest that you create a subdirectory on your own host in a clients area, so that way while you continue to work on your client’s project, their current website can stay online to give important business information to its web traffic. If you are building their first website, then I suggest you make a lightweight info/contact page for their website to stand in place of the website to come. Additionally, you’re doing the client a favor by working on your own server during the design process, because search engines can typically see those pages (even when they’re not linked-to), and you don’t want bad traffic on their site — its bad SEO. With that said, let’s get started!
1. Install The Most Current Version of Wordpress
Go to www.wordpress.org/download/ and download the most current version of wordpress to your desktop.
Downloading the current wordpress version
After you’ve downloaded it, extract the zip to your desktop and open your ftp program. If you are using a mac, try Transmit by the company called Panic, its nice. Now, open your ftp and drag the contents of the wordpress folder into the root of your clients/ClientX directory (”ClientX” would be the name of your client, feel free to change it).
Next, go into your browser and navigate to that directory. The URL should look something like this: http://www.yourdomain.com/clients/ClientX/wp-admin/install.php. From there, you should see a special wordpress page that asks you for some information before it completes the install and database setup. Definitely check out wordpress’s instructions if you get hung up here.
2. Set up a theme that will facilitate a non-blog website
You have a couple choices for theming your wordpress site quickly. First, you can create your own theme from scratch and ensure that the page types are all covered. Second, you can download a free theme and just manipulate it until it works for you. For all intents and purposes, we will go with option 1 in this tutorial.
First, I’d like to explain some basic things that makes word press useful. There are different content types in wordpress (links, pages, blog posts). In your theme folder, you can make a .php file that will automatically be used as a template for that page type. So, for example, your website’s front page will be powered by index.php, and the About Us page is a separate content type, and thus you can have a different layout by having page.php in the directory of your theme. Similarly, you can have custom styling for the sidebar by having a sidebar.php file, the header area by having a header.php, and a footer area by having a header.php. If you require more in depth information about creating themes and their respective theme files, take a look at wordpress’s theme documentation.
Instruction 2.A: in your ftp, navigate to the theme directory which is located at:
www.yourdomain.com/clients/ClientX/wp-content/themes/
Now, create a new folder in the /themes/ folder with the same name as your client folder name all in lowercase with no spaces. So, for this example, the new folder structure is:
www.yourdomain.com/clients/ClientX/wp-content/themes/clientx/
It is inside this new folder that all of your site’s design, look, and feel will be based in.
Instruction 2.B: Create the following files and folders, and leave them empty for now.
- Directory named “images”
- Directory named “iestyles” (this is because eventually we’re going to make this website cross-browser compliant)
- 404 Template = 404.php
- Archive Template = archive.php
- Archive Index Page = archives.php
- Comments Template = comments.php
- Footer Template = footer.php
- Header Template = header.php
- Links = links.php
- Main Template = index.php
- Page Template = page.php
- Popup Comments Template = comments-popup.php
- Post Template = single.php
- Search Form = searchform.php
- Search Template = search.php
- Sidebar Template = sidebar.php
- Stylesheet = style.css
Your ftp filetree should look like this:
Theming wordpress - what your filetree should look like.
Once you have gotten to this part, you’re ready to begin designing your theme. Next up, the second part of the tutorial: Designing a graphical mockup of your theme, implementing it.
RSS
RSS feed for comments on this post
Share your comments