Creating a multiscreen theme for WordPress using Dreamweaver CS5.5

You have several options to ensure that your WordPress site works properly in all major devices like phones, tablets, and desktops. In this tutorial you'll learn how to set up CSS3 media queries using a custom child theme, as well as preview and edit your styling within standard screen resolutions using Dreamweaver CS5.5. The theme will be optimized for use with smart phones, tablets, and desktop systems. If you are new to WordPress/Custom WordPress theming, you may want to step through Brian Wood's four-part series on Editing a WordPress theme with Dreamweaver CS5 first.

In order to follow along with this tutorial, you must have WordPress installed locally.

1. Download the current version of WordPress, if you haven't done so already, and install the software on your local server: XAMPP (Windows) or MAMP (Mac OS) that you've already installed. Alternatively, you can use any other set-up that supports PHP and has MySQL installed.
2. If you are setting up WordPress for the first time refer to Part 2: Setting up your site of Brian Wood's tutorial series for details on how to install WordPress.

NOTE: There is one step that you need to take before you start that is crucial: When you install WordPress 3.2.1, it has a default theme of "Twenty Eleven." This theme already has media queries built into the main style sheet (a different method from what you will learn in this tutorial). Since most of you are going to install another template, you need to start with a theme that has no media query conditions in it. You will need to switch to the "Twenty Ten" theme that still ships with WordPress 3.2.1.

3. Open wp-admin for your local WordPress site in a browser. The URL may look something like http://localhost/yourWPfolder/wp-admin .
4. Log in and go to Appearance > Themes and activate the "Twenty Ten" theme (see Figure 1). You can leave the admin open if you like.

Note: The sample download files that accompany this tutorial do not include the database file and are provided only as a reference.

A child theme in WordPress is the simplest theme possible. It typically only includes a style sheet and any necessary images and inherits the template files from a parent theme. Actually, the only required file in a child theme is a style sheet named style.css.

A child theme resides in its own directory in wp-content/themes and is created, most of the time, to make modifications to the parent theme. Next, you are going to create a child theme so that you can create styles that override the parent theme styles for different devices.

For this exercise, create a new directory named multiscreen within the wp-content/themes folder on your hard drive (see Figure 2).

In the multiscreen folder you will create a new style sheet using Dreamweaver. In this style sheet, you will insert the information header by which WordPress recognizes the child theme. As with any WordPress theme, the information header must be at the top of the file; the only difference is that in a child theme the Template: line is required, so that WordPress knows which theme is the parent of the child theme.

Here is an example information header of a child theme's style.css:

To create the required CSS file, follow these steps:

1. In Dreamweaver, choose File > New. In the New Document dialog box, select CSS in the Blank Page category to create a blank CSS file. With the CSS file open, delete all of the default content in it so that it's blank.
2. Copy the following code and paste it into the CSS file. Save it in the multiscreen directory you created, naming it style.css. Leave this file open in Dreamweaver.

The @import rule brings in the parent's style sheet.

The #site-title a rule defines a color (green) for the site's name, overriding the corresponding rule in the parent style sheet.

Note: Make sure that no other styles appear above the @import rule in the style.css file! This prevents the child theme from importing the parent template style sheet.

3. Go back to the admin area for your WordPress site that is still open in your browser. Go to Appearance > Themes and activate your new theme, named Multiscreen (see Figure 3).

4. After activating the new theme, go to the home page for your WordPress site in your browser. Note that the page looks the same as it did before; however, the site title is green as it is now controlled by the style.css style sheet in the child theme (see Figure 4).

This should show you that the style you added to the child theme overrides the same style in the parent theme. Next, you will start to set up styling that conditionally applies to the page depending on device screen resolution, using media queries. But first, let's take a look at what media queries are.

CSS3 has brought us so many new features like rounded corners and @font-face, to name a few. It also introduced media queries, which extend the functionality of old school CSS media types. A media query lets you change the styling for a page depending on the resolution or other features of the device it's being viewed in, without changing the actual page content.

Media queries can be applied to a WordPress theme in many ways. If you look at the example below, there are three links to style sheets in the same document. Each uses its own media type to define under what conditions it should be applied to the page content. Those media types are written generically as: media="some media type and (certain features)".

Looking at the first link tag with phone.css in it, it means that a certain style sheet (phone.css) should apply to a device of a certain media type (" screen") with a certain feature (maximum or minimum screenwidth). As mentioned earlier, you need only one version of the HTML file and the CSS file will switch whenever the conditions of an expression is met.

Here is an example of writing media queries in the HTML link tag:

Note: For more details on media queries, see David Powers's Introduction to media queries.

As you work with media queries, you will need a way to test them. In Dreamweaver CS5 and CS5.5, there is a feature called the Multiscreen Preview panel. This panel provides a preview of the page that you are currently editing as it would appear on devices supporting different screen resolutions (see Figure 5), and is something you will be using throughout this article.

In your WordPress site, you will see how to apply media queries using your child theme. Using this method, you don't change the style sheet of the parent theme, you just create styles to override them. Adding media queries to your child theme style sheet

Next, you specify the media queries within the child theme style sheet (style.css) you created earlier.

1. Back in Dreamweaver, in the style.css file for your child theme, delete the style #site-title a { color: #009900; }.
2. Copy the following code and paste it after: @import url("../twentyten/style.css");:

3. Save your changes.
4. In Dreamweaver, with your site set up, and the top-level index.php file open, click the Multiscreen Preview button in the Document toolbar to see what your page will look like in different device screen resolutions for phone, tablet, and desktop. Note that the site title color differs depending on the device viewport (Phone, Tablet, or Desktop) (see Figure 6). Close the Multiscreen Preview panel.

The next step will be to add styles to each media query that override specific parent templates styles. For instance, the "Twenty Ten" template has a style for menu items that look like this:

In order to have the menu items stack rather than float on phones, you can create the same style in your " max-width:320 px " media query, with a float property difference, like this:

We can't go through all of the styles you might create for phone viewing, because each template is different; what follows are some basic phone media query rules for the "Twenty Ten" theme.

5. Copy and paste the following snippet into style.css, replacing:

with:

6. Save the CSS file.

Next, you will preview the site in Dreamweaver so you can see the phone styling you added applied to the page.

7. Click the index.php tab to see it in the Document window.
8. Click the Multiscreen Preview button in the Document toolbar to see what your page will look like in different device screen resolutions for phone, tablet, and desktop. Note the styling difference in the Phone viewport (see Figure 7).

At this point, you could close the Multiscreen Preview panel and continue to edit the styling for the phone media query, then create styles for the media query for tablets (@media screen and (min-width:321px) and (max-width:768px ) as well, testing in the Multiscreen Preview panel as you go.

Next, we'll discuss an altrenative method for adding media queries and styling differences by editing the existing theme files.

Another method for setting up media queries is to apply them within the theme itself, by editing the theme files.

Remember that a simple WordPress web page is made up of three basic sections: a header, the content, and a footer (see Brian Wood's tutorial on Editing WordPress themes using Dreamweaver CS5). The header section, which lives in the header.php file, contains links to style sheets and JavaScript files, and can be found in your theme's folder.

You will need to add your media query links to the header section. For example:

Make a copy of style.css

For this example, you will activate the "Twenty Ten" theme again. You will then create copies of your default style sheet—your goal is to have three style sheets, one for each target: phone, tablet, and desktop.

1. In the admin area of your local site, go to Appearance > Themes and activate the "Twenty Ten" theme.
2. Navigate on your hard drive to the theme folder found here: wp-content/themes/twentyten. Open the file style.css in Dreamweaver and save it twice in that same folder as phone.css and tablet.css.

The default style.css will be for desktop.

3. In Dreamweaver, open header.php located in that same folder (wp-content/themes/twentyten). With header.php open, click the Code view button. Note that the href for the style sheet uses the bloginfo function (see Figure 8). This function displays information about the blog and can be used anywhere within a page template. In this example, the bloginfo('stylesheet_url') outputs to: http://localhost/yourfoldername/wp-content/themes/twentyten/style.css.

4. Choose Site > Site-Specific Code Hints and verify that you have set up site-specific code hints for WordPress. (For more information on site-specific code hints see part 2 of Brian Wood's tutorial series).
5. Place the cursor after bloginfo and press Ctrl+spacebar; note that bloginfo is defined in the file general-template.php, which is located in wp-includes/general-template.php (see Figure 9). You can use site-specific code hinting to help us code, but also to help see where things like the bloginfo() function are defined (in what files within our WordPress install).

6. In the wp-includes folder of your local WordPress install, open general-template.php. The output for bloginfo uses the get_bloginfo output, found at around line 400 in the "Twenty Ten" theme general-template.php file. Scroll down to line 436 (roughly) and you will see that stylesheet_url is defined using get_stylesheet_uri(). Insert the cursor after get_stylesheet_uri and press Ctrl+Spacebar again. You can see that get_stylesheet_uri is defined in theme.php (see Figure 10).

7. Open theme.php in the same wp-includes folder and copy and paste the get_stylesheet_uri() function twice (it's found around line 80 or so in the Twenty Ten theme file).
8. Rename the second get_stylesheet_uri() function to get_stylesheet_uri_phone() and change the URI from '/style.css' to '/phone.css.'
9. Rename the third get_stylesheet_uri() function to get_stylesheet_uri_tablet() and and change the URI from '/style.css' to '/tablet.css.' (see Figure 11).

10. Save theme.php and close it.
11. Go back to general-template.php, and so that the output can be used, you need to add a case for phone and tablet. Copy the following code and paste it twice, right after the original:

12. Change the two new cases to match the screen shot in Figure 12. Save and close the general-template.php file.

Next, you need to add the links for the phone and tablet CSS to the header.php file.

13. Paste the following code to the head section of header.php, replacing the existing CSS link tag (see Figure 13):

14. Save header.php and close the file.

With the new style sheets, changes to the theme files, and new links in the header.php, you could test your site. Unfortunately, there are no differences between the style sheets yet, right? That's what you'll do next in Dreamweaver.

In Dreamweaver CS5.5, you now have the ability to change the viewable area in the Document window in Live and Design View to match certain device resolutions. This makes it easy for you to not only check the style sheets for each applicable media query, like you can in the Multiscreen Preview panel, but also make edits. Using this new feature, Code Navigator, and the CSS Styles panel, you'll edit several styles for the phone style sheet to get you started.

1. With the index.php file stlll open in Dreamweaver, and Live View selected, click the arrow to the right of the Multiscreen Preview button. Choose 320 x 480 Smart Phone from the menu. This forces the viewable are to 320 x 480 and tells Dreamweaver to apply the correct style sheet according to the media types you created (see Figure 14). Don't forget, the formatting shouldn't change on the page since you haven't edited the styles yet.

Tip: You can also choose View > Window Size to change the view size.

2. To start editing the phone CSS, position the cursor over the header picture of the trees and press Ctrl+Alt (Windows) or Cmd+Opt (Mac OS) to open the Code Navigator. When the menu appears, note that of the three style sheets, you only see the phone.css styling listed. You don't need to worry about editing the wrong CSS file; Dreamweaver displays the correct CSS file in the current context of the resolution chosen (320 x 480). Position the cursor over the "#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper" style in the list and click it (see Figure 15). This opens the phone.css style sheet and allows you to start to make edits.

3. In the CSS Styles panel, you can see that only phone.css is listed and the style is highlighted in the list. Change the width of the style "#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper" to 100% or whatever you want in the "Properties for" area at the bottom of the panel (see Figure 16).

4. Position the cursor over the image again and once again press Ctrl+Alt (Windows) or Cmd+Opt (Mac OS) to open the Code Navigator. Click the style #branding img and change the styling in phone.css to look like this:

You can also use Inspect mode to pinpoint styles to edit, then use the CSS Styles panel to modify the phone.css styling. That's what you'll do next.

5. Click Design view in the document toolbar. Then, click the Inspect button (next to the Live View button).
6. Click Switch Now in the Information bar that appears right above the page (see Figure 17). This shows Live Code in split view and shows the CSS Styles panel in Current mode.

7. Position the cursor on the left edge of the viewable area of the page, until you see the div with the style #wrapper selected in the code (see Figure 18). Click. This freezes Inspect mode so that you can focus on editing the #wrapper style.

8. In the CSS Styles panel, change the padding property to 0 in the #wrapper style.

Next you will change the #site-title properties.

9. Click the Inspect button again to begin inspecting the page.
10. Position the cursor over the site title and move the cursor just to the right of the text and click to select the <h1> in the Live Code. You should see the #site-title style selected in the CSS Styles panel.
11. In the CSS Styles panel, change the float property to none and disable the width by clicking in the blank space to the left of the word width. You can also add margin to the left to push the title over (see Figure 19).

There are lots of other styles you will need to edit in order to make the page fit properly within smart phone resolution (see Figure 20). Here is just a sampling:

• To make the nav fit horizontally, you need to edit the #access .menu-header, div.menu style by either removing the width or adding a % based width.
• To make the menu items vertical, you would edit the #access .menu-header li, div.menu li style by removing the float. You could also add some border radius to that same style using the new CSS3 border-radius pop up in the CSS Styles panel.
• You would also remove the floats from the columns (the #primary, #secondary style and the #container style).

• Edit the margin on the #content style.
• Depending on what information you want to keep, you could set the display property for certain styles to none to hide content.

Continue editing the phone styling, then change the viewable width in Dreamweaver to match tablet resolution (768 x 1024) and begin editing the styling for the tablet.css using the methods you just learned.

Using these different techniques, you can easily apply media queries to your WordPress theme and create a foundation for customizing the look and feel of your WordPress site for various devices.