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.

Slide07

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).

Slide11
There are ways around these shortcomings so you don’t have to always be stuck with your themes default settings. You can practice text formatting the way this slide was done live at W3Schools.com.

Slide12

Slide13

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;

Slide14

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.

Slide16
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.

Slide27
Our practice page is starting to take shape now using the text editor, we formatted an Unordered list <UL> with bullets and placed a photo.

Slide28To complete our live page, we will finish it by adding <H1> title tags and a <H2> subheading from the Visual Editor.

Slide29

Here is our HTML view from the WordPress WYSIWYG Text Editor:

Slide30

So now our page is live, and we’ve added a photo and changed the title paragraph text size and color.

Slide32

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.

Slide33
For that you would want to make sure not to place it in the Visual editor, but in the WordPress HTML text editor.
Slide34
And now we have the video on our WordPress webpage.

Slide35
To learn more about WordPress, join the Barcelona WordPress MeetUp visit http://www.meetup.com/Barcelona-WordPress-Meetup/

Below we have placed the detailed description of each of the WordPresss WYSIWYG text editor and its functions:

Slide08

Slide09

Slide10

Leave a Reply