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

  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. […] 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. […]

  3. […] 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!!] […]

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

  5. […] Alguna cosa para WordPress… Comenzamos con plugins: uno para integrar Thickbox, un monitor para las bsquedas que hacen los usuarios y Landing sites, para personalizar la ‘pgina de aterrizaje’ segn la provinencia del visitante. Seguimos con tres artculos en Devlounge, Layout, Customizing WordPress: Headers y Customizing WordPress: Advanced, y acabamos con How to edit WordPress themes using Dreamweaver. […]

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

  7. […] 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 […]

  8. […] 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. […]

  9. […] 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. […]

  10. […] 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. […]

  11. […] + 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 […]

  12. […] 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. […]

  13. […] 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. […]

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

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

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

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

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

  19. […] 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. […]

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

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

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

  23. 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?

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

  25. […] 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. […]

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

  27. […] Publicado en Uncategorized en 5:20 am por dianasolapas antes de hacer mis páginas de archivos, me voy a la imagen en general pues lo que hay no me gusta y para eso lo primero que busque es como editar en dreamweaver mi plantilla, una buena explicación la encontre en: http://max.limpag.com/2006/06/07/how-to-edit-wordpress-design-using-dreamweaver/ […]

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

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

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

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

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

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

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

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

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

  37. […] 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. […]

Leave a Reply

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

No Trackbacks.