How to edit WordPress themes using Dreamweaver

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
Loading Facebook Comments ...

121 comments on “How to edit WordPress themes using Dreamweaver

  1. Hey, thanks for the tutorial! I’ve been out of web design for a while and was wondering how to use Dreamweaver to edit WP themes. Will give it a go.

  2. Hi,
    I am a designer having no coding background.How do I create a mutation of a template using a worpree theme?
    Please guide….your tutot was great!

  3. do you know about this? a way to have content & blog

    http://www.joomladeveloping.org/content/view/22/58/

    Written by Predator
    Friday, 17 February 2006
    Introduction to JD-WP 2.0:
    Joomla! for those of you unfamiliar, is a robust content management application (CMS) that can serve as both a public front-end (Website) and a private administration backend for tasks, content tools and document infrastructure and maintenance.

    WordPress is a Journaling application (Blog) that, (like Joomla!) offers both a front end Blog style website and a backend administration area.

    While both applications share certain capabilities, (both offer varying degrees of blogtools and administrative functions) their individual strengths lie in their principal focus. Joomla! does content management very well and WordPress does blogging very well.

    Marko Schmuck/joomladeveloping.org has released a component (application that operates within the confines of the Joomla! environment, shares resources and variables such as users, etc.,) that integrates the current release of WordPress 2.0 into the Joomla! framework.

    As of this writing, many of WordPress’s specific features function in, and with the Joomla! environment making this release especially useful to Joomla! users who can benefit from a world-class blogging tool that supports; comments, xml, rss post and comment feeds as well as ping-back and trackback features, all elements currently lacking in the out of the box version of Joomla!

    Care and Feeding of JD-WP
    The following article(s) covers the installation of JD-WP, configuration as well as a few tips-n-tweaks you may find useful in setting up and running this brilliant blend of content management authoring.

    TABLE OF CONTENTS
    Tic the TOC icon next to the article title to hide this menu.

    Installation
    Covers the basic installation of the JD-WP component with links to components and available modules.

    Configuration
    Outlines preliminary configuration of the WordPress end of the component such as global settings, Word Press options (advanced wysiwyg editor, etc.,) and nuance differences between JD-WP component and full, out of the box Word Press.

    CSS (stylesheet) and Modules
    Covers authors hacks and tips on stylesheet modifications/additions as well as installation and settings for adding associated WP modules;

    Sidebar,
    Calendar,
    Recent Posts,
    and Recent Comments.

    Plugins and compatibility notes
    Authors list of tested WordPress Plugins which function “inside” the Joomla! environment.

    Tweaks, Tips and Hacks
    Additional (potential hair pulling may be required) adventures into wrangling JD-WP and Joomla!

    My own wordpress blog is at http://www.thekomisarscoop.com. But I’m far from satisfied with the appearance or the functionality. I just started it and don’t have the technical knowledge or experience to deal with it.

    By the way, I covered the people power revolution and wrote the book “Corazon Aquino: The Story of a Revolution,” published in the US and also by National Bookstore Inc, 1988.

    Lucy Komisar

  4. Pingback: at FW|test
  5. Max,

    Congratulations for being among the top search results for ‘wordpress themes tutorial’. I’ve been wanting to try and create a personal template for my site for quite some time now. This guide will be a perfect fit as I like Dreamweaver a lot. You are a great help indeed!

    Chrissy
    http://www.hotelsandtravel.org

  6. I’ll give this a go. I want to keep the CSS theme and the basic template but I want a different layout. I want to recycle the pictures I made for the current one. Thanks a lot!

  7. lol, it eats up your system memory? how much do you have? 256mb? lol geez it’s so cheap now days, get get a 1gb stick, dw doesn’t eat up memory unless you don’t have any.

  8. Hi, there’s a much easier way to edit a WordPress layout in Dreamweaver. Just apply the template you want to a working WordPress installation and open it in your browser. Then go to Page – Save As and save it as a Web Page-Complete. Then take the Images folder from the WordPress theme and copy it into the saved site-files folder.

    What this does is create an HTML layout identical to your theme’s layout, but more importantly, it copies the styles.css file from the theme.
    Open the HTML file in Dreamweaver and voila- you can see the entire structure with every div correctly named, and as you change the CSS file to change the layout, you can just copy the CSS file back over to the WordPress theme and it will work perfectly!
    If you need to change structure (add/delete divs) you will need to manually compare the HTML file to the WordPress files to find the right div. But because they are (or should be) all classed or named, and because the HTML sections (header, sidebar, etc.) correspond very closely to the WP structure files, that will not be too hard to do. If you are missing something, check the Index.php- I have found some templates that start divs in the Index and finish them in the section file (ughh).
    Best of luck with your site!

  9. There’s an easier way to do it:

    Open the blog to see the normal view. Open the code with any browser and copy it. Paste it in Dreamweaver and attach the stylesheet.

    You can replace the php of comments using the same operation to see all the options to change.

  10. Thanks bro see I just uploaded the wordpress theme and I want to do some corrections on it ..I just spend over4 hours scrolling down the themes to find the better one and yours blog really give me the easy solution….thanks

  11. Dreamweaver most certainly does eat away at my systems memory, but reading this post has made my mind up to get a new PC. I have several themes I wish to edit, and if it’s anyway as simple as the (excellent) instructions above say it is, I will be a very happy camper :)

  12. Try vim. It’s amazing. You can edit directly to your website without uploading anything, just use secure shell. If you are hosted on an Apache server ( most likely ), this is the way to go.

  13. i’m totally new at this, but I can’t the style.css file and html markup to linkup. They’re in the same folder. Any ideas?

  14. I’m trying to edit my blog in Dreamweaver and I’m sort of new so bear with me.
    * when you say :
    \CSS file using the line:
    <link rel=”stylesheet” type=”text/css” media=”screen” href=”” />
    Just change to style.css so that your document can locate the stylesheet.
    Do you replace the whole line or just inside the quote’stylesheet_url’ to style.css?

    • Am I supposed to point the file in the direction of this style sheet and in the direction of the images because what I see right now doesn’t work…

  15. Hey there,

    Okay… so you seem wise on this stuff. I’ve loaded a template into my site that love… but it has a bug. Once you make custom quicklinks, you can’t delete them. So now I’m stuck with two at the top of the page that I’d love to lose.

    Trouble is, I can’t get the designer to tell me how… and get no answers from PHP or WordPress.org forums.

    Maybe you know how to do it? I’m guessing that my option now is to find the PHP file where the links were inserted (you can see them in the “View Source” for the web page itself)… and just delete them manually.

    Any ideas? I’m desperate!

    Thanks…

    JF

  16. Great news on the WordPress/Dreamweaver front! There’s a new Dreamweaver extension for creating WordPress themes called ThemeDreamer that works well for creating themes in Dreamweaver’s design view. It compiles all the theme files (header.php, sidebar.php, comments.php, footer.php, etc) into a mock block page so you can easily build your theme. It also provides WP code tags, proper syntax, conditional tags and quick WP API reference.

  17. Hey,

    Nice tip.. as an alternative, i simply saved the webpage in firefox to my hard drive (which brought down the styles.css file too) and edited the css in dreamweaver. I then copied and pasted from the css file in dreamweaver back to wordpress’s theme editor and it worked.. its a bit quicker than your method, but not quite as in-depth.. hope it helps someone.

    cheers

    Paul

  18. Speaking about the divcubs theme by askgraphics, yes it has an about box over the sidebars, but you try and find where to customize it, spent hrs looking and there is NO documentation to help you find it either, eventually gave up because it was simply to frustrating. I am sure they did this on purpose as they want 250.00 to customize their themes!

  19. I am new to WP. I have tried editing the template but unable to locate how the Sidebar is rendered… I could locate PHP function “get_sidebar” in index.php file, but don’t know where it is defined. I want to edit this and add/remove sidebar items… How do I do it? If you’ve a solution, please drop a comment on my site…

  20. Am very interested in method which you described here. But please,
    can you be so kind to to repair a link to original file Zimpleza.

    Thanks in advance.

  21. Nice tutorial. As I read it, I too was wondering why you didn’t just open the page in a browser and save the page along with its associated files. Then open the page in Dreamweaver.
    Since you posted this almost three years ago, maybe it’s time for an update.:)

  22. i have got to fill up the blank space on the either sides of my sites front page.the width is very high.so please suggestb something to increase the width…
    or to fill it with some widgets..
    i am doin the thing using wordpress

  23. Great tutorial for me…. this is how I like to work… wysiswg and visually. Code is not my thing so this tutorial really helps. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *


Loading Disqus Comments ...

No Trackbacks.