Beginners Guide to Using WordPress WYSIWYG Web Page Editor

wordpress-editorWordPress has its own basic WYSIWYG page editor.

Although it isn’t as powerful as even the most basic desktop editors it is usually all you need to create and edit Posts and Pages.

Here we will take a look at how to use it and some of the important features.

Quick Editing Tips

Full Page/Distraction Free Editing

Click the icon on the editor toolbar to switch the editor to full screen for easier editing large pages

WordPress-distraction-free

If the icon is not available then it has been disable in screen options.

wordpress-screen-options-distraction-free

Visual Editor Not Available

If you are using WordPress, and only have the text mode available then you need to go to Users section and check your profile settings, and check that the visual editor hasn’t been disabled.

ordpress-disable-visual-editor

Splitting Your Content Using The More Tag

Blog Posts appear on the blog home Page.

How many appear depends on your settings but 10 is the default.

It is very common;especially with long posts, to have a teaser with a link to the rest of the post.

This is accomplished by inserting the more tag. To insert the more tag navigate to the position in the post where you want it and click the More icon in the top menu bar.

more-tag-icon

Note: the More tag is used with blog posts and not pages.

Copying Content From other Sources Like Word Processors

Very often you will already have created the content using a word processor, and will want to add it to your site.

The temptation is to simply copy it from the source document by highlighting it and hitting ctrl+C and pasting it into the visual editor by hitting ctrl+V.

This does work but the result may not be as you expected as there may be lots of formatting information that has been copied with it.

Note: You will need to view the HTML to see it.

However WordPress provides a easy way of doing it without copying all of the formatting information. Instead of copying it straight into the document click the paste as text icon and copy it into the window.

Wordpress-paste-text

Click insert (bottom right) and the text is entered into the page/post without all of the superfluous word processing code.

Editing Web Page Source Code

All WYSIWYG web page editors offer the ability to edit a web page in source or HTML mode.

If you are using WordPress the tabs are labelled visual and text. Text mode is what is usually known as source mode.

edit-source

 

When you switch to text mode then you can see the raw HTML. In order to edit in this mode you need a basic understanding of HTML- See Starting HTML

Why you would want to go into the HTML mode when you can use the visual editor which is much easier?

Usually it is to add code that can only be done in source mode or sometimes the editor gets stuck, and doesn’t do exactly what you want.

As an example you may find that you insert a header tag say h4 in your page and then proceed to type, but all of the text now appears in h4, and doesn’t revert back to the normal paragraph font.

In this case you simply switch to text/source and edit out the h4 tags.

Switching between source and visual modes is quite common, and it is for this reason that I always recommend that you have a basic understanding of HTML.

Advanced Editing

If you are familiar with using a word processor like Word or WYSIWYG web page editors you will notice that the WordPress editor is very basic.

What happens if you want to insert a table into your page?

Well you could always switch to HTML mode and write the code but that would be way to difficult.

Fortunately there are a number of alternatives that you can consider:

  1. Using a standard web page editor like Trellian web page and copying the html from the editor to WordPress when finished.
  2. Using a desktop based blog publishing platform like Windows Live Writer. I prefer Windows Live Writer because it supports pages as well as posts, and it is free with the windows live range of products.
  3. Install the TinyMCE advanced plugin.
  4. Install the TablePress plugin.
  5. Create in Word and copy the table into WordPress .—Probably the easiest. Note: Paste from word button is no longer present in WordPress 3.9 and not needed.

Here is a video showing how it is done on WordPress 3.9

Note: Because I am familiar with the Microsoft FrontPage editor, and I don’t need advanced editing features very often I tend to use that, and then copy the HTML when finished.

Note: I try not to install plugins unless they are really needed and isn’t worth it just to add the occasional table.

Related Articles and Resources:

Useful Resources

Save

Save

Save

Save

Did this Tutorial Help? Please Rate
[Total: 0 Average: 0]