Editing a WordPress theme with Dreamweaver CS5 Part 1: Learning the basics

This is Part 1 of a four-part tutorial series on editing WordPress themes using Adobe Dreamweaver CS5. In this part, you will learn the basics of WordPress, including why so many people use it, how it is installed, and what makes up a WordPress theme. I'll also describe some of the features you will be using in Dreamweaver to make editing your theme a snap. WordPress is the most popular blog software in use today. It was initially designed to simplify the creation and maintenance of blogs, but it has evolved into a full content management system and more. The real beauty of WordPress is its separation of content and style. The content of a WordPress blog is stored in a MySQL database and is combined with the visual presentation when a page is loaded. This enables you to develop and use themes, which you can activate and deactivate at will to completely change the appearance of your blog. A theme is simply a set of files (PHP, CSS, and more) that are assembled dynamically, with the resulting HTML styled using CSS. WordPress 3.0 comes with a default theme called twentyten to get you started. Thousands of free themes are also available on the Internet, but when you create your own you can control everything from CSS styling and side bar content, to the number and position of columns, and more. When creating a new theme, most people start with an existing theme and customize it to get the exact look and feel that they want. This tutorial series will take you through the steps of customizing your own WordPress theme using Adobe Dreamweaver CS5. This tutorial is divided into the following sections:

Pieces of the WordPress puzzle Taming WordPress with Dreamweaver CS5

Pieces of the WordPress puzzle

When you are ready to create your WordPress blog for the world to see, you can make it available in one of two ways: host WordPress yourself (on a server) or host the blog through WordPress.com. If you choose to host it using WordPress.com, you will access it through a URL such as ask brianwood.wordpress.com. If you choose to run WordPress on a website host, you can use any available domain name. Hosting WordPress on your own website requires some set up before you can start blogging. In addition to the WordPress software itself, your website host will also need PHP and MySQL, and you'll need your own domain name.

Once you have a website host, you can either install WordPress through your website administration panel (some website hosts offer Fantastico or similar tools that can automatically install WordPress for you), or download WordPress from WordPress.org and install it yourself on your host server using the WordPress Famous 5-Minute Installation. After you've installed WordPress and created your MySQL database, you can start blogging! If you're going to develop your own theme, you'll want to be able to build and test it before going live on the web. Whether you're starting from scratch or editing an existing theme (like you are going to do for this tutorial), the best place to work on your theme is your own machine, on which you've installed WordPress and a web server. With this setup, you can build and test your WordPress themes in Dreamweaver, then upload the completed theme files to your host where you have WordPress installed and ready to go. Part 2 of this series covers installing a web server and WordPress on your machine, as well as setting up a site with site-specific code hinting in Dreamweaver CS5. How WordPress works When you install WordPress (either on a website host server or locally), lots of files are installed that enable WordPress to run your blog. These files include core WordPress files, including administration files and scripts that make WordPress run, as well as a folder for blog themes. The administration area files are part of an administration site that typically has a URL like: http://www.mywebsite.com/wp-admin/. You use the administration area (see Figure 1) to name your blog, add posts, edit styling, and more. This is also where you'll tell WordPress to use the theme files you are going to create in this tutorial series. So after you develop the WordPress theme files in Dreamweaver, you or someone else can upload them to a website host where a live WordPress blog resides and activate the theme through the administration interface.

Figure 1. The administration area of WordPress When a WordPress blog page is opened in a browser, a flurry of activity goes on behind the scenes. This activity determines what is to be presented on the browser page that is delivered to

the user. The core WordPress files, which thankfully do not require modification, assemble that page based on the options you set in the 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: 1. 2. 3. 4. 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 browse to 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. Because WordPress assembles pages dynamically, you don't have to rebuild of all your pages each time you update your blog, or any aspect of it. All pages are generated using the database and the templates each time a page from your blog is requested by a viewer. This means that you can update your blog or its design very quickly, and required server storage space is kept to a minimum. The WordPress template file hierarchy The collection of WordPress template files that comprise a theme are like the pieces of a puzzle. When put together, they form complete web pages on your WordPress site. Some template files (the header and footer template files, for example) are used on all pages in your site, while others are used only under specific conditions (a specific sidebar, for example). 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. You can create new files in the hierarchy that will take precedence over index.php to provide different styling for specific pages. For example, if you want to create a new look for the blog home page. To accomplish this, 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. The WordPress page structure Now that you have an understanding of how WordPress looks for files when loading a page, you're ready to look at how the files are assembled with each template page to make up a complete blog page. To see the code that makes up the main page of the theme for this tutorial, follow these steps:

1. 2. 3. 4.

Download and unzip the sample files in MyTheme.zip. Start Dreamweaver. Open the index.php sample file. Click Code to open Code view.

A simple WordPress web page is made up of three basic sections: a header, the content, and a footer (see Figure 2). This is similar to a typical static HTML page you might create using Dreamweaver. The header section typically contains tags such as <doctype>, <html>, and <head>. It also contains links to style sheets, JavaScript, and more. The content section contains your blog posts and pages, and other content you add. The footer section contains content such as the copyright info, links, contact information, and other details. The footer section also contains the closing </body> and </html> tags.

Figure 2. The basic sections of a WordPress page The MyTheme.zip sample file includes a number of files in addition to the main page file called index.php. While the HTML page is built starting with this content, the index.php file references other files from the theme directory. The three most common files referenced in the index.php file are header.php, footer.php, and sidebar.php (see Figure 3). The header and footer are required, but the sidebar is optional.

Figure 3. The template files that make up a simple WordPress page If you look at the code for the index.php page in Dreamweaver, you'll see the code for these three files:
<?php get_header(); ?> . . . <?php get_sidebar(); ?> . . . <?php get_footer(); ?>

These tags (get_header, get_sidebar, and get_footer) tell the PHP engine to find the header content (header.php), the sidebar content (sidebar.php), and the footer content (footer.php) and include it at that point in the index.php file. Why not just put the header, sidebar, and footer content in the index.php page? Why use separate files? There are several reasons, but the main reason is that having separate content allows you to include it consistently in other pages on your site as well, where it will appear exactly as it does on the index.php page. The approach is similar to using an external CSS file, rather than having the complete CSS content in each page. When someone visits the home page of your blog, WordPress reads the index.php file, includes the content for the header, sidebar, and footer, and delivers a complete HTML page to be rendered in your browser window. Even if you haven't created any blog posts, this HTML page will have the look and feel of the blog, complete with CSS and imagery. Of course, the page will also need to actually include blog post content. To accomplish this, your WordPress theme will use some PHP code to implement the WordPress Loop. The Loop is an important piece of code located in the index.php file. In Dreamweaver examine the index.php code and find the code that starts the Loop (see Figure 4). It looks like this:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Figure 4. The loop in the index.php code The Loop is used to display your blog posts, and it performs several functions. First, it determines if there are any posts to display. Next it loops through the posts and displays each post until the loop criteria has been satisfied. So where does the Loop get content (your blog posts) from? When WordPress is installed, a MySQL database is created, either automatically or manually (by you or an administrator). In the WordPress administration area, you create posts and other content that are saved in that database. When someone visits your blog home page, the Loop code checks your database to see if you created any blog posts, and inserts any posts in the page to be displayed in the browser. 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. Note: Throughout this tutorial series I refer to the WordPress Codex, which is the authoritative documentation for WordPress, and is found at http://codex.wordpress.org/Main_Page. Back to top

Taming WordPress with Dreamweaver CS5

WordPress is a great open source platform for which to develop themes, but when you are just starting to develop themes, it can be a bit overwhelming. WordPress doesn't offer any built-in coding tools in the administration pages other than the theme file editor, which is simply a code viewer with some syntax highlighting. Dreamweaver CS5, on the other hand, has a variety of excellent tools for creating, editing, and viewing WordPress theme files. If you have Dreamweaver CS5, you already have all the tools you need to get started creating or customizing your own WordPress themes.

The built-in Dreamweaver CS5 WordPress code hinting (see Figure 5) provides code hints for your WordPress files, highlights invalid code, and more. This sitespecific code hinting feature lends a helping hand when you're working with WordPress PHP code.

Figure 5. Site-specific code hinting in Dreamweaver CS5 Dreamweaver CS5 also enables you to preview your WordPress theme using Live View and explore it using Live Code view (when you have a testing web server and WordPress installed). Throughout this series, you will be using Dreamweaver CS5 features including site-specific code hinting, Live View and Live Code, Inspect mode, and more to help you preview and edit your WordPress theme files.

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, set up site-specific code hinting to help you work with WordPress code, install a local web server on your machine for testing your theme locally, and use Live View in Dreamweaver CS5 to preview your theme directly in Dreamweaver.

Editing a WordPress theme with Dreamweaver CS5 Part 2: Setting up your site
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.

Figure 1. Previewing WordPress theme files in Dreamweaver 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 youll 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).

Figure 2. An example of the folder structure containing the WordPress files on 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 doesnt 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.

Figure 3. The phpMyAdmin page on Mac OS X 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 Lets 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).

Figure 4. Entering the database information for the WordPress set up script After youve successfully configured the database information, you are ready to begin the five minute WordPress installation process, in which youll 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/wpcontent/themes/MyTheme/

Figure 5. Example path to theme files on Mac OS X 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.

Figure 6. Site definition for a local site 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 sitespecific code hinting When youre 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 SiteSpecific Code Hints feature scans your site to determine which Content Management System (CMS) framework youre 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).

Figure 7. Setting up sitespecific code hinting 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.

Figure 8. The dw_php_codehinting.config file in the Files panel 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 wpcontent/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. 6. 7. 8. Delete the code <?php ec that you just typed. With the cursor still at line 2 of the code, type <?php wp. Press Ctrl+Spacebar to show the site-specific code hints. 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.

Figure 9. Testing the sitespecific code hinting 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).

Figure 10. Testing the page in Live View 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 doesnt 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 wont 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.

Editing a WordPress theme with Dreamweaver CS5 Part 3: Adding a logo, header styles, and menu
This is Part 3 of a four-part tutorial on editing WordPress themes using Adobe Dreamweaver CS5. Part 1 covers the basics of WordPress and the components of a WordPress theme. Part 2 covers setting up WordPress locally, installing a local server (XAMPP on Windows or MAMP on Mac OS X), creating a local Dreamweaver site and testing server, configuring code hinting, installing theme files, and previewing the main theme file using Live View in Dreamweaver. In this part, you edit the theme files in the MyTheme folder by using Dreamweaver to add a company logo to the header, change the styling of the post titles, and add a menu bar. You'll need to complete the steps in Part 2 before completing this part of the tutorial series. This article is divided into the following sections:

Adding a logo to your WordPress theme Styling theme post titles Adding a menu system

Adding a logo to your WordPress theme

Most WordPress themes use a text title and tagline, which can be specified in the General Settings of the WordPress administration panel. If you have some experience creating images in Adobe Photoshop, Adobe Illustrator, or Adobe Fireworks, you can easily create a custom logo for your blog. In this section, I'll show you how to create a logo in Illustrator, and then insert the logo into your blog. Determine your logo height The logo will be placed in the header.php file, which is one of the theme files available in the MyTheme directory you set up in Part 2 of this tutorial. Follow these step to determine the maximum height of the logo for this theme. 1. In Dreamweaver, open the index.php file at the root level (outside of the wp_content folder). 2. Click the Live View button in the Document toolbar to see the page in Live View. 3. Click Inspect to inspect the CSS on the page. 4. Position the pointer over the small cloud in the header below the Privacy Policy link in the upper-right corner.

5. When the header is highlighted , click (see Figure 1). 6. In the CSS Styles panel, click Current and look at the Properties for.bannerArea .container in the bottom of the panel. Notice that the height property shows that the div is 83px in height. This is the maximum height for the logo you are about to create. Note: If you can't see the Properties For area of the CSS Styles panel, you may need to resize the panel and make it taller.

Figure 1. Determine the height of the header for logo placement. Create your logo Using Adobe Illustrator CS5 (you can also use Adobe Photoshop or Adobe Fireworks), create a new file with a height of 83 pixels and a width appropriate for your logo (for example, 300 pixels). Here are the steps for creating the image in Illustrator: 1. Choose File > New and type a name for the image. 2. This will be a web file, so make sure to select Web from the New Document Profile in the New Document dialog box (see Figure 2). 3. Click OK.

Figure 2. Create a new document for the theme logo. 4. Select the Type tool and type Company Blog. Format it to fit and change it to the color you want. 5. Add a logo icon from the Symbols panel (Window > Symbols). 6. To export the image from Illustrator, choose File > Save For Web & Devices. 7. In the Save For Web & Devices dialog box, select PNG-24 from the Preset menu, and export the file as blog_head.png into the images directory of your local theme. Inserting the logo in your theme Now that you have a new logo, you can use it in your theme: 1. Back in Dreamweaver, open the file header.php in the MyTheme folder using the Files panel. This file contains the beginning of the page, the header, and the navbar. 2. Click the Code view button in the Document toolbar to switch to Code view. 3. Look for and delete the following code, which starts around line 20:
<p class="title"><a href="<?php echo get_option('home'); ?>/"> <?php bloginfo('name'); ?> </a><br /> <span class="description"> <?php bloginfo('description'); ?> </span></p>

4. After deleting the lines of code, make sure that the cursor is positioned where the code was. 5. To insert the new logo, choose Insert > Image (or press Ctrl+Alt+I) and browse to your local theme's images directory to select the blog_head.png file you just created. 6. If your accessibility preferences are set to prompt you for an image alt tag, type the name of your blog or any other descriptive keywords as the Alternative Text and click OK. Otherwise, you can specify the alternative text after the image has been inserted. 7. Click the Split button in the Document toolbar to see the Code and Design views side by side (by default). The Design view will now show the logo in the header (see Figure 3).

Figure 3. The new blog logo placed in the header. Linking the logo Next, you need to link the logo to your blog home page. Many users are accustomed to clicking a site logo to return to the home page. You can use either a static link or a dynamic link that is created when the blog is live. A static link will break if, for example, the blog URL changes. A dynamic link is a convenient way to create page menus, and you can later change page slugs without breaking links, as the IDs will stay the same. However, this can increase database queries. Follow these steps to first create a static link: 1. In Design view, click the logo image to select it. 2. In the Property inspector, change the Link to
http://www.yourblogdomain.com.

This link will not change, unless you edit it in the code or in the Property inspector again. Next, you will see how to create a dynamic link. 3. First, with the image still selected, delete the http://www.yourblogdomain.com link in the Property inspector. 4. In Code view, position the cursor immediately in front of the code for the logo that starts
<img src="images/blog_head.png

5. Insert the following code:

<a href="<?php echo get_option('home');?>">

This code will retrieve the home link you specified in your blog settings and assign it to your logo once your theme is live. The get_option('home'); call invokes a built-in function in WordPress to retrieve the home pageas specified by 'home'. 6. Add border="0" to the img tag to remove the border. 7. Add </a> after the img tag. The code should now look like this:
<a href="<?php echo get_option('home');?>"><img src="images/blog_head.png" width="300" height="83" alt="company blog" border="0" /></a>

The final step is to change the relative logo image link to an absolute link. As the image is currently inserted, your blog will look for the logo image in the images subfolder for the current page. WordPress permalinks can be configured many different ways; to ensure the logo will display on every page regardless of your permalink structure, the img tag needs an absolute link to the image. 8. Edit the src attribute of the img tag as follows (see Figure 4):
<a href="<?php echo get_option('home');?>"><img src="<?php bloginfo('template_url'); ?>/images/blog_head.png" width="300" height="83" alt="company blog" border="0" /></a>

Figure 4. The new code for the header logo. WordPress translates the bloginfo('template_url') tag into the proper directory structure for the location of your theme. Since the images directory resides within your theme folder, you will have an absolute link to your blog logo on every page of your blog.

Viewing the new logo Now you're ready to test the index page with the new logo. 1. First, make sure that your local server (XAMPP or MAMP) is running so that you can preview the theme files in Dreamweaver. 2. Click the index.php file, which should still be open, and switch to Live View to preview the page. You'll see the logo displayed on the page (see Figure 5). 3. To test the link, first Ctrl-click (Windows) or Cmd-click (Mac OS X) the Hello World link. WordPress will display the test blog post that was created automatically. 4. Now Ctrl-click (Windows) or Cmd-click (Mac OS X) the logo and you'll be taken back to the blog's home page.

Figure 5. The new blog logo as shown in the sample theme. Back to top

Styling theme post titles

Post titles should be styled to capture the attention of your readers. The post title font, color, spacing, and border for the sample theme are easily changed via the style sheet. The post titles on the home page (index.php) and the archives (archive.php) of the theme are enclosed in H2 tags with the class of pagetitle. The post titles on the individual pages (single.php and page.php) are H1 tags for SEO purposes, and the pagetitle class is also applied to the H1 tags.

The code for the index.php page in the MyTheme folder for the titles is as follows:
<h2 class="posttitle"><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>

By applying the posttitle class to both the H1 and H2 tags, post title tags on any page can be quickly changed, while still leaving the normal H1 and H2 tags with their default style. Figure 6 shows the default title style for the sample theme.

Figure 6. Default post title style. To change the post title style, you need to create the posttitle class in the style.css file. 1. With the index.php page still open and Live View still active, click the Inspect button in the Document toolbar. 2. Position the pointer over the Hello world! link on the page and click. In the Tag Selector at the bottom of the Document window, you will see <h2.posttitle>. This indicates that a posttitle class is applied to the h2 (heading). 3. Click the Split View button. 4. Open style.css from the MyTheme folder in the Files panel to show the style sheet in Code view. 5. Scroll to the bottom of the file and insert the following CSS code:

.posttitle { font-family: Georgia; color:#900; font-size: 24px; borderbottom: 1px solid #F2F2F2; padding-bottom: 5px; }

6. Click the Refresh Design View button in the Document toolbar (or press F5) to refresh Live View. The title inherits the font style from the H1 and H2 tags and the link color from the <a> tag. The color property added above only changes the color of the titles on the pages, not the post titles, because page titles (there aren't any on this page) are not links. So you need to add a new class specifically targeting the post title link to give it the same red color as the unlinked page titles. 7. Add the following code at the end of style.css:
.posttitle a { color:#900; }

8. To create a different hover state for the post title text, you can also add the following code:
.posttitle a:hover { color:#555; }

After adding the above code to the style.css file, the post and page titles are now red (see Figure 7).

Figure 7. The post and page titles changed. Every WordPress theme designer codes titles a little differently, so if you're customizing a theme other than the sample theme, you will need to identify the tags used in your theme before you can style the titles. Back to top

Adding a menu system

A menu system can add significant value to a theme. With WordPress version 3.0, there is an easy way to add a menu or multiple menu systems to your page. Follow these steps to get started: 1. Open the functions.php file in the MyTheme folder. 2. Insert the cursor right before the closing ?> and press Enter or Return to create some space. 3. Copy and paste the following code into the space you create (see Figure 8):
add_action( 'init', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'primary-menu', __( 'Primary Menu' ) ); }

Figure 8. Insert the functions.php code. This code will register the menu and tell WordPress that your theme will use the new menu system. The Primary Menu is the name of the menu, and you'll use this name to identify it in the

admin area of your WordPress blog. Likewise, primary-menu is the slug that you can use to identify the menu in the code. Note: You can also register multiple menus using register_my_menus and an array. For more information, see register nav menus in the WordPress Codex. Next you need to add code to the header of your theme to tell WordPress where to insert the menu. 4. In the Files panel in Dreamweaver, locate and open the header.php page in the MyTheme folder. 5. Switch to Code view. 6. Find the text "navigation goes here" in the code (around line 32 or so) and delete it, leaving the cursor where the text was. 7. Insert the following code:
<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

The final code will look like this (see Figure 9):
<div class="topnavigationgroup"> <?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?> </div>

Figure 9. Insert the header.php code. The next step is to customize the menu.

1. Open http://localhost/wp-admin/ in your browser. 2. When the WordPress login page appears, type your username and password, which you created in Part 2 of this article, and click Log In. Note: Typically, I use "admin" for the username and password on my local WordPress installation. This is not a good idea for WordPress installations on the web. 3. Click Appearance in the left sidebar and then click Menus. 4. Type Primary Menu as the Menu Name and click Create Menu. Recall that "Primary Menu" is the name of the menu specified in the functions.php file. You can create a whole series of menus by clicking the + (plus sign) to the right of the Primary Menu tab. You then tell WordPress which menu to use for this theme by selecting it from the Theme Locations menu. 5. In the Pages area, click View All, then select each of the pages listed. 6. Click Add To Menu. 7. Click Save Menu. The pages you selected are now listed as gray boxes in the Primary Menu area (see Figure 11). (Your menu may have different items in it depending on the pages created in your WordPress administration panel). You can drag the pages up or down to reorder how they will appear in the menu.

Figure 11. Edit the menu in the admin area. Note: If you drag the pages to rearrange their order, make sure to click the Save Menu button again. You can also add menu items that are not pages. Simply use the Custom Links section of the Menus page to add a URL and Label, which appear in the menu. 8. Back in Dreamweaver, refresh the Live View of the index.php page and the menu should appear showing any pages in your blog, including the home page (see Figure 12).

Figure 12. The menu in Dreamweaver. Of course, you may want to add some CSS styling to style that menu. I'll leave that part up to you. Basically you'll need to edit the style.css file in your MyTheme folder and add at least two styles; for example (see Figure 13):
li.menu-item { list-style-type:none; float:left; } li.menu-item a { padding:4px 10px; text-decoration:none; display:block; }

You can click the Inspect button in the index.php page and use Inspect mode to identify the class names by clicking on one of the menu items and looking at the tag selector.

Figure 13. The styled menu in Dreamweaver. In this part of the series you added a logo, styled your post titles, and added a menuand previewed all your changes within Dreamweaver. Part 4 of this series covers creating a custom home page for your blog with a custom features box.

Editing a WordPress theme with Dreamweaver CS5 Part 4: Building a custom home page
This is Part 4 of a four-part tutorial series on editing a WordPress theme in Adobe Dreamweaver CS5. Part 1 covers the basics of WordPress themes. Part 2 shows you how to set up a local server and your site. Part 3 covers how to customize a WordPress theme, with a logo, menu, and styled headers. This part focuses on creating a custom theme home page in which featured posts are displayed with a post thumbnail image. If you haven't already done so, complete the steps in Part 2 and Part 3 before completing this part of the tutorial series. This tutorial is divided into the following sections:

Building the new home page layout structure Creating featured posts in WordPress

Creating a custom featured post loop

Building the new home page layout structure

Most blog home pages consist of a list of posts displayed chronologically. The post data can either be a full post or a post summary depending on how the author has configured the blog. Some bloggers prefer to show a list of featured posts above the normal list of posts to highlight special content or articles. Using the sample theme for this series, you're going to create a new home page that you can use to highlight specific posts and display a thumbnail image for each. Create home.php from index.php As you may recall from the section on the WordPress file hierarchy in Part 1 of this series, index.php is the default theme file used if certain other PHP pages are not found in your theme. The home.php file is one of the specific pages that WordPress looks for when a visitor views your blog home page. If home.php is not found, it will use index.php instead. Since you are creating a custom layout for your home page to support featured posts, you need to create the home.php file as a starting point for the customization. Part 2 of this tutorial showed you how to set up a local site in Dreamweaver and unzip the sample WordPress theme files available in Part 1. You will be using the sample theme files in this customization. To create the home.php file for the new home page, follow these steps: 1. If you have not already done so, download and unzip MyTheme.zip, the sample file for this tutorial. 2. Open the sample theme's index.php file in the MyTheme folder in Dreamweaver. 3. Save the file as home.php in the same folder (the MyTheme folder of your themes directory). You now have a working home.php file for customization. Note: If you upload the home.php file to your local blog server and browse to your home page, WordPress will use the home.php file. However, since it is currently identical to the index.php file you created it from, you will not see any differences. Create a special featured post area The featured posts in the sample theme will be placed above the normal posts and right sidebar and just below the navigation bar. This area will have room to display three posts across the full 960-pixel width of the blog. Follow these steps to create the featured post area by inserting a wrapper container spanning the full page width and a 960-pixel wide container div that will hold your featured posts.

1. In Dreamweaver, open home.php if it is not already open. 2. In Code view, position your cursor immediately after <?php get_header();?> at the start of the file. For the following steps, you can manually type the container code or you can choose Insert > Layout Objects > Div Tag to create the new divs. 3. Create a div and set the id to featureWrapper. 4. Inside that div, create another div, and set the id to featuredposts. 5. Review the changes in Code view (see Figure 1).

Figure 1. New feature area code Now that you have the initial container code in place, you can apply some styles. 6. Add the following initial styles for the feature area to the end of style.css:
featureWrapper { width: 100%; clear: both; text-align: center; background: #333; } #featuredposts { width:940px; margin: 0 auto; text-align: left; height: 200px; color: #FFF; padding: 20px 0 20px 20px; }

Since you set up a local testing server with WordPress installed in Part 2 of this tutorial, you can preview your changes simply by saving the files in Dreamweaver and with the home.php page showing, click Live View. Then type http://localhost/ into the Address: bar at the top of the page and press Enter or Return to see the changes. Another way to test is by opening your test blog in a browser (the URL is usually http://localhost/). Don't forget to make sure that your local server is running (XAMPP or MAMP). If you are working on a remote blog, you can upload your files to your server and preview them in a browser as you make changes. Note: Simply clicking the Live View button with the home.php file open will typically not allow you to preview the page. You need to type in http://localhost/ into the Address; field and press Enter or Return.

The code changes you've just made create a basic new feature area (see Figure 2).

Figure 2. The new featured post area as displayed in the browser You can easily change the color of the feature area by simply changing the background color value for the featureWrapper ID in the style.css file. I used an arbitrary height value of 200 pixels for the featuredposts ID simply to make the area visible without any content present. You'll remove this value once content has been inserted. Create the featured post containers The goal is to have three posts across the feature area, so you need to create three containers to hold the post data. The featured posts will ultimately be pulled from your WordPress database using a custom loop. I'll cover this in more detail later in the tutorial, but it's important to keep in mind because it affects how you will want to structure the post containers. The container is simply a div that uses the float:left property; and the same container is repeated for each post in the custom loop. Initially you'll add three containers and some sample content to visualize the featured posts. Later, when you add the custom loop, you'll remove the extra code that is no longer needed. Follow these steps to create the three featured post areas: 1. In home.pho, create three identical divs within the featuredposts div you created earlier. 2. Set the class of all three new divs to featurebox (see Figure 3).

Figure 3. Feature area with three content boxes 3. In the style.css file, style the featurebox class by floating each box to the left, adding 20 pixels of right padding, and assigning a width of 290 pixels:
.featurebox { float:left; padding-right:20px; width: 290px; }

4. Back in home.php, add some sample content to the featurebox divs using an H3 tag for the post title and a paragraph of text representing sample post content:
<div class="featurebox"> <h3>This is a sample post title</h3> <p>Lorem ipsum dolor si amet ...</p> </div>

5. Preview your changes in Dreamweaver by clicking the Live View button with home.php showing. Then type http://localhost/ into the Address: bar at the top of the page and press Enter or Return to see the changes (see Figure 4). If that is already the case, then simply click the Refresh Design View button in the Document toolbar.

Figure 4. The content boxes, lightly styled The H3 tags inherit the color property from the H3 style for the rest of the theme. 6. To remove the bold property from the title font, change the color, and return the letter spacing to normal, edit style.css and add the following code (see Figure 5):
#featuredposts h3 { color: #F90; font-weight: normal; letter-spacing: normal; }

Figure 5. Content titles styled 7. To insert a thumbnail image and a text link into each sample post, modify each featurebox div as follows:
<div class="featurebox"> <h3>This is a sample post title</h3> <p><img src="thumb.jpg">Lorem ipsum dolor si amet</p> <p class="readit"><a href="#">Read more</a></p> </div>

8. To style the thumbnail images and the link states for text links in the featured area, add the following CSS styles to the style.css style sheet:
#featuredposts img { float:left; margin-right:8px; border: solid 3px #000; } #featuredposts a { color: #F90; } #featuredposts a:hover { color: #FFF; }

9. While you are editing style.css, you can also remove the CSS height property from the featuredposts ID, since you now have content to fill the container. 10. Next, add the following code immediately preceding the close of the featuredposts div in home.php:
<div class="clearboth"></div>

11. To create the clearboth class style in the style.css file, add the following: .clearboth
{ clear:both; }

Because the post container has a float:left property, you need the two preceding steps to clear the float for the featuredposts container to enclose the featurebox containers (see Figure 6).

Figure 6. Styled featured content section Back to top

Creating featured posts in WordPress

Now that you've completed the page structure modifications for the custom home page, you're ready to add some featured posts in WordPress. There are many ways to do this, but the most common approach is to use a special post category for the posts you wish to feature on your home page.

For this tutorial, you will create a post category in WordPress named featured, and any posts that you assign to that category will be featured on the home page. The loop you create for your featured posts area will only use the most recent three posts in the featured category. Set up a featured post category in WordPress To create the featured post category in WordPress, follow these steps: 1. Open a browser and go to your local WordPress admin area (typically the URL is http://localhost/wp-admin/) 2. Log in to WordPress. 3. In the left sidebar of the dashboard, click Posts. 4. Click Categories. 5. For the Category Name, type featured. 6. Also, for the category Slug, type featured (see Figure 7). 7. Click Add New Category to save your new category.

Figure 7. Creating the featured category in WordPress Create a post to use in the feature area Once you have created your featured category, you can create some new posts in the category. (You can also assign older posts to the featured category if you already have content on your blog.) After creating the post title and content, you'll need to create an excerpt, assign the post to

the featured category, and add a custom field to hold the URL of the thumbnail image for each featured post. Many WordPress users are unfamiliar with custom fields, but these fields are very helpful when designing themes. Custom fields allow you to assign specific keys and values to individual posts, which you can then access in your theme using the WordPress get_post_meta() tag. Follow these steps to create your first featured post: 1. Click Add New in the left sidebar of WordPress under the Posts tab. 2. Type the post title and post content. 3. Type an excerpt for the post in the Excerpt box (see Figure 8). Later you will code the feature area on the home page to use the custom excerpt entered for each featured post.

Figure 8. The WordPress excerpt entry 4. To assign the post to your new featured category, click the check box labeled feature in the Categories panel in the right sidebar (see Figure 9). If the featured category you created earlier is not immediately visible, scroll up or down until you see it.

Figure 9. Assign your post to the featured category 5. In the Publish panel at the top of your right sidebar, click Save Draft to save your changes. Your post will not be visible on your blog until you click Publish. You'll come back to this post to add the custom field with the URL to the thumbnail image after uploading that image. You can link to any image on any server as long as you have the full URL to the image to paste into the custom field value. 6. To upload an image, begin by clicking the Media tab on the left sidebar in WordPress. 7. Click Add New, browse to an image, and upload it to your server. 8. When the upload is complete, click the image in the Media Library to display the Edit Media page. 9. Select the entire contents of the File URL box and copy it. On Windows, you can rightclick and select Copy from the context menu (see Figure 10).

Figure 10. Copying the full image URL 10. Click the Posts tab in the left sidebar. 11. Click the name of your post title to edit the post. 12. In the Custom Fields options, type featurethumb for the Name; this is the name of the custom field used for this tutorial. 13. For the Value, paste the image URL that you copied from the File URL of the thumbnail (see Figure 11).

Figure 11. Add a custom field name and value 14. Click Add Custom Field. 15. Click Publish. Remember, you're going to need a minimum of three posts in the featured category to fill the new feature area in the theme. Add two more featured posts using the steps above (you can use the same image for all three posts or a different image for each post). You can then move on to coding your theme. Back to top

Creating a custom featured post loop

You now have a featured category, posts with excerpts, and thumbnails associated with each post via a custom field. Now it's time to jump back to Dreamweaver and add the code for the feature area post loop. Remove the sample content Earlier, you added some sample content in home.php for styling purposes, and now you need to take most of it out to prepare for the post loop. 1. Remove all but one of the featurebox divs in home.php. 2. In the remaining featurebox div, remove the sample post title text, but leave the H3 tags. 3. Remove the rest of the sample content, leaving only the paragraph tags in which the excerpt will be placed, the img tag, and the Read More sample link (see Figure 12). The featureWrapper div should now look like this:

<div id="featureWrapper"> <div id="featuredposts"> <div class="featurebox"> <h3></h3> <p><img src="thumb.jpg"></p> <p class="readit"><a href="#">Read more</a></p> </div> <div class="clearboth"></div> </div>

Figure 12. Extra code removed to prepare for loop code Create a new post loop WordPress posts are displayed using a loop, which is simply PHP code that processes the posts to display on your page. For the new feature post area, you will be creating a new loop that uses a special tag designed to perform database queries within WordPress. In the home.php file, the loop code will be positioned inside the featuredposts div and will loop through the featured posts category up to a maximum of three posts. The featurebox div, the H3 tag, and the paragraph tags will be inside the loop, so they will be repeated with each iteration of the loop. 1. Edit home.php and change the featuredposts div to the following:
<div id="featuredposts"> <?php $featuredPosts = new WP_Query(); $featuredPosts->query('category_name=featured&showposts=3'); while($featuredPosts->have_posts()) : $featuredPosts->the_post();?> <div class="featurebox"> <h3><?php the_title(); ?></h3> <p><img src="<?php echo get_post_meta($post->ID, 'featurethumb', true); ?>"/><?php the_excerpt(); ?></p> <p class="readit"><a href="<?php the_permalink() ?>">Read more</a></p> </div> <?php endwhile; ?> <div class="clearboth"></div> </div>

2. Once all the code is in place, save the home.php page, then click Live View. Type http://localhost/ into the Address: bar at the top of the page and press Enter or Return to see the changes. You should see three featured posts with thumbnails, excerpts, and links to the full articles (see Figure 13).

Figure 13. Live featured posts before editing the main loop filter Here's how the new post loop works. The custom post query starts immediately inside the featuredposts div with these lines:
<div id="featuredposts"> <?php $featuredPosts = new WP_Query();

This simply tells WordPress there is a new database query named $featuredPosts. The next line tells WordPress to retrieve a maximum of three posts from the featured category you created earlier:
$featuredPosts->query('category_name=featured&showposts=3');

The next line starts the actual loop that displays the featured posts:
while($featuredPosts->have_posts()) : $featuredPosts->the_post();?>

The following section is simply the code you created earlier using the sample content, but the sample content has been replaced with the actual WordPress tags that retrieve each post's title, the custom field value for the thumbnail image, the post excerpt, and the permalink to the full article on the blog.
<div class="featurebox"> <h3><?php the_title(); ?></h3> <p><img src="<?php echo get_post_meta($post->ID, 'featurethumb', true); ?>"/> <?php the_excerpt(); ?></p> <p class="readit"><a href="<?php the_permalink() ?>">Read more</a>&raquo;</p> </div>

The last bit of code closes the loop and closes the featuredposts div:
<?php endwhile; ?> <div class="clearboth"></div> </div>

Edit the main post loop Did you notice the problem in the blog preview? The featured posts are being duplicated below in the main blog post section of the home page. The main post loop needs to be modified so that it does not display posts from the featured post category. The first thing you need to do is identify the ID of your featured category. Simply follow these steps: 1. In WordPress, click the Categories option below Posts in the left sidebar. 2. Hover your mouse over the featured category and look at the status bar of your browser. The ending number is the ID of your featured category (see Figure 14).

Figure 14. Find your featured category ID Now you can edit the main loop to exclude this category. 3. Insert the following code just before the start of the main loop (not the featured posts loop), and replace the 10 value with your own featured category ID (see Figure 15). Make sure to leave the minus sign, as that tells WordPress to exclude the category.
<?php query_posts("cat=-10"); ?>

Figure 15. The code inserted in the home.php page Your featured category will now be excluded from your main post listing, and WordPress will display the rest of the posts you create, in the main area of the page. Try refreshing the blog in the Dreamweaver, with Live View selected by clicking the Refresh Design View button in the Document toolbar to see the change. Make sure that the URL in the Address: field is still http://localhost/. Back to top

Where to go from here

There are many more changes you can make to your own theme files to make them unique. This article has shown just a few of the possibilities. Now that you have a foundation for creating and editing your own theme files on your machine using Dreamweaver CS5, you're ready to customize your blog with your own look and feel.