The WordPress WYSIWYG text editor is deceptively simple but sometimes new users must first learn a few basic HTML tricks.
Michael Paragon – New WordPress users often miss learning a few fundamentals of the WordPress WYSIWYG text editor, including basic HTML. Knowing a few simple HTML tricks will help you create better looking, and ranked web pages. WYSIWYG of course translates to; What You See Is What You Get. Okay, that’s really not the name WordPress gave it. It’s actually called the WordPress Visual Editor, AKA: WYSIWYG.
The WYSIWYG editor looks simple and is very simple, and similar to using a Microsoft Word text editor. While organizing the Barcelona WordPress English MeetUp group on this subject, I collected the following slides for our presentation. These slides explain what each individual WordPress text editor button does. You can find a lot of other helpful information about the WordPress text editor by visiting WordPress.Org and clicking support/user-manual: https://make.wordpress.org/support/user-manual/support.
Here we explore the text editor and I will try to help you make some sense of the HTML editor (which is the second tab next to Visual that says Text). At the end of this post are detailed slides explaining each of the WordPress editors functions.
Before we get too detailed, it’s important to note a few things You would expect to see in a WYSIWYG editor, but are not here. We have the ability to change the text font color, but notice not the font size. Instead there is a paragraph dropdown menu, with a list of headings. And you will notice they are set as pre determined font sizes, usually set by your themes default CSS (or style sheets). Also notice there is not a simple method presented to users for changing the text line spacing (known as leading in newspaper layout).
Here we see a slide of both text editors side by side. And you can now see the HTML code we have placed for font size, so we are no longer limited by the themes default <H1> tag style sheet settings. We can now change this value to anything we want now in the WordPress WYSIWYG Text Editor, and we select this size: font-size: 42px;
Documents created in Microsoft Word carry a kind of formatting that is purged in the Drop Text and insert window. This frustrates a lot of Authors’ because often the text margins and other nicely formatted text is lost. Here we have the “Drop Text” window with our new text.
Knowing a few html font decoration tricks can be very helpful. We were able to change our font size through HTML and practiced placing our code live at W3Schools.com.
Here is our HTML view from the WordPress WYSIWYG Text Editor:
So now our page is live, and we’ve added a photo and changed the title paragraph text size and color.
But what if we wanted a video here instead of a photo? From either YouTube or Vimeo click the share button and collect the embedded code.
Below we have placed the detailed description of each of the WordPresss WYSIWYG text editor and its functions: