How to edit WordPress themes using Dreamweaver

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:






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:

Just change 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:

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 and type in your blog name. Do the same thing for the blog tagline or subhead, which is displayed by the code .

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:


Not Found

Sorry, but you are looking for something that isn't here.


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 , just delete this and type in a dummy headline. To enter dummy text for the blog post article body, replace 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).

Support this blog and independent reporting on Cebu

57 responses

  1. yeah, dreamweaver is cool BUT it easily eats up your system memory…

  2. galing. tiyaga! i still use Macromedia Homesite.

  3. Can’t agree more on what Poldo said.

    Ever since I found this plugin, my work load just cut down by 90%. It used to take me a couple hours to edit one major work on DW but now it takes me 10 mins (at most).

    Now I can’t breathe properly without it http://chrispederick.com/work/webdeveloper/

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

  5. Wow, this article really caught attention. Good work, Max! 😉

  6. Poldo,
    Yeah it did 🙂 I had to install WP-Cache and tweak the comments to separate the trackbacks.

    Renee,
    I also like the web developer extension. Another great tool, which you might be interested in, is th Aardvark Firefox Plugin which I wrote about here: http://max.limpag.com/2005/09/12/great-firefox-plugin-for-blog-template-users/

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

  8. thanks for the tutorial. The hardest part is the copying from the different template

  9. Thanks for this tutorial dude! Helped me a lot.

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

  11. Holy… this is JUST what I was looking for all the time.. thanks! Thanks a lot!

    Cheers
    Thedude

  12. hmm, great idea, must test times. i create my themes witch text and css editor.

  13. l dont know hwo to edit wordpress theme, can someone help me ? l can giwe him backlink in all my sites ????

  14. wow, that’s what I needed! Thanx!

  15. I’ve tested this method and it works great!! thanks a lot!

  16. Speyburn,
    Thanks for the feedback.

  17. Thanks a lot for this tutorial, exactly what i was looking for 😉

    Cheers,
    Michael

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

  19. 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!

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

  21. WP Helper Avatar
    WP Helper

    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!

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

  23. Galing talaga ng pinoy! Thanks for the tips!

  24. Great tips.

    Simple for an beginner like me to understand.

  25. wow, what great tips! tanks a lot!

  26. I love reading your tutorial. I am in a process of learning to create my own wordpress theme

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

  28. 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 🙂

  29. Live Teen Blogger,
    Have you tried Aptana? After trying the software, I’ve never used Dreamweaver since. 🙂

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

  31. Philip Avatar

    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?

  32. I blogged about your article before and keep coming back to learn more. I just put some WordPress extensions up at http://www.justdreamweaver.com that help with the code snippets for creating WordPress themes in Dreamweaver. Also some tools for Joomla templates as well.

  33. Steveorevo Avatar
    Steveorevo

    ThemeDreamer is tool to do just this. Its the very first public release, version .1, but the developers are dedicated! 😉

    http://www.themedreamer.com

  34. thanks for the article..
    nice one..

  35. 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…

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

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

  38. I have used that for editing my blog. Dreamweaver is everything for me.

  39. Hi,

    Thanks for your guide 🙂 I learnt a lot from this!

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

  41. 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!

  42. 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…

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

  44. Perfect guide!!
    thanks 😉

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

  46. nice post, i’m relastively new to wordpress. This is my next aim, to create a custom theme. cheers for the guidence.

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

  48. Thanks for the advice.

  49. Thanks for the Tutorial.

  50. 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!

  51. Easy enough and flexible, life is easy with dreamweaver.

    Thank a lot.

  52. Thanks this is my prefered way of editing wordpress templates as well, but wonder if their is an easier way around all this?

  53. Ajit Palawali Avatar
    Ajit Palawali

    dreamweaver is very good webdesigning tool i always work on it

  54. Just wanted to say thanks! I found this really helpful!

  55. Thanks for this tutorial. It is now a piece of cake!!!

Leave a Reply

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