How to use Adobe Dreamweaver to design a WordPress blog post, or edit a WordPress theme

Dreamweaver CS5 provides much better support for WordPress than any previous versions, but you'll still have to set up a local testing environment if you want WordPress files to work on your local computer the way they work on your server.

How does Dreamweaver work with WordPress?

You can create a completely custom dynamic site as complex as a blog with Dreamweaver, but these days most lazy (and smart) designers start with a program like WordPress -- and then use Dreamweaver to create or edit the themes that control the design and the posts that are added to the blog.

The templates and themes used in WordPress, Joomla!, and other content management systems are all created with XHTML and CSS (combined with more advanced programming using PHP). Thus the same CSS and XHTML skills you covered in the Dreamweaver tutorials on this site (as well as my books and videos) also apply to editing a WordPress theme.

Search the Web and you’ll find thousands of themes (or templates) for WordPress. Downloading and installing templates is relatively easy, but editing them can get complicated quickly for many different reasons.

First, to view and edit a WordPress blog on your local computer, you need to set your computer up so that it works like a web server . That's because WordPress generates web pages dynamically by pulling content out of a database and displaying it in a templat as it opens the page in a Web browser. Thus, you have to set up a web server on your computer if you want those pages to display on your computer. That's not as hard as it may seem at first, but it is more complicated than installing Dreamweaver, and you'll need a few programs to make it all work

The good news is that you're not alone in facing this challenge and there are a couple of great services that bundle all of the software you need (including the popular Apache web server, MySQL database, and more) into one nice package that you can download and install relatively easily on any desktop computer that is powerful enough to run Dreamweaver.

My favorite software packages for turning your computer into a server with everything you need to run Wordpress are:

For Windows in XAMPP http://www.apachefriends.org/en/xampp.html
If you use a Mac, a popular option is MAMP http://www.mamp.info/en/index.html

Don't forget you also need to install WordPress, which you can download for free from WordPress.org).

Once you install all of the software, you need to start the server and other software, and set up a database. You'll find instructions for how to do this at http://codex.wordpress.org/Installing_WordPress

If all goes well, this entire process should take less than an hour, but it's one of those things that can be a bit tricky to get right the first time -- fortunately, you only have to do it once and from them on, you'll be all set up to work on your blog anytime you want on your local computer.

Editing Themes in Dreamweaver

Keep in mind that the WordPress themes you can download from the Web come from many different designers and the CSS may not be written or organized the way you (or I) might prefer if we had designed these templates ourselves. Editing a theme that someone else created is kind of like being your own handyman on a house someone else built.

You don’t have to be able to rewire the entire house to replace a light fixture, but you will need to know the basics of how wiring works, and you may need to spend some time studying how the electrician ran the wires, or you risk electrocuting yourself when you start changing things. (To explore the metaphor of how creating a web site or blog is like building a house, read this article.)

Some argue that it's easier to create your own theme than to edit someone else's. At the very least, keep in mind that the first task in editing the CSS in a WordPress theme is often deciphering how the styles are defined and what they do, so you can see where best to make any necessary changes.

If you want to create your own template, or change the programming code that specifies how data is pulled from the database, you’ll need to learn a programming language, such as PHP, used in most blogging programs. To help you keep things in perspective, most people can get the hang of XHTML and CSS in a couple of weeks, but many people study programming in a language like PHP for two or more years, although learning just enough PHP to design a WordPress theme can tke a lot less time.

Editing WordPress with Dreamweaver (the easy way)

If you don't want to go to all the trouble of setting up your computer as a server and setting up a local database, you can still use Dreamweaver to design and edit posts for Wordpress or to edit the CSS files.

Just remember, copy and paste is your friend. You can create posts in Dreamweaver and then just copy them into the WordPress editor when you're done -- just make sure you copy the code from Dreamweaver into the HTML code view in WordPress and that you only copy the contents of the <body> tag. By that I mean, copy everything from just after the <body> tag in Dreamweaver to just before the close</body> tag. You don't want to repeat the open and close HTML, header, and body tags...

Editing WordPress CSS Files in Dreamweaver (the easy way)

If you just want to edit the CSS files from your blog on your personal computer without having a copy of the entire blog on your hard drive, consider this technique.

First, copy and paste the contents of your CSS files into new .css files in Dreawmeaver.

Then view your blog in a Web browser (the public side that visitors see) and choose View>Source. This will display the actual code that is delivered to the browser and styled with the style sheets. Now copy and paste this source into an HTML page in Dreamweaver and you'll have the actual content of a page to work in locally.

Finally, attached the style sheets to this HTML page and you'll be able to see how your changes to the style sheets affect your blog design.

Once you've done making changes, just copy and paste the CSS code back into the Editor in WordPress.

With this approach, you get to use all of the great CSS editing tools in Dreamweaver without having to do all of the server setup on your local computer.

Dreamweaver has many great formatting tools for writing, editing, and troubleshooting HTML and CSS -- far more than the row of basic formatting choices in the WordPress admin tool. Dreamweaver is especially helpful when it comes to just changing the colors, fonts, and other formatting features in your blog, but you do have to be careful when you copy a CSS file from a WordPress blog into Dreamweaver or vice versa.

Partners and sponsors