How to edit WordPress themes using Dreamweaver

Blog design, Blogs, Highlights, , , , , , , ,
Pinterest

It has been more than a year since I used Dreamweaver to design a site. I’ve mostly been running sites using PHP-MySQL content management systems (CMS) and depend on the thousands of ready-made themes and templates to control the site design. For the occasional static page, I use Nvu for visual editing. But after reading this article on SitePoint, I wanted to try using Dreamweaver to edit one of the templates I’m using.

WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. The webpage is assembled from several PHP files controlling specific aspects of the site like the header, sidebar, main content and footer.

To use Dreamweaver to edit or customize WordPress themes, you need to combine these different PHP files into one page so that you can immediately view, while editing the codes, how the page would appear.

For this post, I edited a minimalist WordPress theme called Zimpleza.

The process

Go over the files of the WordPress theme you want to edit and study how it controls your blog’s appearance. Take note of how the pages, index.php (for the main page) and single.php (for individual blog posts), call the different template files.

The header is called first. What is called next depends on the WordPress theme you are using: some call the main content next then the sidebar then the footer. Other themes call the sidebar first then the main content and then the footer.

Create a new folder and copy into it 1.) the style.css of the WordPress theme you want to edit, and 2.) the folder containing the images.

Create a new HTML document in Dreamweaver and save it into the folder you’ve just created. Go to Code View and paste into it these lines:
<!-- Header part goes here --> <!-- /Header part ends here --> <!-- Main content here --> <!-- /Main content ends here --> <!-- Sidebar content here --> <!-- /Sidebar content ends here --> <!-- Footer content here --> <!-- /Footer content ends here -->
The lines are code comments to guide you as you copy code from the different PHP files for editing and transfer these back again after you’ve finished customizing the design. Just re-arrange the lines if the WordPress theme you want to customize calls, for example, the sidebar before the main content. (click on photos to view larger images)

Copy codes

DreamweaverStart copying codes from the different template files: the header.php, sidebar.php and footer.php. For the main content, copy the code that displays your blog content in index.php. The first thing you need to change is the location of the CSS file in the header. WordPress themes point to the CSS file using the line:
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
Just change <?php bloginfo('stylesheet_url'); ?> to style.css so that your document can locate the stylesheet.

After that, change the dynamic calls for such things as your blog name and sub-title and add dummy headlines and article text.

Most WordPress themes that display the blog title as text have the following code: <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

What this does is display your blog name and link it to your main page. To view how the blog name is rendered, just delete <?php bloginfo('name'); ?> and type in your blog name. Do the same thing for the blog tagline or subhead, which is displayed by the code <?php bloginfo('description'); ?>.

Dummy content

In the main content, just delete the conditional statements found in index.php and retain only the code that displays the blog post.

Delete these lines:
<?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> <?php endwhile; ?> <?php else : ?> <h2>Not Found</h2> <div class="entrybody">Sorry, but you are looking for something that isn't here.</div> <?php endif; ?> </div>
Place some dummy headlines and text to preview changes you might want to do with the stylesheet or the HTML code. The blog post headline is called by <?php the_title(); ?>, just delete this and type in a dummy headline. To enter dummy text for the blog post article body, replace <?php the_content('Read the rest of this entry &raquo;'); ?> with some dummy text. Enter dummy links and headlines in your sidebar. Editing with Dreamweaver

After you enter the dummy text, you now have a mock up design of your WordPress theme that you can use as base for customization. With this, you can instantly preview results of changes in the CSS or HTML codes. After you’ve finalized the design, copy the new codes to the different template files and save the CSS. Go over the codes again and replace the dummy text you placed with the appropriate WordPress template tags for the blog title, blog post headline and content.

To tweak your WordPress theme even further, you might want to check my repository of pieces of great WordPress theme codes, feel free to suggest snippets that should be added there. I still have to finish the second part of my article: How to create a WordPress theme: A guide for the design-challenged non-geek. I’m thinking of finishing part 2 by next week (fingers crossed).

 Pinterest

Related posts:

Minus a column: WordPress themes notes How to create a WordPress theme: A guide for the design-challenged non-geek How to convert any web template into a WordPress theme Turning a web template into a WordPress theme: a video tutorial Segregating trackbacks from comments in WordPress