Tutorial: Authoring Your First WordPress Post via WYSIWYG Editor

This tutorial for authors new to WordPress explains how to write a post using the WordPress WYSIWYG editor.  We will also provide a brief familiarization tour of the various options and buttons available to the Author Login.

To use this tutorial, you may need to use another computer such as an  iPad to display the tutorial and a laptop or desktop to execute the instructions.  An alternative would be to print the tutorial before you start and follow the instructions in the printout.

Please note any errors, typos, or unclear instructions that you find and either leave a comment on them or email one of the administrators using an email address in the Contacts page.

So, let’s get started.  After logging in to the site take a brief look at what is on the screen.  When you are done we will begin the tutorial by discovering and trying out most of the buttons available to you.

Author Login and Profile

At the very top right, you will see “Howdy, your name.”  If you hover over or click the “Howdy . . .”, you will see three items — your name, “Edit My Profile”, and “Log Out”.

Edit My Profile.  Click this button.  You will now see a number of options that you may set for your login.  The first option allows you to disable the visual editor.  I recommend you leave this unchecked, because we will be using this editor during the tutorial.

Most of these entries are self explanatory, but there is one entry that you will need to edit.

Biographical Info.  This  is the information that describes you and your background.  When information about the author is displayed, this information will be displayed.

Enter your biographical information in this box now.

Leave the remaining boxes unchecked.

Update Profile.  Scroll all the way to the bottom of the page and click the blue “Update Profile” box to save your changes.

[Warning.  Any time you see the inquiry “Are you sure you want to leave this page?” you are being warned that you have not saved your changes and will lose them, if you leave the page without saving or updating first.]

Dashboard.  This button is located near the upper left corner of the screen.  Click it to leave the Author Profile screen.  If you do not see it, drag down the menu bar on the left of the screen to expose the top-most button.

We will talk about the left side tool bar later, but for now focus your attention on the short tool bar on the top left side of the screen.

Navigation: Top Row

Above the “Dashboard” button there is a row of buttons.  The first is round with a “W” in it.  This button sends you to the WordPress site where you can find answers to almost any question you might have.  Click the WordPress button now.

You should now be on the About WordPress page.  You will notice that as long as your cursor is over the circular “W” button, you will see 5 submenu options.  These are pretty much self explanatory.

Clicking on any one of the last four options will take you from the WordPress admin screen.  To return to the Admin screen, you will need to keep pressing the back arrow until you get back to it.

The next button displays a little house with “CASF” beside it.  Hovering over this button will display the “Visit Site” button.

Visit Site.  Click the “Visit Site” button to see the published CASF web site.  Only the pages and posts that have been published can be seen just as anyone accessing the site on the internet would see them.

When you are finished accessing the site, go back to the CASF button and click on Dashboard to go back to the admin screen.  There will likely be other buttons under the CASF menu, but these change depending on what you were doing most recently.

Comments.  The next button in the top menu is a little speech box with a number beside it.  This is the comment box and the number indicates the number of comments that have been made regarding posts on the site.  Clicking the box will take you to the comments section just as if you had clicked the “Comments” item in the left side menu.

+ New.  Hovering over this button will display two menu items:  Post and Media.  These buttons allow you to add a new post to the web site or to add a media item to the Media Library.  We will talk about these later.

Y.  The last button along the top row is a “y” that looks like a checkmark.  If you are in the process of editing something, there may also be a round ball beside the checkmark.  This button is associated with the Yoast SEO plugin.  Yoast SEO is outside the scope of this lesson and will not be covered.

Navigation – Left Side Menu Bar

The main menu items on the left side menu bar include the Dashboard, Posts, Media, Comments, Profile, Tools, and Collapse Menu.  Let’s take a quick introductory look at each item.

Dashboard.  Click this button to see what is displayed.  The screen associated with the dashboard contains several pieces of information regarding the web site, some WordPress news, and even a simple little box to quickly enter an idea you might have.

Post.  This button provides the option to view a list of All Posts or Add New post.  If you hover over the post button, it will display the two options to the right, but clicking it will display them as submenu items in the menu bar.

All Posts.  Clicking All Posts will display all published and draft posts on the site.  You will be able to edit or modify only the posts for which you are listed as the author.

Add New.  Clicking the Add New post button will take you to the WYSIWYG editor to allow you to write a new post.  We will discuss the use of this editor later in this tutorial.

Media.  Clicking or hovering over the Media button will offer two options relating to the Media Library.

Library.  Click this button to go to the Media Library.  This is where you will find all of the images, audio, video, and pdf files that have been stored there.  In almost every case where a figure has been inserted into a post, that figure can be found in this library.

If you want to insert a figure into a post, you will likely be required to import it to the Media Library first.  You will do this by clicking the Add New button.

Add New.  Click this button now.  This takes you to a new screen where you will be able to upload your media item(s) to the Library.  This new screen shown at the left  contains a dashed box within which you may drag and drop a figure, but I generally copy what I want to my computer desktop and then click the little “Select Files” button and browse to and select the file(s) on the desktop.

The file(s) will be copied to the media library displaying a progress bar.  After reaching 100% it will then indicate that it is crunching the figure.  There will be a separate progress bar and crunching routine for each figure should you be copying multiple figures at once.

Other Menu Items.  There are four more menu items that include Comments, Profile, Tools, and Collapse menu.

Comments.  This menu provides the means to review and deal with comments that have been left on the site.  This is outside the scope of the tutorial and will not be covered.

Profile.  This menu item was already covered in the Howdy . . . login menu discussion.  This simply provides an alternative way to get to the profile portion of that menu.

Tools.  Go ahead and click the Tools button and have a look around.  We will not be covering Tools in this in this tutorial.

Collapse.  Click the Collapse menu button to see what that does.  Click it again to un-collapse the menu.

Go back to the Posts > Add New menu, and click Add New to bring up the editing window.

Screen Options.  If you look near the very top right of the screen, you will see a drop down menu labeled “Screen Options” right next to the Help button.  Click it.

A list of options that may or may not contain check boxes will drop down.  These boxes may be checked if you want to display the identified information on your editing screen.  Below is what my screen options look like, but what you want to display is up to you.  If your editing screen appears a bit too busy, go ahead and uncheck some of the boxes.

To display the information in the column on the right side of your screen, it is necessary to check the 2-column layout.  That column contains a lot of buttons that you will need to use.

Now click the Screen Options drop down arrow again to hide the list of options.

Now that you have been introduced to the menu buttons that are available to the Author login, we can now get to the meat of the tutorial and the tools available to you in the WYSIWYG Editor.

Using the WordPress WYSIWYG Editor

Before we get into the inner workings of the WYSIWYG Editor, I need to make a few general comments regarding the creation or import of text for posts.

You can write a post using Microsoft Word and import it to the Add New posts screen, but keep in mind that any figures you have inserted in your word file will be removed.  You will have to upload them to the Media Library and then insert them into your post in a separate process.  Also, many special fonts or formatting may get lost in the upload.

Mammoth .docx converter.  To upload a Word file, scroll all the way down to the very bottom of the Editor window.  There you will find the words “Mammoth .docx converter.”  On the same line to the far right, you will see a menu dropdown arrow.  Clicking it will display an entry box labeled “Select .docx file” to the left of it and a “Browse” button to its right.  This gives you the option of browsing to the .docx file to be imported or you may enter the path and filename of the .docx file, if you know what it is.

On the other hand you can write the complete post using the WordPress editor, providing you do not need to do anything fancy with the formatting or type fonts.

I don’t know for sure, because I haven’t tried it, but creating equations or importing text containing equations will likely present a problem.  Should you need to do this, notify one of the administrators, and we will attempt to find a plugin that will allow you to do this.

Incidentally, plugins are simply wonderful.  There is very little that you cannot do with the right plugin.  Always keep this in mind, if you find yourself bumping your head on something you cannot get to work the way you would like.

Scroll back up to the large text input box near the top of the page.  Notice several lines of tools just above the text input box.

WYSIWYG Editor Tool Bar.  The two rows of icons just above the large text entry box are editing tools for your use in writing and formatting your post.

If you only see one row of tools, click the last icon on the row that you see to display the second row.  Many of these tools look and act like those used with Microsoft software and should be self explanatory.  We will discuss the less familiar buttons in more detail later.

Let’s start in the top row and work our way through all of the tools.

Paragraph.  This tool is a drop down menu that provides 6 pre-formatted headings you may use.  Simply click the down arrow and select the heading you wish to use.

Bold/Italic Font.  The next two tools are designated B for bold font and the I for italic font just like those Microsoft uses.

Bulleted List.  This tool is shown right after the italics tool.  It gives you the ability to create a bulleted list of items.

Enumerated List.  Need numbered lists or paragraphs?  This tool gives you the ability to create them.

Blockquote.  If you put your cursor within a paragraph and click the large quote marks tool, that paragraph will designate quoted text by enlarging and changing the font used.

Align Left/Center/Align Right.  The next three tools give you the ability to format your paragraphs to align left, align center, or align right, respectively.

Insert/Edit Link.  The tool designated by the chain link symbol allows you to add web links to your text. We will discuss this tool in more detail later.

Remove Link.  This tool, designated by the broken chain link symbol, lets you cleanly remove any link existing in your text.

Insert Read More Tag.  The second to last symbol on the first line will let you place a “read more” link within your text.  This allows you to write a post that displays only an excerpt or meta description on the web site front (or first) page with a “read more” link to the full text of the post.

Tool Bar Toggle.  The last tool on the first line lets you toggle the second row of tools on or off.  (I don’t know why Wordpress didn’t just include the second line of tools automatically with out having to use the toggle.)

These next tools are in the second line of tool bars.

Strikethrough.   The ABC with a line through it allows you to strikethrough selected text.  This is probably used when you want to show deleted text to a coauthor.

Horizontal Line.  Clicking the horizontal line icon will place a line in the text from the left margin to the right margin.

Text Color.  If you select a word or sentence fragment, and then click the tool designated by A with a line under it, you can then select a color for the selected text.

Paste as Text.  Forces the WordPress editor to paste as plain text.  (I haven’t been able to figure out what this tool actually does. Let me know if you discover its exact purpose.)

Clear Formatting.  The eraser icon will clear any formatting you have used.  For example, let’s say you have changed the text color for a sentence.  Simply put the cursor on any portion of the color-altered text and then click the eraser tool located just before the Omega symbol.  The text should go back to the default color.

Special Characters.  The Omega tool provides a screen full of special symbols that you may use in your text.  Click it to see what is available.

Indenting.  The next two tools remove indenting and insert indenting, respectively.

Undo/Redo.  The two curved arrows allow you undo or redo any changes you have made starting with the most recent and working back in time.

Keyboard Shortcuts.  The question mark provides a list of keyboard shortcuts.

Multiple Columns.  The last symbol is beyond the scope of this tutorial, but it provides the means of presenting your text in multiple columns.  This tool was added with a plugin.

Click Posts > Add New.  In illustrating the use of the WordPress WYSIWYG editor, we will refer to the below figure showing the Add New Post screen.  For the purpose of illustration, let’s do a “Hello World!” post complete with text and inserted media.

The first step is to give your post a title.  You can change it at any point in the writing process, so don’t worry about getting stuck with a title that you may want to change later.  So enter Hello World! in the single line box near the top of the screen.

Save Draft.  Now click this button in the Publish box on the top right of the page.  You will find it useful to periodically save a draft of what you have written to give you some comfort that you will not lose your most recent changes or additions.

Enter a couple of paragraphs of text into the large empty box in the editor.  This can be gibberish or whatever.  This will give us some text with which to work.

Now let’s add a figure to our post.

Add Media.  The Add Media button is in the upper left corner of the editing screen.  We will use it in a minute to insert a picture.

First, place your cursor where you want the picture to go.  We will make the text flow around the picture as shown in the example below, so put the cursor next to any word in the second line of text.

Now click the Add Media box at the upper left.  This will take you to the Medial Library, where you will be able to select a figure to be inserted in your text.

Select any figure you wish by clicking on it.

Now click the Insert button in the bottom right corner of the screen that appears.

You will now be taken back to the edit screen where you will see the figure that you chose.

Click the on the figure and resize it to the size you would like using the little sizing handles.  A size that is about half the width of the text box is usually pretty good.

Example of Formatting

When you click on the figure, a small rectangular formatting box appears above it.  The icons in this box indicate from left to right: (1) picture justified left with text flowing around to the right, (2) picture centered with text above and below it, (3) picture justified right with text flowing around the left side of it, (4) picture justified left with text above and below it, (5) the edit button designated by a pencil allows you to add a caption and modify other information related to the picture, and, finally, (6) the x allows you to remove the picture.

Insert/edit link.  Suppose you are writing a post about James Hansen and have referred to his penchant for denying the existence of data that does not support his agenda. You might want to include a link to a post describing his shenanigans.  Let’s say you pick the word “shenanigans” and use that for the link.

For now, though let’s select a word that already exists in your text box.  This can be any word or phrase.  Go ahead, pick one and highlight or select that word or phrase in the text.

Now go to the top tool bar and click the solid chain link.  Type or copy the URL you want to link to in the box that appears.

Next click the gear icon and check the box labeled Open Link in New Tab.

Now, click Add Link or Update in lower right corner and you are finished.  The reason for clicking the Open Link in New Tab box is so that when someone clicks on a link they do not leave our site behind or forget where they were.

Notice that the link page that offers the Open Link in New Tab option also offers a search box for finding the URL you might want.  It also includes a list of URLs for posts and pages that already exist on this site.

If you find your URL using one of these methods, you need to copy and paste it into the URL box near the top of the page, and, if necessary, type the linked text (the word or phrase you want to use) in the box below that.  If you have already highlighted the word or phrase in the text that you want to use, it will already be in the box.

Yoast SEO.  If you scroll further down the page below the text input box, you will see a section titled “Yoast SEO.”  The acronym SEO stands for Search Engine Optimization.  The Yoast SEO section is from a plug in to help you write your post in such a way that it will be easy to find with a search engine, particularly the Google search engine.  The Yoast SEO is largely self explanatory, but it is beyond the scope of this tutorial and will not be covered further.  Feel free to look this section over on your own for the time being.

Preview.  When you are finished writing your post and you would like to see what it will look like on the web site, simply click Preview in the Publish box top right corner.  You can click Preview at any time during your writing to see how something looks.  When you are finished examining your work click the tiny “x” on the right side of the window tab to delete the preview screen and return to the editing screen.

Publish.  When you are ready to show your work to the public, just click the blue Publish button on the bottom right of the Publish box.  If you have regrets about publishing, you can go back to draft mode by clicking the “Edit” button shown in the publish box to the right of the Status: . . .  line. Clicking the Edit button will display a drop down menu for you to select a different status such as “pending” or “draft.”

There are several other options in the Publish box that you may browse at your leisure, but they are outside the scope of this tutorial.

Congratulations!  You have completed the tutorial and you should be able to create quite acceptable posts using the tools that we have gone through with you.  The more posts you write the easier this will become and the more adept at using WordPress you will become.  So start writing!