If you’ve read Part I of this series, you should have a working copy of WordPress running on your computer—or at least you know how to set it up. In this second part of the series, I’ll show you how to use Dreamweaver to create your own WordPress design—or actually, how to customize one of WordPress’s many themes to match the look and feel you’re after.
About WordPress Themes
As you learned in the previous article, WordPress is a content management system (CMS) used to display content stored in a database. WordPress doesn’t have a bunch of HTML files in the sense you’re probably accustomed to. You don’t build a HTML file for every page of your site with WordPress; instead, you or your client uses an administrative panel to enter and manage the site’s content. The actual text of a page is stored in a database, and when a visitor goes to a page on a site, WordPress retrieves the content from the database and merges it with HTML templates.
Because WordPress themes include complicated PHP programming to control how content is displayed on a page, it’s usually best for designers new to WordPress to start with an existing theme and alter its CSS and HTML until you like how it looks. While creating a theme from scratch is definitely doable, it takes a lot more work (and knowledge) than simply editing an already created theme.
Anatomy of a Theme
A theme’s files are stored inside a folder that’s inside WordPress’ “themes” folder, which is inside the “wp-content” folder within the main WordPress folder. If you followed along with the instructions in Part I, you’ll find the WordPress themes for Windows at C:wampwwwblogwp-contentthemes, and on Macs as Applications:MAMP:htdocs:blog:wp-content:themes.
Go ahead and look there now. Unless you’ve added themes, you should see a single folder titled “twentyten.” Twenty Ten is the default theme that ships with WordPress, and it’s a good starting point for developing your own theme. But rather than muck around with the original theme files, it’s best to make a copy, so duplicate that folder and name it “creativepro”. Now there should be two folders—twentyten and creativepro—in the templates folder.
Launch WAMP or MAMP and start Dreamweaver. (Read the previous article if you need to refresh your memory of WAMP/MAMP.) You’ll begin by looking at the files that make up this theme and editing some important information in the CSS file that tells WordPress about this theme.
1. In Dreamweaver, open the Files panel if it’s not already open (Window > Files). If you followed the instructions from the previous article, you should have a blog folder at the top level of your site. Expand that folder by clicking the + (Windows) or arrow (Mac) to the left of “blog”. Next, expand the “wp-content” folder to see the files and folders inside it.
2. Locate and expand the “creativepro” folder inside the “themes” folder. The files panel should look something like Figure 1.
Figure 1. A WordPress theme is composed of dozens of PHP, CSS, and image files. The PHP files contain both the HTML used to display your blog posts as well as the PHP programming used to retrieve content from the WordPress database.
Each theme is made up of a style sheet (style.css), a bunch of PHP files—404.php, archive.php, and so on—an images folder, and a few other files. The style.css file defines the look for the theme and the PHP files are used to build the content for each page on the blog.
Some PHP files are used to specific types of pages: for example, a single blog post uses the HTML and PHP programming inside the single.php file, while the archive.php file provides an archive list of blog posts. Some of the PHP files are used on multiple pages: for instance, header.php provides the HTML and PHP for the first chunk of code that appears on a page, including the <head> section with the page’s title, and a link to the site stylesheet.
If you’re new to PHP-driven web development, the way WordPress assembles a page may seem odd. Instead of having a single file with all of the HTML code for a page, WordPress combines several files to create a single page. Each file contains a bit of the code needed for the page, so the header.php file adds the <head> content; the sidebar.php file adds content in a sidebar on the page; the footer.php file adds HTML that appears at the bottom of the page (like a copyright notice); and other files like index.php and single.php provide the main content that appears on each type of page.
This technique is really efficient. Since it’s common for pages on a site to share the same header, footer, and sidebar sections, by separating that content into individual files, WordPress can combine those files with different presentations of main content for different types of pages—like the blog’s homepage, a single blog post, a single page of content, and a search results page. In other words, when you visit a blog post, WordPress combines the HTML and programming code for the header.php, sidebar.php, footer.php, and single.php to create a single HTML file; and when you visit an archive listing of blog posts, WordPress combines the header, footer, and sidebar with the code in the archive.php file.
While you can edit the code inside each of these PHP files, you’ll spend a lot of your time with the theme’s stylesheet: the style.css file. Because CSS controls how the HTML for a site looks, to customize the look and feel for a WordPress site you’ll edit and add styles to the stylesheet. Let’s take a look at it:
In Dreamweaver, open the style.css file. You’ll notice that the code begins with a block of comments with the name of the theme and other information. This comment isn’t just there to document who created the CSS file. WordPress reads this information when you visit the “Appearance” tab in the WordPress administrative panel. The theme name listed in the stylesheet, for example, is used to identify the theme in the administrative panel.
Take the following steps to make changes to this file and enable this new theme in the WordPress administration panel:
1. In the stylesheet.css file, change the “Theme Name” to “CreativePro”. Note that you have to leave “Theme Name: ” in place in order for WordPress to recognize this as a theme. In other words, you change “Theme Name: Twenty Ten” to “Theme Name: CreativePro”.
2. Change the “Theme URI” to http://www.creativepro.com (or the URL of your choice.)
3. Change the “Description” to “The CreativePro theme is an adaptation of WordPress’ 2010 Theme”.
4. Change the Author to “Me and WordPress” (or whatever you’d like).
5. Save the file.
6. Now go to the WordPress administration dashboard by typing http://localhost/blog/wp-admin/ into your web browser’s location bar. (You may need to login using the name and password you used when setting up WordPress as described in the first article in this series.)
7. In the left navigation bar, click the Appearance button. This takes you to the Manage Themes page. You’ll notice that your new theme appears below the 2010 theme.
8. Click the Activate link below the new CreativePro theme. The CreativePro theme is now listed at the top of the page as the new active theme (Figure 2). Any changes you now make to those theme files will be reflected in the blog.
Figure 2: The screenshot that appears with each theme is simply a PNG file stored in each theme’s folder. You can create your own screenshot for your theme. Just create a 300 pixel x 225 pixel graphic; save it as “screenshot.png” in your theme’s folder. Iin this exercise you’d save it in C:WAMPwwwblogwp-contentthemescreativepro or Applications:MAMP:htdocs:blog:wp-content:themes:creativepro . Click the image to see a larger version.
Using Dreamweaver’s Live View With WordPress
Editing a WordPress theme isn’t always easy. Since any particular page on a blog is actually a combination of many different files, knowing which file controls which part of a page isn’t particularly obvious. In addition, just because the site-wide stylesheet, style.css, contains all the formatting information for the site doesn’t mean you know which style formats which chunk of content.
Fortunately, Dreamweaver CS5 introduces a more intuitive way to view and edit a theme. Dreamweaver CS5 lets you preview your blog directly within Dreamweaver, meaning that you can see fully assembled WordPress pages in Dreamweaver’s Live View. This lets you immediately preview changes you make to files. You can even navigate within Dreamweaver, jumping from page to page of your blog by clicking a link in Live View. Best of all, Dreamweaver lets you see which CSS styles format a given page element, and lets you update the style to immediately change the formatting of a page.
Using Dreamweaver in this way isn’t intuitive, however. You need to follow a few steps to get going:
1. In Dreamweaver’s Files panel, locate and open the index.php file inside the WordPress folder. This step can be confusing, because if you look closely there are a lot of index.php files: one inside each theme folder, one inside the themes folder itself, one inside the wp-content folder, and so on. The one you’re after is the master index.php at the topmost folder containing WordPress; if you followed the steps in the previous article, you should find it in the folder named “blog”. (This is where you placed WordPress.)
This page is blank, and even if you go into code view you’ll see very little code. Nonetheless, this single file is the master control file for WordPress. It’s the file that’s loaded whenever someone visits your blog, and it decides which other files are needed to display the posts, archives, and homepage of the blog.
2. Click the “Discover” link that appears just above Dreamweaver’s Design view area of the page (circled in Figure 3). You may see a dialog box appear; if so, click Yes to continue. Note that the Discover feature works only if you turned on your local web server (WAMP or MAMP).
Figure 3: When working with PHP-driven web sites, Dreamweaver’s “Discover” link finds all the files needed by the current PHP page. Click the image to see a larger version.
Because WordPress puts together multiple files to create a page, you may need to edit two, three, or more files to change how a single page looks on your blog.
Dreamweaver’s “Discover” tool loads all of the files that are used by WordPress and displays them in the related files toolbar.
3. Click the “Live View” button at the top of the document window (Figure 4) to see the page as it appears when run through a Web server. You’ll see the homepage for the blog. In addition, the Related files toolbar lists all of the files WordPress uses—and there are a lot! There are so many that you need to open the “Show More” menu (circled in Figure 4) to see all of the files WordPress needs to use to display a single page.
Figure 4: WordPress requires literally dozens of other files to work. Most of these should never be changed, since this can break WordPress. Click the image to see a larger version.
You should not change most of these files; WordPress needs them as is. The only files you should work with are your theme files. Fortunately, Dreamweaver provides a way to show only certain files.
4. Click the Filter button on the right edge of the related files toolbar (circled in Figure 5), then select “Custom filter” from the menu that appears. In the dialog box that appears, type “style.css;header.php;footer.php;sidebar.php;index.php” (don’t include any spaces) and press the OK key. The related files toolbar now lists just a few files from the CreativePro theme.
Figure 5: To reduce the number of files listed for WordPress in the related files toolbar, you can create a Custom Filter.
Editing HTML in a WordPress Theme
To change the HTML in a WordPress theme, you must open one of the theme’s PHP files. For example, the header.php file contains the HTML that’s at the beginning of a page, while the sidebar.php file adds content to the sidebar. Edit the code inside any of these files to change the theme’s appearance. For example, let’s say you want to remove the giant image that spans the length of the page for the theme we’re working with.
1. Click the “Split” button in the document toolbar to display both the page design and the code.
2. Click “header.php” in the related files toolbar to display the code for the header of the page.
3. Locate the code that begins with “<?php // Check if this is a post” (lines 68 and 69). Select the code from that point down to and including line 78, which ends with “<?php endif ?>” (Figure 6).
Figure 6: WordPress files include a mixture of HTML and PHP code. Click the image to see a larger version.
4. Hit the delete key to remove this code. Save the file and hit the “Refresh” button (circled in Figure 6 above). The image on the page disappears.
Now you’ve removed the default image that comes with the Twenty Ten theme. But what if you want to include your own images on a page? Unfortunately, you can’t simply use Dreamweaver’s “Insert Image” command. Instead you have to use a bit of PHP. Here’s how:
1. Put any images you want to be part of your theme in an images folder inside the theme’s folder. If you’re following along with the setup from this series, you’d put image in C:WAMPwwwblogwp-contentthemescreativeproimages (Windows) or Applications:MAMP:htdocs:blog:wp-content:themes:creativepro:images (Mac).
2. Add an <img> tag to the HTML of the file where you wish the image to appear. For example, to add an image to the banner area of a WordPress theme, open the header.php file and place an <img> tag somewhere inside the <div id=”masthead”> section.
Let’s assume you have an image named logo.png that is 100 pixels wide and 25 pixels tall. You could add this code:
<img src=”/images/logo.png” width=”100″ height=”25″>
However, the code won’t work just yet. Because the image is buried inside your theme folder, you need to give WordPress the proper page to that theme’s folder. To do that, you add a bit of PHP.
3. Edit the <img> tag you added in the previous step by adding <?php bloginfo(‘template_directory’); ?> directly after src=”. For example, you’d re-write the code above like this:
<img src=”<?php bloginfo(‘template_directory’); ?>/images/logo.png” width=”100″ height=”25″>
The <?php bloginfo(‘template_directory’); ?> code tells WordPress to find the proper URL for the current theme’s folder and add it to the HTML.
Using Dreamweaver’s Inspect Mode
While editing the code inside a theme’s PHP files can let you change the HTML used in your blog, navigating the often strange-looking PHP code can be a bit daunting. Fortunately, the easiest way to make a theme look different is to edit the CSS rules in the theme’s stylesheet, the style.css file. The real problem is figuring out which style applies to which page element; but, thanks to Dreamweaver CS5’s “Inspect” mode, finding the style you’re after is a snap.
Dreamweaver’s Inspect mode lets you mouse around a page, click on a page element, and immediately see the CSS style associated with that element. You can then edit the CSS and update the look of the page. Here’s how to use Inspect mode:
1. In the CSS Styles panel, click the Current button (circled in Figure 7). The Inspect Mode works in conjunction with the Current mode of the CSS styles panel to list styles applied to a page element.
Figure 7: Use Dreamweaver’s Inspect Mode to analyze the CSS applied to elements on a page. Click the image to see a larger version.
2. Make sure Live View is on. (If you’re continuing from the previous numbered list of instructions, you’re already in Live View, and the Live View button in the Document toolbar will be highlighted in blue. If it’s not, then click the button).
3. Click the Inspect button directly to the right of the Live View button.
4. Mouse around the page. As you do this, Dreamweaver highlights page elements.
When Dreamweaver highlights an element while in Inspect mode, you’ll find several helpful clues to help you navigate the document’s structure and CSS:
* A light-blue background indicates the content area of an element. For example, in Figure 7 above, the blue area represents a <div> tag and the area for content inside that div.
* A yellow background indicates a margin on the element. In Figure 7, the yellow stripe at the top of the page is a top margin that’s applied to the div.
* A purple background indicates padding. In Figure 7, the purple stripe on the left side of the page represents a 20 pixel padding applied to the div.
* In the tag selector at the bottom of the page, Dreamweaver highlights the tag you’re mousing over. In Figure 7, Dreamweaver is highlighting a button-like object that reads <div.hfeed#wrapper>. This indicates a <div> tag that has a class of “hfeed” applied to it, and an ID of “wrapper”.
TIP: When mousing over an element in Inspect mode, press the left arrow key to highlight the tag that wraps around the element (also known as the immediate ancestor). For example, if you mouse over a <div> tag and then press the left arrow key, Dreamweaver highlights the closest tag that wraps around that div. Continue pressing the left-arrow key and you’ll eventually highlight the <body> tag, which wraps around all content on a page.
The CSS Style Panel’s Current Mode
The real benefit of Inspect mode comes when the CSS Styles panel is open in Current mode. Current mode displays the current styles and style properties that apply to a selection. For example, if you select a paragraph on a page, you can use Current mode to see not only the properties applied to that paragraph (like font, font-size, margin, padding, and so on), but all of the styles that affect that paragraph.
In Current mode, the styles panel is divided into three panes (Figure 8). The top pane, the Summary view, lists all CSS properties that apply to the current element. Due to the rules of CSS, a single element may receive styling instructions for more than one style. For instance, a font applied to the <body> tag is inherited by all tags inside the body, so a particular paragraph on a page may use the font specified for the body. Likewise, more than one rule can apply to the same element; for example, if a page has a paragraph with a class of “copyright” applied to it, that paragraph will receive style information from both a “p” tag style and a class style named “.copyright”. The Summary pane then looks at all the styles applied to an element and figures out exactly which properties apply to it.
Figure 8: The Current view of Dreamweaver’s CSS Styles panel is one of the program’s most valuable features. It lets you quickly determine how an element is styled and which CSS rules are involved.
The middle pane is actually two panes, but the one you want to use is the Cascade view, which is accessed by clicking the cascade button (circled in Figure 8 above). In Cascade view, this pane lists all of the styles that apply to the current element. Even better, the styles are listed in order of specificity. “Specificity” refers to the rules a web browser uses to determine what to do when two styles give conflicting information; for example, one style says “make the text blue” and another style that applies to the same element says “make the text red.” The Cascade pane lists styles from least to most “specific”—in other words; the style listed last is most powerful and will win out when there are any style conflicts.
Finally, the bottom pane, the Properties pane, lists all of the CSS properties of the style highlighted in the middle pane. For example, in Figure 8, the ID style #wrapper is highlighted in the middle pane; the bottom pane, lists the properties defined in that style: background, margin-top, and padding. You can edit style properties in this pane, or double-click the style in the middle pane to open the style in Dreamweaver’s CSS Rule Definition window for editing.
Editing WordPress CSS In Dreamweaver CS5
Now that you know how Dreamweaver’s Inspect mode works, you can use it to edit the styles in a WordPress theme:
1. In Dreamweaver, view the index.php page in Live view. (If you’re not in Live View looking at the blog’s homepage, re-do this article earlier steps.)
2. Click the Inspect button.
3. Mouse over the Site’s title in the top-left of the page (in my example, it’s called “Super Blog”) and click. This selects the headline and highlights the “#site-title a” style in the CSS styles panel (Figure 9).
Figure 9. Use Dreamweaver’s Inspect Mode and the CSS Styles panel to locate and modify the styles that apply to different page elements.
4. Double-click the “#site-title a” style to open Dreamweaver’s CSS Rule Definition window. Change the text color from black to red, and click the OK button. You’ve just updated the headline for the page. (You could make any changes you’d like, such as using a different font, adding a background color, and so on.) Next, you’ll change the background color of that black navigation bar.
5. Click the Inspect button again to turn it on. (Dreamweaver automatically exits Inspect mode when you click on a page element.)
6. Mouse over the black bar with the “Home” and “About” links, then click. Dreamweaver lists some new styles in the CSS styles panel, but the one that’s highlighted doesn’t have a background color.
7. In the Cascade pane of the CSS styles panel, click the style “#access”. You’ll see a black background color listed in the Properties pane. Frequently, the styling you see on an element comes from style higher up in that list, so you may need to click on several styles in the Cascade pane to find the exact style you want to change.
8. Double-click the #access style to open the CSS Rule Definition window. Click the Background category and change the background color to blue. Click OK to close the window.
You can use this basic technique to change all of the formatting for a WordPress site. Simply by going into Inspect mode and clicking on the thing you want to change, Dreamweaver helps locate the styles you want to update.
Navigating Your WordPress Site in Dreamweaver
So far, you’ve been editing the appearance of this blog’s homepage. However, a WordPress blog has many different kinds of pages: a page for a single blog post, a page listing an archive of previous posts, and so on. If you want to edit the styles of a single blog-post page, you can’t simply open a single file. Because WordPress builds pages on the fly, the only way to really see a single blog post is to visit it from the homepage by clicking a link to it.
Fortunately, Dreamweaver CS5 includes a nifty feature that lets you click through your WordPress blog while in Live View. In other words, you can use Dreamweaver like a web browser clicking through a site and analyzing its CSS. Here’s how it works:
1. Turn on Live View (if the Live View button is highlighted blue, then Dreamweaver’s in Live View).
2. Ctrl-click (Windows) or Command-click (Mac) any link on the page. Dreamweaver follows the link and loads the page. If you want to be able to click any link to follow, turn on “Follow Links Continuously” from the Navigation toolbar (Figure 10).
Figure 10: Avoid having to hold down the Ctrl or Command key to follow a link on a page while in Live View. Jst choose “Follow Links Continuously” from the Browser Navigation toolbar. Click the image to see a larger version.
3. Follow the steps in the previous section of this article and use the Inspect mode to inspect the CSS for that page. You can continue this process, clicking a link to see a different type of page (such as an archive) and using the Inspect mode to find and edit the styles that format that type of page. In this way, you can navigate through your WordPress blog and change any or all the styles to match the look you’re after.
As you can see, Dreamweaver provides many useful tools that help you more easily find and change the HTML and CSS of a WordPress site. Completely revamping the look of a theme is still a lot of work—lots of CSS to edit!—but Dreamweaver’s ability to see completely assembled WordPress pages, and analyze and edit the CSS used to format those pages, is a huge time-saver.
In the final article in this series, I’ll take you through the process of moving your local WordPress site from your computer to a live web server for the world to see and enjoy.