We mainly use WordPress as a Content Managment System (CMS) for clients and are always running into issues with the way the WordPress visual editor works.  The visual editor is not really a WSIWYG editor as it does not use the styles in the theme, and add to that the wptexturize and wpautop filters,  and you get frustrated trying to apply formatting to pages and posts.

There are solutions to completely disable wptexturize and wpautop,  “Raw HTML” and “Disable Texturize” plugins. 

Now how to get a better WSIWYG editor.

Windows Live Writer seems to have the best inteface,  but we still have to get WLW to load the theme CSS files.

At first this seemed straight forward,  just use the functionality built into WLW.

Many of the sites kept giving errors that it could not load the theme.

After alot of research and trials,  the solution was easy.  found the answer in a comment a solution that was more complex.

Solution

1. Temporarily change your wordpress Front page displays setting to “Your latest posts”
   Dashboard –> Settings –> Reading.
2. Refresh your theme in WLW.
   In the WLW menu, Blogs –> Edit blog settings –> Editing –> Refresh Theme button.
3. Change the Front page settings back to the original settings.

When using WordPress as a CMS,  many sites set the home page to a static page.
WLW loads the theme by creating a temporary post,  loading the home page, and then looking for the post that it created.  When it can’t find the post it created,  it raises an error.  Good thing is that WLW deletes the temporary post.

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.

Steps.

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

Example

<?php include('testheader.html') ?>

<strong>Hello World!!!</strong>

<?php include('testfooter.html') ?>

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.

Rodger

One of our specialties at RCH Tech Solutions is using WordPress to build solutions for our customers that want control of their sites content but may not have the skills or tools to edit HTML , CSS, scripts etc…

We have been approached by many businesses that want to have a quality website, and easy to change.  The business owners do not have time to learn the technologies needed to create or maintain the site,  but they want to have the ability to make some changes themselves.

We have found a simple method of building sites to meet their needs and it’s all built around WordPress.

Here is a prime example of one such site…

http://www.RockValeGunClub.com This site is for a Cowboy Action Shooting club in Colorado.  They had a website for a few years,  but found that the templated website builder tools they were using had too many limitations.    Like most people or groups,  they wanted more control,  but do not have any “Web Masters” in the group to build the site.    That is where we helped out.

We agreed that the site had 3 main goals,

• Sharp looking.  something to reflects the club and that they could be really proud of.
• Needed to have an easy, non technical method of updating their schedule, Scores, and pictures.
• Had to fall within the limited club budget.  The budget was a one time expense for the year and did not have room to pay for constant updates.

Their site could have easily been built with just about any CMS platform available,  We could also have built it with straight HTML but it would not meet the goal of allowing the club to easily make changes.

The best choice was to use WordPress as a Content Management System (CMS) because it would meet all 3 goals.  We developed a custom theme for them that not only allowed posting scores, schedules and pictures,  but gave them the ability to change almost every  text part of the web site.  And all by using the simple post editor in wordpress.  No need to be concerned about HTML tags, positioning, fonts etc…

If this is something that interests you,  send us an email  Info@RCHTechSolutions.com

Do you wish your membership site could do this?

• Automatically register and login new users based on the information entered in the shopping cart?
• Review your members membership details, and recurring payment status from one screen?
• Reduce your time spent administering your members by allowing you to check on a users payment status right from the wordpress dashboard, without logging into another website?
• Automated proactive checks of your members payments when they login?

you need the WishList – Premium Web Cart wordpress plugin.

Check it out at pluginsmadesimple.com