Editing a WordPress theme with Dreamweaver CS5 – Part 3: Adding a logo, header styles, and menu

Additional Requirements

WordPress 3.0 or later

• Learn more

XAMPP (if you have Windows)

• Learn more

MAMP (if you have Mac OS X)

• Learn more

This is Part 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.

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.

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:

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).

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:

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 page—as 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:

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):

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.

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:

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.

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:

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:

8. To create a different hover state for the post title text, you can also add the following code:

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

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):

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:

The final code will look like this (see Figure 9):

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.

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).

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):

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.

In this part of the series you added a logo, styled your post titles, and added a menu—and 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.

Back to top