WordPress WYSIWYG Editor

WordPress Visual HTML Editor Buttons Explained

WordPress WYSIWYG Visual HTML Editor, with full  button layout  and explanation of each buttons function.

This article is going to be a quick guide for those that are new to the  WP visual HTML editor buttons & layout.

I know most bloggers will already be fully clued up on this, but for the newcommer to WordPress, websites & blogs, it can be a little off putting, so for the seasoned bloggers / webmasters please bear with us ok..?

1. This space is where you would insert your title, this is the title that displays in your browser address bar.

2. Use this edit button to edit / change the permalink. Quite often you may change your mind on the title, use this button to edit the permalink so both are matching.

3. Click this button to upload and insert a picture.

4. Click this button to upload & insert  a video.

5. Click this button to add audio.

6. This button is for other media, such as small programs, games etc that users may download.

7. Button 7 is to access the visual “wysiwyg” editor.

8. Button is to access the html editor. Please note that switching between the visual & html editors whilst you have a page open, can introduce errors to your code.

9. Select an area of text & click button 9 to set the selected text bold.

10. Select an area of text & click button 10 to set the selected text italic.

11. Select an area of text & click button 11 to set the selected text as strike through.

12. Use button 12 to produce an unordered list.

• example
• etc

13. Use button 13 to produce an ordered list.

1. example
2. etc

14.  This button is called “block quote” & is handy for highlighting an area of text, or inserting a block of code as an example. Simply highlight the text and click the button. Then press enter to leave one line of space before pressing the quote button a 2nd time in order to end the command.

15. These next 3 buttons are for text & object alignement,

button 15 = left align

button 16 = center align

button 17 = right align

Note: Remember to press enter to leave an empty line before ending the command.

18. This button is used to insert a hyperlink into your text for example if I wanted to link to the category Design & Layout I simply highlight the words I wish to use in the link & then click on the link button, a small window will open allowing you to enter the URL of the page / site you wish to link to & also to set Target as same window or new window.

19. Simply removes a hyperlink.

20. This button is not required on many themes as the result is hard coded into the theme already, however all it does is to insert the “read more” link at a selected point in the text, everything prior to this link will show normally, but everthing after the link will only be shown by clicking the “read more” link.

21. This button is for the spell checker. Don’t take what it says as gospel as it does make mistakes !

22. This button toggles between full screen & editor normal screen, useful for checking placement of items on the page.

23. This button toggles between basic mode and enhanced mode of the editor, giving a 2nd row of buttons.

24. This button is not a standard button of the editor & will only appear when you have the hide post plugin installed.

25. Used to format text to paragraph (normal) or heading size ranging from h1 to h6.

26. Used to underline text.

27. This button is very useful for tidying up your text, it is the “Justify” button and will adjust spacing throughout your text to try and square up each line of text so that the ends are not all jagged.

28. This button marked by the “A” changes you text colour, the easiest method for using this, is to type out your article first & then simply select & highlight the text you wish to change.

29. & 30. Use button 29 marked with a T to paste in text from a standard text editor, or use button 30 marked with a W to paste in text from MS Word.

Note: Pasting in text direct from either a standard text editor like notepad or from MS Word, can introduce errors into the resulting html code.

31. If you find there are errors introduced into your page, then select all text & click this button to clear formatting, this will often help to remove errors.

32. Insert / edit embedded media, use this to embed video from Youtube etc.

33. This button is used for special characters such as © ® ™ & a whole host of other special characters you may use with different languages.

34. This button removes the indent of the text & aligns left as normal.

35. This button indents the text to the right.

36. This button is used to back track & undo previous commands.

37. This button moves forward through previous commands after using button 36.

38. Editor help files, very basic but some useful short cuts are listed.

Please bear in mind that this reference is based on the basic WordPress Visual Editor and not any advanced editor plugins, of which there are several.

Republished by Blog Post Promoter

Related posts:

1. WordPress Visual Editor Plugin – TinyMCE Advanced
2. Clone WordPress Blog & Create Test Site 7 Easy Steps
3. How To Create A 4 x 4 Sidebar Advert Block
4. How To Install WP Plugins On Your WordPress Blog
5. WP WordPress – CPanel Setup Installation

Posted by Steve (Admin) on Dec 1 2011. Filed under WP Wordpress. You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry

Search On My Blog Review

Custom Search