The WordPress page editor is where you will go to add pages to your WordPress site. This tutorial shows you the editing features that are available with the WordPress Page Editor.
The demo site that was used for this training can be found at http://HOAdemosite.siterubix.com
The tutorial that discusses adding images to a WordPress site can be found here: WordPress tutorial: Images in WordPress
Jaaxy is the keyword search program mentioned in this training. Give Jaaxy a test drive, your first 30 searches are free.
The WP Edit plugin can enhance your formatting: View the WP Edit Setup tutorial here.
0:40 Keyword Research
1:10 Adding Images to Pages
1:51 Bold, Italic, Strikethrough, Bullets and Quotes
3:34 Alignment, Insert and Remove Links and the Read More tag
4:59 Horizontal Lines, Background Color and Tables
6:20 Columns, Source code and the Kitchen Sink
7:48 Paragraph Formatting, Underline, Justify, Text Color and Paste as Text
8:49 Clear Formatting, Special Characters, Indent and Undo function and the Short Keys.
9:48 WP Edit
Hi folks, in the last tutorial I covered how the page editor window is organized and how to set up and move around on the page editor. This tutorial will show you the editing features that are available in the page editor will show you the basic editor functions. Then I will enable the WP edit plug-in and you can see the additional features that are added with this plug-in.
Last time I placed the title on the page that we created. I chose this title from the keyword research I did on the topic. I use a keyword research tool called Jaaxy for this research. The search term I chose was “learn WordPress quickly audio tutorials”. This keyword term has an average monthly search volume of 146 visitors and only four sites that compete for the exact term. With only four competing sites I have a good opportunity to rank for this search term.
Adding Images to Pages
I quickly created a post without using formatting of any kind. I copied this content to my post so that I could demonstrate formatting at the top of the edit box we see a number of icons, above and to the left is a box that says add media. I won’t go over this right now, but if you’d like to learn how to add images and other media, you can jump out to the video training that I did that will show you how to add and manipulate images on your website. I highly recommend adding images to every page and post. Make them relevant to the content, if you’re talking about baby products adding images of elephants probably is not relevant.
Bold, Italic, Strikethrough, Bullets and Quotes
Let’s go over what the other icons mean. To start with, B stands for bold. In general you’d like to highlight the text that you want to change and then apply formatting. You can see that the word welcome is now bolded if I want to undo that I would highlight welcome and click bold again.
Next up is italic “I” for italic. Again, I would highlight any text that I want to change and click the icon to install the formatting. This can be removed by re-highlighting and turning off the feature.
Next is a strikethrough if you like to add a line through any of your text say you want to let your reader know that you decided to reword a certain line. You can strikethrough and put in a different verbiage.
Next is a bulleted list. This will add bullet points to a paragraph. Each time you hit return it will add a new bullet point next to that we have an ordered list or a numbered list so it operates the same as the bulleted list by numbers instead of bullet points.
If you would like to quote someone, most themes have formatting that will add specific formatting to a block quote. You would highlight any text that you want, and hit the block quote. You’ll notice that because this paragraph is all one paragraph it applies the formatting to the entire article. We will talk about how to split paragraphs in the next tutorial.
Alignment, Insert and Remove Links and the Read More tag
Then we have three icons that provide you with alignment on your page. If you’d like to align the left align to the center or align to the right. You can highlight your paragraph and orient the text on your page.
Finally, we have insert a link, and remove the link, and if we wanted to jump over to some other page or add a link to another piece of content, either on our website or on someone else’s website, we would highlight the words that we would like to link, and then we can click and add the location that would like to go to. Underneath we have a title that we can input and we have a checkbox that determines if we would like to open in a new window or tab. Typically, if you’re leaving your website, you’ll want to open a link in a new tab and if you’re staying on your website, you will want to leave that box unchecked. Also, if you hover over your link text inside your webpage, it will pop up whatever you put in the title here. If I wanted to remove the link, I would highlight the text and click on the second icon.
The insert read more tag gives you a way to provide the end of an excerpt, this is more useful in the post editor, I will go over how to do that in the post editor, it really has no function in the page editor.
Horizontal Lines, Background Color and Tables
To add a horizontal line to a page, I would locate my cursor and Click the Icon. When I want to remove a horizontal line, I would need to go to the text editor and remove the code for that horizontal line. The text editor is reached in the upper right hand corner. You have two boxes one visual and one text. Going into the text window will show you the coding behind your page. You’ll notice that I put in two horizontal lines, and here’s the code for that right here, I’m going to delete the horizontal line as well as the associated spacing.
Next, we have the background color. If I wish to highlight a paragraph with a specific color I can highlight the paragraph and add background color. Typically this will add a background color specifically to each line, so if you’re highlighting a single line with a color, this works quite well. Here is what it looks like in the page display.
Next we have a table. If would like to enter some sort of a table code we can insert something like an Excel spreadsheet or that kind of thing. We can highlight various levels of the table insert the table fill in the content.
Columns, Source code and the Kitchen Sink
The next icon is for column short codes. This will add columns into your page. Clicking on this icon will prompt me for how many columns I’d like to put in. In this case, I’m going to put in two columns and the columns are going to be oriented one third and two thirds so the column on the right will be larger than the column on the left or if I’d like to do it the opposite way the column on the left will be larger. Then I can insert the code and you’ll see that it’s added code into the editor window. I want to put my content into that code. I would take my content from above and paste that into where it says “CONTENT”. The content is now surrounded by the short codes. For the other section, I will grab a little bit of content and paste it where it says “CONTENT” in the second part. Then I will see that I’ve divided up all that content into two separate columns one is two thirds wide and one is one third wide. This all occurs inside the visual window so you don’t have to jump over to the text window to add short code formatting.
Next, if you want to see the source code you can click this icon to view it.
Finally, we have the toolbar toggle which was formally known as the kitchen sink. Clicking on the toolbar toggle will add additional icons in a line below this line.
Paragraph Formatting, Underline, Justify, Text Color and Paste as Text
The new icons start with paragraph formatting, we can add a heading or we can create regular paragraphs formatting or we can format the various sections of our page.
Next we have an underline feature which is similar to the bold and italic, highlight the content and click on apply to add the formatting.
If you want to justify across the page we could highlight the content and click justify and it will justify both right and left sides, basically it will justify full.
e=”font-size: 14pt;”>The next icon will add text color, in this case, we want to change sections of text or highlight something by changing the color of the text itself.
Often people will create content with Microsoft Word and then copy it into the content on your website. The paste as text feature will remove all the formatting that word adds behind the scenes to your text.
Clear Formatting, Special Characters, Indent and Undo function and the Short Keys.
The next icon will remove formatting that has been applied. Perhaps we have a section of text that contains formatting we wish to remove. Clear formatting will remove this formatting from the page.
If we have a special character that would like to add, perhaps add a euro sign or even a copyright, clicking on this icon will take you to the add a special character chart to select your character. The character will be added at the current cursor location.
We can also increase and decrease indents and we have the undo and redo function. These are pretty standard features.
The final question icon provides a list of short keys that allow you to insert formatting quickly. Hold the control (command on a Mac) and the letter after highlighting the text to apply the format.
The WP edit plug-in can enhance the options for formatting your text. I have already installed this plug-in so let me quickly enable it and you can see the additional options that it provides. I provide a tutorial on how this plug-in is set up at Wealthy Affiliate. This link will take you to the setup tutorial.
Nothing has been added in the top row of icons. In the lower row, you will see three new drop-down’s one for font family, one for font size and the third for headings and special formatting. I’ve installed the minimum number of new icons with the WP edit; these are things that I missed but wanted to access. There are many more options available.
In the next tutorial I use some of these formatting features to format the content that I placed on this page and also discuss how to make a post more readable. It is known that people on the web don’t read, they scan so you need to make your content scannable to entice your visitors to read your content in more depth.