WordPress Tip: Use Chrome’s Code Inspector to Edit HTML Inside Visual Editor

Using WordPress’ visual editor is nice, the TinyMCE Advanced Plugin makes it even more powerful.  But it’s nice to be able to go back and change the HTML.  Using the HTML tab in WordPress is not necessarily the best way to edit HTML, especially if you are interested in switching back and forth between Visual and HTML.   If you are working with a large document, the HTML tab will always start you at the top.  So every time you switch to HTML you have to search (either visually or with find) to find where you were at in the HTML.   There is a better way…

You can directly modify code in the Visual editor by using Google Chrome’s Code inspector.

  1. Locate the element you want to edit in the visual editor
  2. Secondary/right click on the element you want to change
  3. Select “Code Inspector” from the menu
  4. The code for the element you want to change will be highlighted below
  5. Either double-click, or Secondary/right click on the HTML you want to change
    • For a tag, select “Edit As HTML”
    • For inside a tag, select “Edit Text”
  6. Make your change then hit enter

This will immediately update the display i the Visual editor without forcing you to seek through the document to find where you were editing.  This is not a perfect solution, but this makes the WordPress code editing experience much closer to what is available in a Desktop WYSIWYG editor such as Dreamweaver.

P.S: Users of Firefox may be able to do this same feature with the Firebug developer plugin.

Parachute, Colorado, United States