In my endeavors to find the most efficient way to edit WordPress pages with complex layouts, I found a trick that works really good with CS5. Since we use WordPress as a CMS, detailed page layouts are important.
Since this solution does not update your posts, you still need to save the HTML to WordPress with either the WordPress HTML editor, or an offline tool like Windows Live Writer. This trick gives you the ability to see a very accurate representation of your page (or post) before posting.
Windows live writer does a good job, but if you make changes to your styles, you have to manually refresh the editing theme in WLW. With this method you don’t have to.
All you really need to get started is Dreamweaver, you don’t have to have FTP access to the site, but FTP access will make it much easier to quickly make changes to style sheets and update them on the site.
- In Dreamweaver, create a new HTML file. This file will hold the HTML that mimics the top part of your WordPress site. For this example we will call it testheader.html.
- Open the site in any browser, navigate to a page that has the layout you want to work with. Full page width, single sidebar, dual, You will need to do this for each different layout that you want to edit with.
- Open the HTML of the page. Right click on the page and select “View Page Source” or “View Source”, depending on the browser you are using.
- Copy all of the HTML from “View Source” page and paste it into the “testheader.php” page that you created in step 1.
- Scroll down the HTML and find the start of you content. This is usually the line right after <div class=”entry”>.
- Delete all the HTML from this page after the <div class=”entry”> .
- Save your testheader.php page. I save them in the root folder of the site in Dreamweaver.
- Create a second new file HTML file in Dreamweaver. This file hold the HTML for the bottom of your WordPress page. In this example we will call it testfooter.html.
- Again copy and paste all of the HTML from the “View Page Source” into this new file.
- This time you want to delete all the HTML from the top of the file down to but not including the closing div tag that matches the one above. most good themes will comment their closing div tags something like this. </div><!– /.entry –> .
- Save this file in the same folder.
The above steps will need to be repeated for each different page layout you want to use, you can do one for posts as well if you want. Just give them different file names.
This is all setup. now the end result.
When you want to create a new page for your WordPress site, just create a new PHP file in Dreamweaver. Include the testheader.html file in the first line of the PHP file, Include the testfooter.html in the last line.
In Dreamweaver Split view of Design view, you should now see the Hello World example formatted like your WordPress site.
Just edit the page, and copy the HTML from between the 2 PHP includes, and paste it into the HTML editor in WordPress.
AHHH… if you switch to the Visual editor in WordPress, it will likely mess up any complex formatting, so make sure and stay in the HTML editor.
If you only use WordPress as a CMS, you can turn off the WordPress HTML mangler. (wptexturize) with a little plugin called “Disable Texturize”. It is not listed in the WordPress plugin repository, but I found it here last… http://www.jasonlitka.com/2007/09/25/wordpress-plugin-disable-wptexturize/
If you make changes to your style sheets on the site (Local or Remote copy), Since you are dynamically linking to the actual sheets, you should see the changes reflected in your editor.
WLW uses a cached copy of the styles and images which is why you have to manually refresh the editing theme when changes are made.