2 August 2010
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:
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.
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.
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:
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).
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:
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:
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:
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.
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.
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.
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.
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:
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):
Next you need to tell WordPress to use the new theme files you just copied into the htdocs folder for your blog.
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:
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:
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.
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.
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.
Once you set up the code hinting, you can give it a quick test to see how it works.
<?php get_header(); ?>.
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.
<?php ecthat you just typed.
<?php wp_lis) and notice the list of code hints changes.
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.
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.
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.
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.
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.