Editing a WordPress theme with Dreamweaver CS5 – Part 2: Setting up your site

Additional Requirements

WordPress 3.0 or later

• Learn more

XAMPP (if you have Windows)

• Learn more

MAMP (if you have Mac OS X)

• Learn more

This is Part 2 of a four-part tutorial on editing WordPress themes using Adobe Dreamweaver CS5. Part 1 covered the basics of WordPress and the components that make up a WordPress theme. This article focuses on setting up WordPress (version 3 or higher), installing a local server (XAMPP on Windows or MAMP on Mac OS X), creating a local Dreamweaver site and testing server, setting up code hinting, installing theme files, and previewing a main theme file.

This part is divided into the following sections:

• The basics of previewing WordPress themes in Dreamweaver CS5
• Install WordPress
• Install the theme files and set up your site in Dreamweaver

The basics of previewing WordPress themes in Dreamweaver CS5

To view live WordPress theme pages on your machine within Dreamweaver, you need to setup a local web server, install WordPress, and create a site within Dreamweaver with a properly configured testing server. This may sound like a lot of work if you are building your first theme, but you only need install the web server and WordPress once in order to test multiple themes.

How does it work?

When you create a site in Dreamweaver with the intention of previewing theme files, Dreamweaver cannot preview the WordPress PHP files by itself. It needs the help of a local web server and WordPress installed on your machine (see Figure 1).

WordPress is typically installed in a folder in the web server (usually htdocs). Your theme files are kept in the WordPress folders. In Dreamweaver, you create a site and set up a testing server, which is configured to use the web server folder (htdocs). When you open a PHP file (for example a WordPress file) from that site in Dreamweaver and click Live View, Dreamweaver uses the testing server to render a live preview of the file.

When you install a local web server as part of XAMPP, or MAMP, PHP and MySQL are installed as well. PHP support is required to interpret the PHP files, and MySQL is used to store your WordPress data.

Setting up your local web server

To complete this tutorial, you need to set up a local web server for WordPress. Refer to Setting up a PHP development environment for Dreamweaver for details on installing the Apache web server and MySQL database:

• To install XAMPP on Windows, follow the instructions in Set up PHP for Windows.
• To install MAMP on Mac OS X, follow the instructions in Set up PHP for Mac OS X.

Note: Adobe does not provide technical support for third-party products such as XAMPP and MAMP. Refer to the product websites if you need further support. Note also that because of missing or insufficient write permissions, it is suggested that you install XAMPP into an alternate folder (C:\xampp for example, not C:\Program Files).

Back to top

Install WordPress

After you set up your local PHP server environment, the next step is to install WordPress, which you’ll need to display the theme files properly.

Follow these steps to install WordPress:

1. Visit http://wordpress.org/download/ and download the latest release of WordPress.
2. Unzip the files and place the contents of the folder (not the wordpress folder itself) in the htdocs folder on your system (see Figure 2). The htdocs folder was created when you installed the web server (XAMPP or MAMP). Typically this folder is located at C:\xampp\htdocs\ (Windows) or Macintosh

   HD/Applications/MAMP/htdocs/ (Mac OS X).

Next, you need to create a simple database for WordPress using phpMyAdmin. When you installed the personal web server (XAMPP or MAMP), phpMyAdmin was installed as an administrative interface for your MySQL databases. For more details, see Using phpMyAdmin in the WordPress codex.

To start phpMyAdmin when using MAMP on Mac OS X:

1. Open MAMP from the Applications folder.
2. In the MAMP interface, click Open Start Page to open the start page in the browser, if it doesn’t open automatically.
3. Once the page opens, click the phpMyAdmin tab at the top of the page.

To start phpMyAdmin when using XAMPP on Windows, simply open a browser and browse to http://localhost/phpmyadmin.

Follow these steps to create a database in phpMyAdmin:

1. Below the text box labeled Create new database (see Figure 3), type wordpress as the database name.
2. Click Create.

This will create a simple database that WordPress will be using shortly.

Note: To access the phpMyAdmin page in the browser, the web server must be running.

Next, you will create an admin level user.

1. Click the Home icon in the upper left to return to the main page, then click Privileges.
2. Click Add a new User.
3. Enter a username for WordPress and enter it in the User name field. (Be sure Use text field: is selected from the dropdown.)
4. Choose a password and enter it in the Password field. (Be sure Use text field: is selected from the dropdown.) Re-enter the password in the Re-type field.
5. Write down the username and password you chose.
6. Leave all options under Global privileges at their defaults.
7. Click Go.
8. Return to the Privileges screen and click the Edit Privileges icon on the user you've just created for WordPress. In the Database-specific privileges section, select the database you've just created for WordPress under the Add privileges on the following database dropdown menu. The page will refresh with privileges for that database. Click Check All to select all privileges, and click Go.
9. On the resulting page, make note of the host name listed after Server: at the top of the page. (This will usually be localhost.)

A last part of the install process is to run the WordPress install script. This will complete the WordPress setup by connecting WordPress with the database you created.

1. With the WordPress files copied to the correct location in the htdocs folder, the web server installed, and a database created, open a browser and browse to http://localhost/wp-admin/install.php.
2. A screen telling you to create a configuration file will appear. Click the Create a Configuration File button.
3. Click the Let’s Go button to go to a page that allows you to enter your database information.
4. Type your database name, wordpress.
5. Type your MySQL user name and password (usually the user name and password are both admin, unless you changed them in the database).
6. For the Database Host type localhost.
7. Click Submit (see Figure 4).

After you’ve successfully configured the database information, you are ready to begin the five minute WordPress installation process, in which you’ll set up blog details such as the title, admin username/password, and more. Follow the on-screen instructions. For more details see Step 5: Run the Install Script in the WordPress codex. WordPress will then be installed and you will be directed to the admin login area for your WordPress site. This is where you can login and add posts, change themes, create pages, and much more. For now, simply close the browser.

Back to top

Install the theme files and set up your site in Dreamweaver

With the local web server and WordPress installed, the next step is to set up a local Dreamweaver site using the sample WordPress theme for this tutorial.

Installing the theme files

Download the sample theme for this tutorial, MyTheme.zip, and extract the contents to the WordPress themes folder.

The WordPress themes folder can be found at the following locations:

• Windows: C:\xampp\htdocs\wp-content\themes\
• Mac OS: Macintosh HD/Applications/MAMP/htdocs/wp-content/themes/

Most themes have a single folder that contains all the theme files. In this case the folder is named MyTheme. The resulting theme folder paths are as follows (see Figure 5):

• Windows: C:\xampp\htdocs\wp-content\themes\MyTheme\
• Mac OS: Macintosh HD/Applications/MAMP/htdocs/wp-content/themes/MyTheme/

Set the theme in WordPress

Next you need to tell WordPress to use the new theme files you just copied into the htdocs folder for your blog.

1. Open a browser and go to your local WordPress admin area (the URL is typically http://localhost/wp-admin/)
2. Log in to WordPress.
3. In the left sidebar of the dashboard, click Appearance. This should open the Manage Themes area. If not, click the arrow to the right of Appearance, then click Manage Themes.
4. Click Activate below Adobe Developer Connection Theme 1.0 by Codify Design Studio; this activates the theme files you just copied into the ...wp-content/themes folder.
5. Type http://localhost/ into the browser to see the first page of the blog with the theme files applied.

Setting up your site in Dreamweaver

Once the theme files are in place, you can begin working in Dreamweaver to edit and preview them. Follow these steps to set up a site in Dreamweaver:

1. In Dreamweaver, choose Site > New Site.
2. In the Site Setup dialog box, type blog (or any other name you want) for the Site Name.
3. For the Local Site Folder, browse to and select the htdocs folder in your XAMPP or MAMP installed folder in your Windows (C:\xampp) or Mac OS (Macintosh HD/Applications/MAMP) folder (see Figure 6).
4. Click Save.

Note: For more details on setting up a site refer to Setting up a Dreamweaver site in Dreamweaver Help.

The next step is to configure a testing server in Dreamweaver for testing the WordPress theme files. Follow the detailed instructions in David Powers' article Setting up a local testing server in Dreamweaver CS5.

When I set up my site in Dreamweaver for this article, I set up:

• The Local Site Folder in the Site Setup dialog box to be: /Applications/MAMP/htdocs (Mac OS).
• The Server Folder (when setting up a testing server) to the same folder: /Applications/MAMP/htdocs (Mac OS).
• The Web URL to: http://localhost/.

Note: These paths may not work for you, depending on your machine setup.

Your site is now set up in Dreamweaver, and you can access both your local and remote theme files through Dreamweaver.

Setting up site–specific code hinting

When you’re working with WordPress, Dreamweaver CS5 can be set up to show you WordPress-specific PHP code hints as you edit PHP code in Code view. Before you can work with code hints for WordPress (or another framework), you need to create a configuration file. The Site–Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework you’re using. Dreamweaver supports three frameworks by default: Drupal, Joomla!, and WordPress.

1. With the site selected in the Files panel, choose Site > Site-Specific Code Hints.
2. In the Site-Specific Code Hints dialog box, select WordPress from the Structure options.
3. Click the Select Sub-root Folder button to the right of the Sub-root text box (see Figure 7) and navigate to the htdocs folder (or wherever your main WordPress files are located).

4. Click OK. If a dialog box appears asking you to save your edits as a preset, click Cancel to close the dialog box and save the changes.
5. In the Files panel, scroll to see the dw_php_codehinting.config file (see Figure 8). Do not delete this file unless you no longer want to use WordPress-specific code hinting.

Note: The code hints are specific to the site selected in the Dreamweaver Files panel. For the code hints to display, the page you are working on must reside in the currently selected site.

Testing code hinting

Once you set up the code hinting, you can give it a quick test to see how it works.

1. In the Files panel, double-click the file named index.php in the wp-content/themes/MyTheme folder to open it.
2. Click the Code button in the Document toolbar to see the code for the page.
3. Insert the pointer at line 2 in the code, after <?php get_header(); ?>.
4. Type <?php ec and then press Ctrl+Spacebar to invoke the PHP code hinting.

   The code hints feature helps you insert and edit code quickly and without mistakes. As you type PHP code, for instance, you see a list of appropriate candidates (with documentation if available) for the code you are typing.

5. Delete the code <?php ec that you just typed.
6. With the cursor still at line 2 of the code, type <?php wp.
7. Press Ctrl+Spacebar to show the site-specific code hints.
8. Continue typing _lis (so the line now reads <?php wp_lis) and notice the list of code hints changes.
9. Click wp_list_pages($args) in the list. Notice the post-template.php to the right in the list (see Figure 9). This tells you in which PHP document the wp_list_pages($args) function was found.
10. Press Escape to close the code hints list.

11. Choose File > Close without saving the file.

Previewing a page

The next step is to test out the page in Dreamweaver and see the WordPress PHP in action in Dreamweaver using Live View. Live View differs from the traditional Dreamweaver Design view in that it provides a more realistic (though non-editable) rendering of what your page will look like in a browser. Live View does not replace the Preview in Browser command for typical HTML pages, but rather provides another way of seeing what your page looks like live without having to leave the Dreamweaver workspace.

1. Open the index.php file that is in the top level of the htdocs folder (at the same folder level as the dw_php_codehinting.config file you created earlier). Click the Design button to switch to Design view.
2. Next, click the Live View button in the Document toolbar. After a short wait, the page will be previewed in Dreamweaver using WordPress and your local web server (see Figure 10).

When in Live View, notice the URL that appears in the Address box below the Live View button. This URL is the local address and is typically http://localhost/. This may seem confusing if this is the first time you are working with a WordPress site. Why doesn’t http://localhost/index.php appear in the Address bar instead? The index.php page is the default page for a WordPress blog, much like index.html is the default home page for a static site. The URL for such a page does not need the /index.html, nor does the URL for your WordPress blog need the /index.php.

3. Click the Live Code view button in the Document toolbar to see the code that is generated and sent to the browser. You won’t see the PHP code since the code displayed in Live Code view is similar to what you would see if you viewed the page source from a browser. The source on such pages are static, but Live Code view is dynamic, and updates as you interact with the page in Live View.
4. Click the Live View button to return to the PHP code and stop the preview.

Note: Your local web server must be running to test a page in Dreamweaver. One way to find out if the web server is running is to open a browser and view http://localhost. If the page shows up, then you know the web server is working.

Back to top

Where to go from here

Now that the site is set up and you are able to preview your blog in Dreamweaver, you can begin to edit the theme files and preview your changes. Part 3, Adding a logo, header styles, and menu covers editing theme files. You will learn how to add a navigation system and a few more essential features.

Back to top