WordPress Editor - WYSIWYG HTML Editor

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.

LetterActionLetterAction
cCopyvPaste
aSelect allxCut
zUndoyRedo
bBoldiItalic
uUnderline1Heading 1
2Heading 23Heading 3
4Heading 45Heading 5
6Heading 6kInsert/edit link
The following shortcuts use different access keys: Alt + Shift + letter.
LetterActionLetterAction
nCheck SpellinglAlign Left
jJustify TextcAlign Center
dStrikethroughrAlign Right
u**•** ListaInsert link
o1\. ListsRemove link
qQuotemInsert Image
w[Distraction-free writing mode](#distraction-free-writing)tInsert More Tag
pInsert Page Break taghHelp
xAdd/remove code tag
WordPress edtor focus shortcuts:
Alt + F8Image toolbar (when an image is selected)
Alt + F9Editor menu (when enabled)
Alt + F10Editor toolbar
Alt + F11Elements 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.

Insert a WordPress Anchor Link

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:

Insert a WordPress Anchor Link

change it to:


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.