How to Edit WordPress Themes in Dreamweaver CS5

Written by vail joy
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Edit WordPress Themes in Dreamweaver CS5
WordPress themes are divided into multiple files that create one page layout. (Comstock/Comstock/Getty Images)

WordPress offers one of the most customisable online content management platforms available for free. Editing themes in order to give a layout your own graphic design, or to improve functionality through the addition of scripts or plugins can further enhance the basic capabilities of a WordPress Theme. WordPress comes with its own theme editor available through the Administration panel; however, you may prefer to edit a theme using Adobe's Dreamweaver HTML editor in order to get more control over the design process. How you go about editing the files will depend on how familiar you are with WordPress templates and if you need to see the design in the Design View as you go along.

Skill level:

Other People Are Reading


  1. 1

    Download the WordPress theme you wish to customise 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. 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 <head> portion of the HTML and the opening <body> tag. This file is where you can add scripts, links to css files, jQuery initiations, or meta tags.

  3. 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 </body> and </html> tags.

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

  1. 1

    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:

    <!-- Start Header -->

    <!-- End Header -->

    <!-- Start Content -->

    <!-- End Content -->

    <!-- Sidebar -->

    <!-- End Sidebar -->

    <!-- Start Footer -->

    <!-- End Footer -->

    This will help you divide up your layout so you can easily reconstruct your PHP files later.

  2. 2

    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.

  3. 3

    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 "<?php bloginfo('template_directory'); ?>" 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.

  4. 4

    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.

  5. 5

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

Tips and warnings

  • You can use the "Inspect Element" option in Opera's right-click menu, also available in Firefox with the "Firebug" add-on installed, to see which tag and CSS styles a specific area of a live theme uses. This helps customise the theme's colours and images much faster than reading the code alone.
  • Browse the theme's "Images" folder with a graphic editing program, or with "Large Thumbnails" enabled in Windows Explorer, to get an idea of which images are being referenced by a particular CSS declaration.
  • Do not remove the WordPress PHP template tags in your theme files. WordPress needs these template tags in order to pull specific functionality into the theme. For more information, visit the Template page of the WordPress Codex.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.