How to Edit WordPress Themes in Dreamweaver CS5

Code Editing Only
1. Download the WordPress theme you wish to customize and store it somewhere that is easy to locate. The theme folder will have multiple PHP files inside which make up the main layout, requiring a header.php, index.php, footer.php, page.php and single.php at a minimum. In addition to these files, a theme will also contain at least one stylesheet, or style.css file, which controls how the layout elements look. Scripts, images and included file folders may also be present in your theme.
2. Launch Dreamweaver and click 'Open.' Navigate to the location of your WordPress theme and open it. Select the header.php and click 'Open.' The header.php file contains the top third of your page layout. The header will always contain the
portion of the HTML and the opening
tag. This file is where you can add scripts, links to css files, jQuery initiations, or meta tags.

3. Repeat Step 2 to open the index.php and footer.php files. The index.php contains the default content area of your theme layout, including the 'loop' which lists your blog posts. Unless a special page template is called, WordPress will always default to the index.php. The footer.php contains the footer area, which may contain a horizontal widget bar, or nothing more than a copyright notice and page menu. The footer must always contain the closing
and
tags.
4. Open the theme's style.css. This filename must never be changed, as WordPress is configured to look for a 'style.css' to identify the theme in the Appearance menu of the Administration panel. This file contains the theme's name and author, as well as all of the styles. Some themes might link to other stylesheets instead of placing all the CSS in one document. If that is the case for your theme, you will need to open and edit those additional stylesheets.
5. Open the functions.php file. Add any additional functions such as sidebars, plugins, or shortcodes to the end of the file. Keep an eye on the line counter to the left. If a line turns red, it means you have incorrectly formed a function call or missed a comma or semicolon.
Code and Design
6. Click on 'File' and 'New' and create a new HTML document. Click on the 'Code' button to enter the code editing view. Paste the following code into the file:







This will help you divide up your layout so you can easily reconstruct your PHP files later.
7. Paste the contents from the header.php file between the 'Start Header' and 'End Header' comments. Repeat this process to paste the contents of index.php into the content area, sidebar.php -- if there is one -- into the sidebar area and footer.php into the footer area.
8. Remove the template tags from the header area in order to get the JavaScript and stylesheets to detect properly, allowing you to view the design of the layout. Template tags will look like '
' and removing them may also require you remove the slash just after the tag. Fix any paths necessary and click the 'Split' button to view the final layout. Edit the template as you would any normal HTML webpage layout.
9. Replace the full file paths to any scripts or stylesheets with the WordPress template tag once you are done editing the layout. Also replace functions such as your navigation menu or sidebar widgets with the appropriate template tags. See the WordPress Codex for a full list of available template tags or refer to the original PHP files to copy them over.
10. Copy each section of edited code back into their separate PHP files. Ensure your index.php includes the 'get_header' and 'get_footer' template tags. Upload the theme to your WordPress installation and test it out by activating it through the Appearance menu. You can make any further minor tweaks by directly editing the theme under 'Appearance' and 'Editor.'