Editing a WordPress Theme With Dream Weaver CS5

8/2/2019 Editing a WordPress Theme With Dream Weaver CS5

1/46

Editing a WordPress theme with

Dreamweaver CS5 Part 1: Learning the

basicsThis 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 systemand more.

The real beauty of WordPress is its separation of content and style. The content of a WordPressblog 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 twentytento 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 themeusing 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 throughWordPress.com. If you choose to host it using WordPress.com, you will access it through a URL

such as askbrianwood.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, andyou'll need your own domain name.
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html#t1


2/46

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 automaticallyinstall 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 aregoing 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 whereyou 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, includingadministration 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 liveWordPress 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


3/46

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. Confirm your theme supports widgets2. Acquire the code for the widgets you have activated3. Populate the widgets from the database or external source4. 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 allowcomments, if the post is password protected, and many more options.

Because WordPress assembles pages dynamically, you don't have to rebuild of all your pageseach 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 aminimum.

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


4/46

1. Downloadand unzip the sample files in MyTheme.zip.2. Start Dreamweaver.3. Open the index.php sample file.4. Click Code to open Code view.

A simple WordPress web page is made up of three basic sections: a header, the content, and afooter (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 , , and

. It also contains links to style sheets, JavaScript, and more. The content section containsyour 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 and 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 calledindex.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.
http://download.macromedia.com/pub/developer/dreamweaver/MyTheme.ziphttp://download.macromedia.com/pub/developer/dreamweaver/MyTheme.ziphttp://download.macromedia.com/pub/developer/dreamweaver/MyTheme.zip


5/46

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

. . . . . .

These tags (get_header, get_sidebar, and get_footer) tell the PHP engine to find the headercontent (header.php), the sidebar content (sidebar.php), and the footer content (footer.php) andinclude 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 yoursite 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 willalso 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:


6/46

Figure 4. The loop in the index.php code

The Loop is used to display your blog posts, and it performs several functions. First, itdetermines 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 theBlog Design and Layoutsection of the WordPress Codex.

Note: Throughout this tutorial series I refer to the WordPress Codex, which is the authoritativedocumentation 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-incoding 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 ofexcellent 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 orcustomizing your own WordPress themes.
http://codex.wordpress.org/Blog_Design_and_Layouthttp://codex.wordpress.org/Blog_Design_and_Layouthttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://codex.wordpress.org/Blog_Design_and_Layout


7/46

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 featurelends 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 andexplore 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

InPart 2of 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 1covered 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 andtesting server, setting up code hinting, installing theme files, and previewing a main theme file.

This part is divided into the following sections:
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html


8/46

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 properlyconfigured 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 filesare 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 (forexample a WordPress file) from that site in Dreamweaver and click Live View, Dreamweaveruses the testing server to render a live preview of the file.
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#basicshttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#basicshttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#wordpresshttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#wordpresshttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#themehttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#themehttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#themehttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#wordpresshttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html#basics


9/46

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 storeyour 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 Dreamweaverfor 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 ofmissing 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
http://www.adobe.com/devnet/dreamweaver/articles/setup_php.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_php.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_php.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_php.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_php.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_php.html


10/46

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. Visithttp://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 youinstalled 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 youinstalled the personal web server (XAMPP or MAMP), phpMyAdmin was installed as anadministrative interface for your MySQL databases. For more details, seeUsing 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.
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://wordpress.org/download/http://wordpress.org/download/http://wordpress.org/download/http://codex.wordpress.org/Installing_WordPress#Using_phpMyAdminhttp://codex.wordpress.org/Installing_WordPress#Using_phpMyAdminhttp://codex.wordpress.org/Installing_WordPress#Using_phpMyAdminhttp://codex.wordpress.org/Installing_WordPress#Using_phpMyAdminhttp://codex.wordpress.org/Installing_WordPress#Using_phpMyAdminhttp://codex.wordpress.org/Installing_WordPress#Using_phpMyAdminhttp://wordpress.org/download/


11/46

Follow these steps to create a database in phpMyAdmin:

1. Below the text box labeled Create new database (see Figure 3), type wordpress as thedatabase 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 selectedfrom 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 databaseyou'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 Allto select all privileges, and click Go.

9. On the resulting page, make note of the host name listed after Server: at the top of thepage. (This will usually be localhost.)


12/46

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 webserver 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 aConfiguration File button.

3. Click the Lets Go button to go to a page that allows you to enter your databaseinformation.

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 seeStep 5:

Run the Install Script in the WordPress codex. WordPress will then be installed and you will bedirected 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
http://codex.wordpress.org/Installing_WordPress#Step_5:_Run_the_Install_Scripthttp://codex.wordpress.org/Installing_WordPress#Step_5:_Run_the_Install_Scripthttp://codex.wordpress.org/Installing_WordPress#Step_5:_Run_the_Install_Scripthttp://codex.wordpress.org/Installing_WordPress#Step_5:_Run_the_Install_Scripthttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://codex.wordpress.org/Installing_WordPress#Step_5:_Run_the_Install_Scripthttp://codex.wordpress.org/Installing_WordPress#Step_5:_Run_the_Install_Script


13/46

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 theWordPress 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/wp-

content/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 typicallyhttp://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 ManageThemes.
http://localhost/wp-admin/http://localhost/wp-admin/http://localhost/wp-admin/


14/46

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 themefiles 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 toSetting up a Dreamweaver sitein

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 themefiles. Follow the detailed instructions in David Powers' articleSetting up a local testing server inDreamweaver 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).
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7f62a.htmlhttp://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7f62a.htmlhttp://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7f62a.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_testing_server.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_testing_server.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_testing_server.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_testing_server.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_testing_server.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/setup_testing_server.htmlhttp://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7f62a.html


15/46

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 Cancelto close the dialog box and save the changes.


16/46

5. In the Files panel, scroll to see the dw_php_codehinting.config file (see Figure 8). Do notdelete 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 thecode 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 wp-content/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 .4. Type


17/46

9. Clickwp_list_pages($args) in the list. Notice the post-template.php to the right in thelist (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 willlook 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 folderlevel as the dw_php_codehinting.config file you created earlier). Click the Design buttonto switch to Design view.

2. Next, click the Live View button in the Document toolbar. After a short wait, the pagewill be previewed in Dreamweaver using WordPress and your local web server (see

Figure 10).


18/46

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 seemconfusing 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 thedefault 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 isgenerated and sent to the browser. You wont see the PHP code since the code displayedin 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 pageshows up, then you know the web server is working.

Back to top

http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html


19/46

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 menucovers 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 DreamweaverCS5.Part 1covers 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. Inthis 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 inPart 2before 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 GeneralSettings of the WordPress administration panel. If you have some experience creating images inAdobe 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_contentfolder).

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.
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t3http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t3http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t3http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.html


20/46

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.


21/46

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 coloryou 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 Filespanel. 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:


22/46

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. Adynamic 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 databasequeries.

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 inthe Property inspector.

4. In Code view, position the cursor immediately in front of the code for the logo that starts


23/46

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 after the img tag.

The code should now look like this:


24/46

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 canpreview the theme files in Dreamweaver.2. Click the index.php file, which should still be open, and switch to Live View to previewthe 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 Worldlink. 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 tothe 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 ofpagetitle. 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.


25/46

The code for the index.php page in the MyTheme folder for the titles is as follows:


26/46

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

6. Click the Refresh Design View button in the Document toolbar (or press F5) to refreshLive View.

The title inherits the font style from the H1 and H2 tags and the link color from the 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 youneed 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 followingcode:

.posttitle a:hover { color:#555; }

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


27/46

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


28/46

admin area of your WordPress blog. Likewise, primary-menu is the slug that you can use toidentify the menu in the code.

Note: You can also register multiple menus using register_my_menus and an array. For more

information, seeregister 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 MyThemefolder.

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

Figure 9. Insert the header.php code.

The next step is to customize the menu.
http://codex.wordpress.org/Function_Reference/register_nav_menushttp://codex.wordpress.org/Function_Reference/register_nav_menushttp://codex.wordpress.org/Function_Reference/register_nav_menushttp://codex.wordpress.org/Function_Reference/register_nav_menus


29/46

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 thePrimary 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 inyour WordPress administration panel). You can drag the pages up or down to reorder

how they will appear in the menu.


30/46

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 theMenus 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 shouldappear 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 toyou. Basically you'll need to edit the style.css file in your MyTheme folder and add at least twostyles; 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 classnames by clicking on one of the menu items and looking at the tag selector.


31/46

Figure 13. The styled menu in Dreamweaver.

In this part of the series you added a logo, styled your post titles, and added a menuandpreviewed all your changes within Dreamweaver.Part 4of 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 DreamweaverCS5.Part 1covers the basics of WordPress themes.Part 2shows you how to set up a local server

and your site.Part 3covers 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
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t1http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt3.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html


32/46

Creating a custom featured post loopBuilding 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 highlightspecial 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 arecreating 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 forthis 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.
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t2http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t3http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t3http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#t3


33/46

1. In Dreamweaver, open home.php if it is not already open.2. In Code view, position your cursor immediately after 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 yourlocal 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.


34/46

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 databaseusing 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 isrepeated for each post in the custom loop. Initially you'll add three containers and some samplecontent 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 createdearlier.2. Set the class of all three new divs to featurebox (see Figure 3).


35/46

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 20pixels 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 forthe post title and a paragraph of text representing sample post content:

This is a sample post title

Lorem ipsumdolor si amet ...

5. Preview your changes in Dreamweaver by clicking the Live View button with home.phpshowing. 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, thensimply click the Refresh Design View button in the Document toolbar.


36/46

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 letterspacing 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 eachfeaturebox div as follows:

This is a sample post title

Lorem ipsum dolor si amet

Read more


37/46

8. To style the thumbnail images and the link states for text links in the featured area, addthe 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 thefeaturedposts ID, since you now have content to fill the container.

10.Next, add the following code immediately preceding the close of the featuredposts divin home.php:

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 mostcommon approach is to use a special post category for the posts you wish to feature on your

home page.
http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#globalnavhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#globalnavhttp://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt4.html#globalnav


38/46

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 yourfeatured 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 ishttp://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


39/46

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


40/46

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

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 uploadingthat image. You can link to any image on any server as long as you have the full URL tothe 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 right-

click and select Copy from the context menu (see Figure 10).


41/46

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


42/46

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 thenew 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 postvia 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 totake 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:


43/46

Readmore

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 usesa 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 eachiteration of the loop.

1. Edit home.php and change the featuredposts div to the following:


44/46

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:

The following section is simply the code you created earlier using the sample content, but thesample 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 fullarticle on the blog.


45/46

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

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


46/46

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 inthe 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


There are many more changes you can make to your own theme files to make them unique. Thisarticle 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.

Documents

Editing a WordPress Theme With Dream Weaver CS5