RationalDev

more of an aspiration than a claim

WordPress Editor - WYSIWYG HTML Editor

Friday, April 3, 2015

tags: wordpress wysiwyg

Are you making the most of your WordPress editor? I certainly wasn’t!

Warning: be careful editing the same posts in multiple browser windows as it can confuse the backup system and mean you lose your data. I have seen it get confused and not save my my recent modifications. Next time I will try remember to post the message here.

I’m not a huge fan of the WordPress editor, but check out this WordPress tutorial to make your experience a little more productive:

WordPress Editor Shortcuts

To get the most from your WordPress editor you should use Shortcuts keys. Using the keyboard is faster than the mouse, especially when you memorize shortcut keys. The WordPress editor has a “question mark” icon on the toolbar. Click on this and you will get a popup windows with content similar to this:

Windows and Linux use Ctrl + letter. Macintosh uses Command + letter.

Letter Action Letter Action
c Copy v Paste
a Select all x Cut
z Undo y Redo
b Bold i Italic
u Underline 1 Heading 1
2 Heading 2 3 Heading 3
4 Heading 4 5 Heading 5
6 Heading 6 k Insert/edit link
The following shortcuts use different access keys: Alt + Shift + letter.
Letter Action Letter Action
n Check Spelling l Align Left
j Justify Text c Align Center
d Strikethrough r Align Right
u **•** List a Insert link
o 1\. List s Remove link
q Quote m Insert Image
w [Distraction-free writing mode](#distraction-free-writing) t Insert More Tag
p Insert Page Break tag h Help
x Add/remove code tag
WordPress edtor focus shortcuts:
Alt + F8 Image toolbar (when an image is selected)
Alt + F9 Editor menu (when enabled)
Alt + F10 Editor toolbar
Alt + F11 Elements path
To move focus to other buttons use Tab or the arrow keys. To return focus to the editor press Escape or use one of the buttons.

Inserting an anchor link seems rather annoying in the WordPress editor! Hopefully one day I will edit this with a better solution.

You need to modify where you want to anchor in the Text mode (not Visual mode). Say you have a heading like:

<h3>Insert a WordPress Anchor Link</h3>

change it to:

<h3 id="insert-anchor-link">Insert a WordPress Anchor Link</h3>

now move to where you want a hyperlink that links to this anchor. Highlight the link text and press (Ctrl/Command + k) and make the URL:

#insert-anchor-link

Distraction Free Writing

Alt + Shift + w (or click on the icon in the top right of the editor)

Remove the controls surrounding the WordPress editor and leaves you with a clean background. Now you can focus on editing. Hover near the edges and the controls will come back.