How to design wordpress theme using Dreamweaver (Beginning, Intermediate)

Haven’t start blog yet? Why not start now, this tutorial will guide you though the process of creating a customized Wordpress theme right from the beginning.

Why Wordpress?

First of all, its free, it was build upon MySQL(database) and PHP(server side script), which are also free. Secondly, it has been there for almost 5 years, there is a big community behind it., its totally customizable with millions of plugins contributed from people around the world, the possibility is infinite. Last but not least, it’s very easy to use, even you don’t have much of knowledge in programming, all the plugins will make your life easy enough to take advantage of all the potential it offers.

What do you need?

1. Apache, MySQL and PHP

First of all you need to install server in you PC or MAC, you will need Apache to turn you computer to a server, but lots of people have concern of doing this because they think this might increase the possibility of getting computer virus or crash the computer. The fact is the server installed in a local computer only makes it act as a server, not necessarily means turn it to a actually server which is open for hacker on the internet. It is no different than installing other softwares. However, it’s a bit tricky to install these components, if you are using Windows Vista check out following tutorials from senese, install apache on Windows Vista, Install PHP under Apache and Vista.

Note: There are tutorials that teach you how to customize themes without install a server, but I found it hard to edit multiple pages using these methods and the result isn’t always precisely what you are expecting. You can check out how to edited Wordpress design using Dreamweaver.

2. HTML editor

HTML and CSS editor is necessary even for the most senior web developer, in my case I prefer Dreamweaver, coz it has a clean interface very easy to use and can cope with HTML and CSS beautifully.

3. Wordpress theme

While I said design, in fact it’s hard to design a wordpress theme without some serious PHP programming knowledge. So to begin with, why don’t we choose a theme out there with a similar layout as you desired, it will be a lot easier.

How does it put together?

If you a bit about HTML, you will know that a webpage is consist of several part, from the top to bottom there are Doctype, Header, Body. While Wordpress divides them into even small pieces and put them back together when a request is made by the browser. In all Wordpress root directory, there are following files with php extension that together make up a webpage:

1. index.php or page.php, search.php, single.php, archives.php, archive.php., 404.php

Each of these files collect all the contents that is necessary to build up a web page, such as header, main post, comments, footer, archives, etc.

2. header.php

Beside the header itself that appears on the top of the page, the header.php contains information about the website and webpages, such as title, meta tag and the location of style sheet, Javascripts. You can write CSS rules and Javascripts in this file, but it’s not recommended in favor of the web standard.

3. comments.php, comments-popup.php

Comment form and popup comment window.

4. sidebar.php

Collect things that should appear in sidebar, such as archive, blogroll, categories, etc.

5. footer.php

Place to include extra information about the site or page, such as copyright, RSS feed link or more.

The process

1. Setup Wordpress

Before you do anything with the style sheet, make sure you Wordpress in you computer are up and running, check here if you are not sure how to set it up. Then try to write a testing post and add some comments yourself.

2. Create HTML page

In the browser go to your homepage, the link should be something like http://localhost/wordpress/, now copy the source code. Open HTML editor create a new HTML page name it index.html, save it under the folder where the theme you have chosen located, for example: c:/apache/htdocs/wordpress/wp-content/themes/theme_name/.

3. Link CSS sheet

Open index.html in editor edit the link location of style sheet, make it as <link rel="stylesheet" href="style.css" type="text/css" media="screen" />because if you don’t move the style sheet otherwise, it’s by default in the root directory of the theme folder.

4. Edit style sheet

Open style.css in editor and customize the look of your wordpress. In HTML editor like Dreamweaver the change made to style sheet will immediately reflected in the window.

5. Preview

Once you done the editing with CSS, preview the index.html page. Since the index.html file and the webpage generated by PHP code use the same style sheet, you will find you actually customized the entire site.

What else to do?

If there is more than just the content that appears in the index page you want to change, such as popup comment page, page that display the individual post or even 404 error page, just repeat step 2 to 4.

Moreover, since you have installed the server in you computer, you can actually do a lot more than editing style sheet. You can add or remove content in those PHP files or install plugins in you local Wordpress blog before you upload them on to the hosting server.