Customizing WordPress themes with Dreamweaver

7/31/08 UPDATE: There has just been a new Dreamweaver extension for WordPress themes released called ThemeDreamer. Created by Virtuosoft, ThemeDreamer allows you to visually create and edit WordPress themes in Dreamweaver’s design view.

ThemeDreamer combines the WordPress header, sidebar, comments, footer, etc files into one live page in design view so you can easily edit your blog code or CSS file. We used it to create our new SoulVision theme that is available for download on our free WordPress themes page. ThemeDreamer is available now with a free trial download.

Back to original post:

We enjoy making Dreamweaver templates almost as much as WordPress themes. WordPress is a great blog platform to create themes for due to it’s simple code and the modularization of the page components. There are various ways to create a WordPress theme, but I prefer to use Dreamweaver for theme customizing.

It’s not difficult to customize a WordPress theme if you know a few shortcuts. If you prefer to code themes from scratch, there are several Dreamweaver WordPress extensions that simplify the task of inserting the required WordPress code. We have several listed on our WordPress tools page. The easiest way to create a custom theme for your blog is to download an existing theme that has the basic layout you want and customize the CSS and graphic elements to suit your needs.

Get a free WordPress theme

There are thousands of free WordPress themes available from places like the official WordPress theme viewer, freewordpressthemes.com, and Kate’s theme viewer. The key to simplifying your theme customization is to start with a layout that contains the right structure. If you prefer left and right sidebars with the content in the middle, find a theme that is structured that way. This is save you a lot of headaches digging through the blog source files trying to figure out where the proper code goes.

Once you have downloaded a theme, upload it to your blog themes directory and make it the default theme. We actually prefer to use a XAMPP installation and run WordPress on our local machines before uploading the new theme, but that’s a whole tutorial in itself.

Set up your local Dreamweaver site

The first step in customizing your theme is to set up a site in Dreamweaver which will act as your “chopping block” for your new theme. Simply create a folder on your local drive and unzip your downloaded theme. You will now have all the components of your theme ready for customization in Dreamweaver.

Get your blog into Dreamweaver

The next step is to get the complete code from your blog page into Dreamweaver in order to allow you to customize the blog via the CSS. Open your remote blog in a browser and click on the ‘View’ menu. Click on ‘Source’ and you will be presented with the source code for your blog. Click anywhere in the code and press ‘Ctrl-A’ to select all the code in the window. Press ‘Ctrl-C’ or ‘Edit’ then ‘Copy’ to copy the code to your clipboard.

Now go back to Dreamweaver and create a new HTML document. Click anywhere in the code view window and press ‘Ctrl-A’ to select all the code. Press ‘Delete’ to delete all the code. Now paste the code you copied from your browser into the code view window by pressing ‘Ctrl-V’ or ‘Edit’ and ‘Paste. If you press the ‘Refresh’ button or click in the design view window, you should now see the blog page as it appeared in the browser.

Now that you have your blog code on your local machine, you need to link the page to the correct CSS file as it is still linking to your remote CSS file. Go to your CSS control window and click on the ‘CSS Styles’ tab if it isn’t already selected. Now click on ‘All’ button if it isn’t already clicked. You will see the currently linked CSS stylesheet. Click on the name of the stylesheet (usually ‘styles.css’ or similar) and right click. The menu will have a delete option, so click that. This will delete your linked stylesheet.

Attach your local stylesheet

Next you need to attach your local copy of the stylesheet by again right clicking anywhere in the CSS control window to open the menu again. Towards the bottom of the menu, click on ‘Attach Style Sheet’. This will open a dialog box where you can select the local copy of your stylesheet. Browse to the folder you unzipped your theme into and select the stylesheet from the list of files. Click ‘OK’ and your local stylesheet will now be attached to your blog.

Tips for WordPress code

You now have everything in place to begin customizing your blog through the CSS styles. We’re not going to go into detail on how to customize the individual CSS styles, but here are some tips.

  • The post titles are styled by the H1 tag
  • The sidebar titles (Recent Posts, Categories, Archives, etc) are styled by H2 tags in the respective sidebar id’s
  • The sidebar lists and categories are all unordered lists styled using the ul and li tags for each sidebar id
  • Search forms are styled by the #searchform and #search id’s and the text input box is controlled by the #s id
  • The header and footer each have their own #header and #footer id’s with styles unique to your theme

Don’t forget the other pages

Once you begin to get your initial page styled, you will need to go back to your browser and pull up your blog. Navigate to a comments page and go through the same process of copying the source code into Dreameaver and set up a new HTML page for the comments page. There are a whole set of CSS styles that control the comments pages, so you will want to make sure the comment section is styled to match the scheme of your theme. Just remember to always delete the existing stylesheet and relink to your local copy when you create a new page in Dreamweaver.

You will also probably want to copy/paste an archive page, a category page and a full post page just to make sure the styles work with your theme. It’s always easier to style the code locally than to try to do it from within WordPress.

Blockquotes, images and pages. Oh my!

If your default blog installation doesn’t include multiple posts, categories, blockquotes, images, and pages, you will want to go into your blog and create some sample posts that include all these elements. If you post new elements into your blog, simply preview in a browser and copy/paste to a local page and relink the stylesheet to your local copy. Make the necessary style changes and save your stylesheet.

Upload to your server

When you are satisfied with your new blog, it’s time to upload to your server. The only thing you will need to upload is your stylesheet and any images you added within the CSS. If you defined your site to include your FTP settings, you should be able to just connect to your remote site in Dreamweaver and upload the files. If you didn’t establish the remote connection, you can either upload from Dreamweaver or use any other FTP client to send the files to your server.

Advanced WordPress editing – BACK IT UP!

Once the new stylesheet and image are uploaded, simply pull up your blog in a browser and your new theme should be displayed. You haven’t made any changes to the core WordPress code, only to the styles that control the presentation of the content. If you want to delve deeper into the customization of your WordPress theme, it’s recommended that you learn how each individual component such as the header, sidebars, main page content and footer get put together by WordPress to display your blog. WordPress works by performing many “loops” and conditional regions to control the page displayed in your browser. One misplaced piece of code or failure to close a tag can disrupt the entire page. So before you start changing the actual PHP code within your blog, make sure you have backup copies to revert to when your blog goes haywire.

Widget customization

One last tip on customizing your WordPress theme with Dreamweaver is to go into your blog control panel and activate all the widgets you may use. WordPress themes by default do not use widgets, but if your theme is “widget-ready”, you can use widgets in your sidebars. Widgets are pre-programmed modules that can display everything from search boxes to tag clouds to custom text to calendars, and you will probably need to style each widget if you plan on using them in your blog.

The process for styling widgets is the same as discussed before. Simply activate the widgets you wish to use and view in a browser. Copy/paste into your local Dreamweaver site and link the local stylesheet. Your theme may or may not have styles for widgets already, so you may need to create them from scratch in your stylesheet.

Quick and dirty WordPress customization

That’s a pretty quick rundown on how to customize a WordPress theme using Dreamweaver. We didn’t get into custom graphics, but if you have a basic understanding of HTML and CSS, you should be able to use a program like Fireworks or Photoshop to create custom logos and images for your blog. An easy way to create images for your blog is to pull up your blog in your browser and press your ‘Print Scrn’ button on your keyboard. Go into you graphics editor and create a new document. It should default to your screen resolution. Paste your screen shot into the document and you will have the exact dimensions of your layout. Simply create your new graphics over your existing layout and slice your images accordingly. Export them into your local images folder, link from within your stylesheet and upload to the remote site.

Give credit where it’s due

If you use someone else’s theme as the basis of your own theme, check the documentation that came with the theme to see how the theme is licensed. If the original author requests credit be kept in either the code or the footer links, keep it there. Free doesn’t always mean “free to do whatever you want with it”, so just make sure you give credit where credit is due.

Happy themes!

Tags: , , , ,

9 Responses to “Customizing WordPress themes with Dreamweaver”

  1. Steveorevo says:

    I’ve created a WYSIWYG extension for Dreamweaver that allows for WYSIWYG in Dw’s Design View, and the complete Template Tag code hints in Code View. Combined, its a powerful solution for theme designers.

    http://www.themedreamer.com

  2. [...] also primers for creating your own WordPress themes and a blog post on how to create themes in [...]

  3. tenshi says:

    this is really cool and helpful. THANK YOU very much. but how can I get the downloaded them into my breamweaver? do I need any kind of software in order to do that? Please kindly response for me. THANKS

  4. Ryan says:

    @tenshi – you need to first install the theme in your blog, then preview your blog in a browser. Copy the source code from your browser by going to “View” > “Source” and select everything in the window. Copy it, open a new HTML page in Dreamweaver, select all the code in the new HTML page code view and DELETE it, then simply paste the code you copied from the browser source code into the new Dreamweaver document.

    You will need to then highlight and delete the stylesheet link that pastes in with the source code, because it won’t link properly on your local machine. Then relink to your local CSS file of the same theme, just the one on your local machine.

    Does that make any sense?

  5. [...] also primers for creating your own WordPress themes and a blog post on how to create themes in [...]

  6. [...] also primers for creating your own WordPress themes and a blog post on how to create themes in [...]

  7. Martin says:

    Thanks for that. It made immediate sense to me and was like having somone turn the light on! I’m just moving from my first faltering steps into HTML/CSS after tottering along the Dreamweaver learning curve and am now stumbling into WordPress. Isn’t it fun!

  8. Jean Mo says:

    I need help in designing a blog web site using Dreamweaver. Anyone available?

    Jean Mo

  9. Ryan says:

    I’m currently doing an extensive tutorial for Adobe on turning a HTML site into a finished WordPress theme. It will be available on DevNet next month.