How to edit Wordpress themes using Dreamweaver

June 7th, 2006 · 83 Comments ·

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

Start 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 »'); ?> with some dummy text. Enter dummy links and headlines in your sidebar.

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

83 responses so far ↓

Poldo // Jun 7, 2006 at 6:21 am

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

gary // Jun 7, 2006 at 11:07 am

galing. tiyaga! i still use Macromedia Homesite.

Renee // Jun 7, 2006 at 5:46 pm

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/

Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Edit WordPress Themes With DreamWeaver // Jun 7, 2006 at 5:46 pm

[...] Edit WordPress Themes With DreamWeaver - a how to article you might find handy. [...]

Alvin // Jun 7, 2006 at 7:03 pm

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.

aNieto2K » Blog Archive » Como editar themes con Dreamweaver // Jun 7, 2006 at 9:32 pm

[...] Manual para editar themes con Dreamwaver de forma facil, triste y vergonzoso pero siempre puedes decir que lo has hecho con el notepad xD [...]

Edit Wordpress Themes using Dreamweaver by Blogging Pro // Jun 7, 2006 at 11:31 pm

[...] Edit Wordpress Themes using Dreamweaver Leon Kilat at The Cybercafe Experiments has instructions on how to edit a WordPress theme using Dreamweaver. WordPress, like most PHP-MySQL CMS, use 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. [...]

un labeled » wordpress on dreamweaver // Jun 8, 2006 at 6:35 am

[...] How to edit Wordpress themes using Dreamweaver at Leon Kilat ::: The Cybercafe Experiments [...]

Poldo’s Procrastination » Edit WordPress Themes Using Dreamweaver // Jun 8, 2006 at 10:54 am

[...] If you’re no coder and stuck with design oriented softwares when creating webpages or editing WordPress themes, try Max’s tutorial on how to use Dreamweaver to edit WordPress themes in a design layout. Be warned though, Dreamweaver eats up system resources like someone who hasn’t had food in 3 days. [...]

Editing Wordpress themes using Dreamweaver - Cash in on Google Adsense // Jun 8, 2006 at 11:44 am

[...] Leon Kilkat: How to edit Wordpress themes using Dreamweaver [...]

catharsis » i’m a whore // Jun 8, 2006 at 3:43 pm

[...] esoterica: for my fellow wordpress + dreamweaver users. edit wordpress templates the forer effect - i’ve fallen for it. still do. probably always will =] lawyers duke it out. paper, scissors, rock style. top 10 evolution myths develop a sixth sense by implanting a magnet, become MAGNETO! social engineering - the usb way. genius article. i think i would’ve plugged it in =[. japanese imitiation video ipod [it’s available in china. i want one!!] [...]

Poldo // Jun 9, 2006 at 9:17 am

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

dexter�s laboratory » wordpress e dreamweaver // Jun 9, 2006 at 7:27 pm

[...] para todos aqueles que quiserem personalisar os temas do wordpress com o dreamweaver aqui fica este tutorial [...]

Like Your Work » Blog Archive » links for 2006-06-10 // Jun 10, 2006 at 8:21 am

[...] How to edit Wordpress themes using Dreamweaver at Leon Kilat ::: The Cybercafe Experiments (tags: wordpress hacks) [...]

Max Limpag // Jun 13, 2006 at 2:40 pm

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/

Bloganbieter.de » Blog Archive » Howto: Wordpress Theme mit Dreamweaver bearbeiten // Jun 15, 2006 at 6:24 pm

[...] Howto: Wordpress Theme mit Dreamweaver bearbeiten Max Limpag hat ein sehr interessantes Howto geschrieben, wie man Dreamweaver nutzen kann um seine Wordpress Theme zu bearbeiten. How to edit Wordpress themes using Dreamweaver. [...]

Vivre du Web » Modifier le th�me d’un site WordPress avec DreamWeaver // Jun 16, 2006 at 3:48 pm

[...] Utilisant Dreamweaver pour �diter les th�mes de mes sites WordPress, j’ai lu l’article : How to edit WordPress design with DreamWeaver avec int�r�t. Il explique la m�thode qu’il utilise pour modifier le design, il entend par l�, la feuille de style, d’un site WordPress. [...]

links for 2006-06-18 — 7 seconden — Cuiusvis hominis est errare // Jun 18, 2006 at 8:21 pm

[...] How to edit Wordpress themes using Dreamweaver at Leon Kilat ::: The Cybercafe Experiments Voor Dreamweaver fanatics. (tags: wordpress dreamweaver tutorial) [...]

for better or for worse » Blog Archive » Daily Links // Jun 20, 2006 at 1:58 pm

[...] How to edit Wordpress themes using Dreamweaver Nice site for learning how to manipulate a wordpress theme via Dreamweaver. (tags: webdesign wordpress) [...]

willkoca » Archive » links for 2006-06-20 // Jun 23, 2006 at 9:38 am

[...] How to edit Wordpress themes using Dreamweaver at Leon Kilat ::: The Cybercafe Experiments (tags: wordpress dreamweaver webdesign) [...]

Shilpa // Jul 12, 2006 at 9:02 pm

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!

tokio hotel // Jul 17, 2006 at 5:57 am

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

otro blog m�s » Unos cuantos de desarrollo web (XCV) // Jul 25, 2006 at 6:40 pm

[...] Alguna cosa para WordPress… Comenzamos con plugins: uno para integrar Thickbox, un monitor para las b�squedas que hacen los usuarios y Landing sites, para personalizar la ‘p�gina de aterrizaje’ seg�n la provinencia del visitante. Seguimos con tres art�culos en Devlounge, Layout, Customizing Wordpress: Headers y Customizing Wordpress: Advanced, y acabamos con How to edit Wordpress themes using Dreamweaver. [...]

A few words form our sponsor » Links to some cool WordPress Pages // Aug 17, 2006 at 8:18 am

[...] http://max.limpag.com/2006/06/07/how-to-edit-wordpress-design-using-dreamweaver/ I like the look of this one already! I need to use Dreamweaver for more stuff. [...]

Discombobulate » Blog Archive » Converting HTML template to Wordpress Theme // Aug 26, 2006 at 7:25 am

[...] This template was created by Gururaj and was found here on OSWD. As well as the wordpress codex I also used information from the following blogs - AndrewStrojney.com, Leon Kilat ::: The Cybercafe Experiments, UrbanGiraffe, and Lorelle on Wordpress. [...]

Discombobulate » Converting HTML template to Wordpress Theme // Aug 27, 2006 at 3:27 am

[...] This template was created by Gururaj and was found here on OSWD. As well as the wordpress codex I also used information from the following blogs - AndrewStrojney.com, Leon Kilat ::: The Cybercafe Experiments, UrbanGiraffe, and Lorelle on Wordpress. [...]

Discombobulate » Converting HTML template to Wordpress Theme (Part 1) // Aug 27, 2006 at 5:37 am

[...] Converting HTML template to Wordpress Theme (Part 1) This template was created by Gururaj and was found here on OSWD. As well as the wordpress codex I also used information from the following blogs - AndrewStrojney.com, Leon Kilat ::: The Cybercafe Experiments, UrbanGiraffe, and Lorelle on Wordpress. [...]

tokio hotel // Sep 1, 2006 at 6:30 pm

Thanks for this tutorial dude! Helped me a lot.

Lucy Komisar // Sep 1, 2006 at 10:14 pm

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

Dreamweaver Daily Blog » Blog Archive » Edit Wordpress Themes with Dreamweaver // Sep 6, 2006 at 8:49 pm

[...] Leon Kilat posted a nice tutorial, How to edit Wordpress themes using Dreamweaver, which explains which files to look and how to use dreamweaver to design. [...]

春江花月夜 » Blog Archive » links for 2006-09-20 // Sep 20, 2006 at 9:22 am

[...] How to edit Wordpress themes using Dreamweaver | Leon Kilat ::: The Cybercafe Experiments (tags: wordpress dreamweaver webdesign howto design) [...]

Juglar :: Plantillas para WordPress :: December :: 2004 // Sep 25, 2006 at 2:25 am

[...] WordPress Index Builder: Herramienta online para crear plantillas en WordPress. (Explicación en Bicubic). Digital Westex Image Gallery: Cabeceras para tus plantillas de WordPress. K2 Schemes aNieto2K » Si no haces un theme es por que no quieres How to edit Wordpress themes using Dreamweaver Turning a web template into a WordPress theme: a video tutorial [...]

How to convert any web template into a WordPress theme | Leon Kilat ::: The Cybercafe Experiments // Oct 12, 2006 at 2:42 am

[...] In converting web templates into WordPress themes, I use Aptana and Cream (my preferred text editor). I use Aptana to visually edit the template and incorporate the changes I want done. I used to do this with Dreamweaver (I wrote a tutorial on how to use Dreamweaver to edit WordPress themes) but ever since I tried Aptana, an open source software, I’ve never gone back to the iconic WYSIWYG tool. [...]

WoW Grinding Guide // Oct 18, 2006 at 10:20 pm

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

Cheers
Thedude

3DSL Eugen // Oct 25, 2006 at 5:09 am

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

Alex Shalman . com » More on Wordpress // Nov 18, 2006 at 9:18 am

[...] I’ve googled upon a great guide on how to edit WordPress themes in Dreamweaver, so there will be more progress on the site during the next few days. I intend to meet or beat by December 15th deadline for this website and can see that my work is cut out for me. So fars it has been a very interesting, exciting, frustrating and rewarding project. [...]

wtr’s blog » Blog Archive » links for 2006-11-20 // Nov 20, 2006 at 12:23 pm

[...] How to edit Wordpress themes using Dreamweaver (tags: wordpress dreamweaver webdesign) [...]

Alex Shalman . com » Blog Archive » Alex Shalman . com : Making of a Site // Dec 16, 2006 at 9:42 am

[...] Editing wordpress with dreamweaver guide by Max. [...]

After the Net » Blog Archive » links for 2006-12-27 // Dec 27, 2006 at 7:26 pm

[...] How to edit Wordpress themes using Dreamweaver | Leon Kilat ::: The Cybercafe Experiments (tags: wordpress dreamweaver webdesign tutorial howto design webdev) [...]

DeGeT.NeT » WordPress temaları nasıl yapılır? // Jan 6, 2007 at 1:57 am

[...] XHTML/CSS den wordpress’eDreamwevaer de wordpress tema editlemeBu konu hakkında bir video eğitselWordpress tema anatomisiWordpress hakkında çok detaylı video eğitselleri, ders dosyaları ile beraber [...]

Oberlehrer.de » Wordpress-Themes mit Dreamweaver bearbeiten // Jan 12, 2007 at 10:44 pm

[...] Wenn es um Websiteentwicklung geht, gibt es zwei Anschauungen: Fließend HTML, CSS und PHP/Perl oder grafische Bildschubsertools. Für letztere gibt es ein How to edit Wordpress themes using Dreamweaver. In wie weit das gutgeht, so ganz ohne Hintergrundwissen an einem Theme herumzudoktern, sei dahingestellt. Leider ist die Dokumentation insb. zu Wordpress-2-Themes sowieso noch sehr dünn… Lesezeichen speichern bei…These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

Tutorial Roundup: Wordpress Theme » Bloganbieter.de // Feb 3, 2007 at 6:55 am

[...] How to edit Wordpress themes using Dreamweaver For those of you who prefer to use WYSIWYG-Editors to edit your Wordpress theme, here is a small tutorial which gives a basic introduction to Wordpress + WYSIWYG-Editor. [...]

giantkicks.com » How to edit Wordpress themes using Dreamweaver, Leon Kilat ::: The Cybercafe Experiments // Feb 14, 2007 at 2:21 pm

[...] + I frequently try out other designer’s wordpress themes, liking some parts, but never the whole thing. So I edit them. It’s not fun. In fact it’s quite unfun. Hacking someone else’s code never gives me what I want. Too often the theme’s original code is disastrously complex; full of patches, duplications, excess, redundancies; making it difficult to get what I want. How about some help.. How to edit Wordpress themes using Dreamweaver | Leon Kilat ::: The Cybercafe Experiments [...]

Articoli e risorse per imparare a creare un tema per Wordpress | MondoBlog // Feb 16, 2007 at 3:44 pm

[...] How to edit Wordpress themes using Dreamweaver [...]

recep // Feb 22, 2007 at 5:54 am

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

Having a Helluva time using Dreamweaver for Wordpress Sites - WickedFire - Internet Marketing Affiliate Webmaster Forum // Feb 28, 2007 at 12:11 pm

[...] Tagstention - Wordpress plugin for Dreamweaver & found this page, but haven’t read it How to edit Wordpress themes using Dreamweaver | Leon Kilat ::: The Cybercafe Experiments [...]

Convert HTML to Wordpress Theme part 1 · Techbites on Discombo // Mar 17, 2007 at 11:29 pm

[...] http://automattic.com/code/widgets/themes/pieces-of-wordpress-theme-code-a-repositoryhow-to-edit-wordpress-design-using-dreamweaver/http://codex.wordpress.org [...]

Adobe Dreamweaver Tutorials | Smashing Magazine // Apr 4, 2007 at 5:53 pm

[...] How to edit Wordpress themes using Dreamweaver WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. 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. [...]

at FW|test // Apr 6, 2007 at 4:40 am

[...] How to edit Wordpress themes using Dreamweaver http://max.limpag.com/2006/06/07/how-to-edit-wordpress-design-using-dreamweaver/ [...]

Adobe Dreamweaver Tutorials | 2kreative.net // Apr 7, 2007 at 3:39 am

[...] How to edit Wordpress themes using Dreamweaver WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. 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. [...]

speyburn // Apr 19, 2007 at 4:30 am

wow, that’s what I needed! Thanx!

Tokio Hotel Blog // Apr 20, 2007 at 5:19 pm

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

Max Limpag // Apr 21, 2007 at 12:38 pm

Speyburn,
Thanks for the feedback.

Michael // Apr 27, 2007 at 6:45 pm

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

Cheers,
Michael

Christina Bay // Apr 28, 2007 at 4:44 pm

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

Julians.name » Blog Archive » links for 2007-05-11 // May 11, 2007 at 12:23 pm

[...] How to edit Wordpress themes using Dreamweaver | Leon Kilat ::: The Cybercafe Experiments (tags: design-resources wordpress-design) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

Angelina ------ // Jun 22, 2007 at 4:22 pm

What theme is at http://www.100cute.com ? Any idea

Open Source Inspiration » Blog Archive » WordPress, CSS, and Dreamweaver // Jun 23, 2007 at 9:34 am

[...] of WordPress but are not yet up to managing all the CSS and PHP that goes with it. That’s why this tutorial is so very useful- it shows you how to use Dreamweaver to combine all of those stray files into one [...]

mi // Jun 30, 2007 at 7:10 pm

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!

Steve Miller’s Web Sites of Interest » links for 2007-07-17 // Jul 17, 2007 at 12:25 pm

[...] How to edit Wordpress themes using Dreamweaver | Leon Kilat ::: The Cybercafe Experiments (tags: blog blogging cms coding content design dev development webdev themes howto tutorial webdesign dreamweaver wordpress) [...]

tmthai.com All you need for the Website!!!!» Blog Archive » Adobe Dreamweaver Tutorials // Jul 19, 2007 at 1:29 am

[...] How to edit Wordpress themes using Dreamweaver WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. 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. [...]

Internet Marketing - About Internet Marketing, Making Money Online, Writing Article, Niche Marketing, Blogging and Fun Stuff » Wordpress Tutorial for Youngbies // Aug 8, 2007 at 7:49 pm

[...] How to edit Wordpress themes using Dreamweaver [...]

noranscooter.com » Blog Archive » [wordpress tip] How to edit wordpress themes using dreamweaver // Aug 10, 2007 at 1:15 am

[...] is a useful link. I followed every instruction step by step and it works well. I recommend you to try this if [...]

LinusLin.com » Blog Archive » How to design wordpress theme using Dreamweaver (Beginning, Intermediate) // Aug 19, 2007 at 11:11 pm

[...] Note: There are tutorials that teach you how to customize themes without install a server, but I found it hard to edit multiple pages using these methods and the result isn’t always precisely what you are expecting. You can check out how to edited Wordpress design using Dreamweaver. [...]

nick // Sep 4, 2007 at 6:19 am

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.

Marc Ashwell » Blog Archive » links for 2007-09-07 // Sep 8, 2007 at 5:21 am

[...] How to edit Wordpress themes using Dreamweaver » blog design, blog tips, blogging, design, design t… (tags: wordpress dreamweaver webdesign tutorial howto design themes) [...]

WP Helper // Oct 2, 2007 at 3:14 am

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!

German // Oct 6, 2007 at 10:58 am

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.

Marie // Oct 17, 2007 at 6:40 pm

Galing talaga ng pinoy! Thanks for the tips!

Ty Tran // Oct 29, 2007 at 7:13 pm

Great tips.

Simple for an beginner like me to understand.

Peter // Oct 30, 2007 at 8:14 pm

wow, what great tips! tanks a lot!

Adobe Dreamweaver Tutorials - Article Save // Nov 13, 2007 at 4:55 am

[...] How to edit Wordpress themes using Dreamweaver WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. 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. [...]

aizat // Nov 24, 2007 at 1:48 pm

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

Risorse Wordpress | Quando La Moto diventa Passione... // Dec 1, 2007 at 8:31 pm

[...] How to edit Wordpress themes using Dreamweaver [...]

Vicky Disouza // Dec 9, 2007 at 4:19 am

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

Live Teen Blogger // Dec 21, 2007 at 6:51 am

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

Max Limpag // Dec 22, 2007 at 3:24 am

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

leo charre // Jan 4, 2008 at 8:58 am

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.

Philip // Mar 4, 2008 at 5:16 am

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?

Tutto Il Mondo Di Wordpress In Una Pagina, La Più Grande Collezione Di Link E Di Risorse Su Wordpress disponibile sul Web | MondoBlog // Apr 2, 2008 at 3:37 am

[...] How to edit Wordpress themes using Dreamweaver [...]

Ryan // Apr 2, 2008 at 11:08 am

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.

Editar themes de wordpress utilizando dreamweaber - favoluxe // Apr 8, 2008 at 8:48 pm

[...] [+ How to edit Wordpress Themes Using Dreamweaber] [...]

Recursos y Tutoriales » Blog Archive » Dreamweaver tutoriales // May 6, 2008 at 10:00 pm

[...] How to edit Wordpress themes using Dreamweaver WordPress, like most PHP-MySQL CMS, uses template files to control the appearance of websites. 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. [...]