Welcome to my three-part tutorial series on creating a WordPress theme from an HTML document using Adobe Dreamweaver. In this part, you will learn the basics of WordPress, what makes up a WordPress theme, and two ways to view themes using Design view in Dreamweaver.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS4

• Try
• Buy

Hosted or Local WordPress Installation

• WordPress (version 2.7 or higher)
• XAMPP (or other MySQL, PHP solution [optional])

(Optional) Dreamweaver extension

• ThemeDreamer (commercial extension with a 15-day free trial)

Sample files:

• HTMLdocument.zip (ZIP, 36K)
• MyTheme.zip (ZIP, 99K)

Prerequisite knowledge

Basic working knowledge of Dreamweaver, web standards (for example, XHTML and CSS), and PHP.

Introducing WordPress

WordPress is the most popular self-hosted blogging platform with good reason. Hundreds of developers around the world contribute to this PHP/MySQL open source blogging software, which is available free as a self-hosted solution or through WordPress.com.

The real beauty of WordPress is the separation of content and style. The content of a WordPress blog is stored in a MySQL database and is combined with the visual presentation at page load. This allows for the development of themes, which you can activate and deactivate at will to completely change the appearance of your blog.

A theme is simply a set of PHP files that are assembled dynamically, with the resulting HTML styled using CSS. Thousands of free themes are available on the Internet, and this tutorial will take you through the steps in creating your own WordPress theme using Adobe Dreamweaver.

Pieces of the WordPress puzzle

When a WordPress blog page is opened in a browser, a flurry of activity goes on behind the scenes that determines what is presented. The core WordPress files, which thankfully do not require modification, assemble the page based on the options you set in your WordPress administration pages.

For example, if your theme is widget-ready and you have widgets activated on your sidebar, then WordPress will take the following steps:

• Confirm your theme supports widgets
• Acquire the code for the widgets you have activated
• Populate the widgets from the database or external source
• Display the widgets in your sidebar as the page is loaded

All this is done between the time you link into the page and the time the page is displayed in your browser. Not only does WordPress determine your sidebar format on the fly, but it also determines if your page is a list of posts or a single post, if it has comments, if it should allow comments, if the post is password protected, and many more options.

The WordPress template file hierarchy

Note: Throughout this tutorial I will refer to the WordPress Codex, which is the authoritative documentation for WordPress.

A visual template hierarchy can help you visualize how WordPress determines which PHP files are used to assemble each page. If you examine a visual overview of the template hierarchy, you'll see that WordPress decides which PHP files to use based on the files available in your theme.

For example, if you want to use a different presentation for the blog home page, you can include a home.php file that has a different structure or styling than index.php. When your blog home page is loaded in a browser, WordPress first looks for home.php, and if it is not found, it will use index.php.

In the template hierarchy, all paths lead to index.php. This is one file that is required in every theme, along with a CSS style sheet. Different themes include different PHP files depending on how much detail the designer wants to add.

The WordPress page structure

Now that you have an understanding of how WordPress determines which files to look for when loading a page, you need to know how the files are assembled with each template page to make up a complete blog page.

Figure 1. The components of a complete blog page

A basic index.php file builds a page by including other files from the theme directory. The three most common files used are header.php, footer.php, and sidebar.php (see Figure 1). The code used to include these three files is:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

After WordPress has assembled the page, the complete HTML page is rendered in your browser window.

Within the index.php file, there is an important piece of code known as the loop. The code that starts the loop looks like this:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

The loop has several functions. First, it determines if there is any information to display. Next it loops through the posts and displays each post until the loop criteria has been satisfied. The loop is essentially your page content, and the closing of the loop also includes a message if no posts are available to display. I will cover this in further detail later in this tutorial.

As you delve into creating a WordPress theme, you will learn how to create additional files to build more complex themes. More detailed information on template creation can be found in the Blog Design and Layout section of the WordPress Codex.

Taming WordPress with Dreamweaver

WordPress is a fabulous open source platform for which to develop themes. For beginner theme developers, however, it can be a bit overwhelming. WordPress doesn't offer any built-in coding tools other than the theme file editor, which is simply a code viewer with some syntax highlighting that was added in WordPress 2.8.

So how do you get started creating or customizing WordPress themes? If you have Dreamweaver, you already have all the tools you need!

Dreamweaver excels at creating and editing WordPress themes. The built-in Dreamweaver PHP code reference tools provide code hints, highlight invalid code, and more. Code hints (see Figure 2) and the balance braces feature (see Figure 3) give you a helping hand when working with PHP code.

Figure 2. Code hints in Dreamweaver CS4 make it easier when working with code.

Figure 3. The balance braces feature helps troubleshoot code errors.

Remember, WordPress is simply a set of PHP files assembled server-side into a complete HTML page. Dreamweaver gives you all the coding tools you need to create and edit the PHP files. In the next sections, I'll show you some tools and tricks that can help you visualize your theme in Dreamweaver using Design view.

Viewing WordPress themes using ThemeDreamer

The first and simplest way to see your theme in Design view is to use a Dreamweaver extension called ThemeDreamer. ThemeDreamer is developed by Virtuosoft and it works by combining all the individual WordPress theme files into a working Design view page. It adds sample blog data so you can see how each element (such as post titles, images, block quotes, and sidebars) will display in your theme (see Figure 4).

Figure 4. The ThemeDreamer representation of this tutorial's sample theme in Design view.

ThemeDreamer also includes code hints from the WordPress template API, so as you code your WordPress theme in Dreamweaver, you have quick access to the different tags available to WordPress theme creators (see Figure 5).

Figure 5. ThemeDreamer code hints for WordPress template tags.

ThemeDreamer is a commercial extension. It does have a 15-day free trial so you can find out if it's the right tool for you before buying.

Viewing WordPress themes without ThemeDreamer

The other way to see a WordPress theme in Design view requires you to have a working theme activated in WordPress so you can preview your blog in your browser. You will also need a local site set up in Dreamweaver with your theme files and images folder located in the site root. I'll cover setting up a local site in detail in Part 2 of this tutorial.

Next, follow these steps:

1. In your browser, open your WordPress blog and navigate to a page you wish to style in Dreamweaver.
2. In your browser menu, choose View > Page Source (Firefox) or View > Source (IE) and open the source code for your blog page. You can also right-click within the browser window and choose the View Source option from the menu.
3. Highlight and copy all the code in the window.
4. Go back to your local theme site in Dreamweaver and create a new HTML page by choosing File > New > Blank Page and selecting HTML as the page type.
5. When your page opens, go into Code view and delete all the code shown.
6. Paste the code you copied from the browser into the blank HTML page.
7. Save this file to the root of your local Dreamweaver site.

The source code you copied from your browser window has the style sheet linked to the remote blog address so you won't be able to make changes to it. As a result, you'll need to complete following steps to see your blog in Design view and edit your style sheet:

1. Find the style sheet link in the head section of your code. If you're using the tutorial theme, it will look something like this:

   <link rel="stylesheet"
   href="http://www.yourdomain.com/wp-content/themes/MyTheme/style.css"
   type="text/css" media="screen" />

2. Delete the entire link for the style sheet.
3. To relink your page to the local style sheet in your Dreamweaver site, choose Format > CSS Styles in Dreamweaver.
4. Select Attach Style Sheet and browse to the local style.css file located in your site.
5. Click OK and your local style sheet will now be linked.

Design view should update with a styled display of your page.

You can now make any changes to your style sheet simply by selecting different elements in Design view and editing the CSS code within Dreamweaver. For example, you can select the H5 tag in the example theme sidebar, and make changes to its properties (see Figure 6).

Figure 6. Live CSS editing in Dreamweaver.

After you make changes to your style.css file, you can upload it to your remote server and those changes will become immediately visible. Just remember to also upload any images you add to your CSS code as well.

Where to go from here

In Part 2 of this series I'll show you how to create a local Dreamweaver site for customizing your theme, how to work between WordPress and Dreamweaver to customize the tutorial theme (or any other theme), and some ways to customize your WordPress theme.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author