WordPress Posts & Classic Editor (Part 2)

Note: This post is from our WordPress Beginner Tutorials Series on YouTube. 

To add a new post, you can either hover your cursor over the quick access toolbar at the top where you see “New”, or hover your cursor over Post in the left side panel, then click on Add New in the flyout.

I suggest following right along with me and pausing and going back and forth as much as you need too. A great way to learn is by doing.

For the title of our Post I am going to enter in Food for Thought. You will notice how wordPress automatically picks up on it and creates a url, the permalink. If you do not like it you can change it by clicking the “edit” button at the end of the URL.

WordPress Logo

The “edit” button will turn into “ok” and make sure you click it when your done with your edit. Then click the “publish” button to the right to save your changes. Once you click the publish button it turns into “update”. Anytime you edit your Posts or Pages always make sure you are clicking the update button.   

Next, I am going to copy and paste some dummy text to use in the body of the post.

You can copy and paste a couple different ways. You can highlight the text or image by left clicking with your mouse and moving it over the area you want to copy. To paste it, click on the area you want to paste it too, then right click your mouse and select paste.  The other way is by using Ctrl + c to copy and Ctrl + v to paste. On a Mac just replace Ctrl with Command.

I left a link down in the comment section to a list from Mashable of 56 Unique Lorem Ipsum Generators. Lorem Ipsum is used to fill space like a placeholder. I prefer using something more creative than the usual generic Ipsum. So if you start reading my content it’s just a goofy spin off from the regular Lorem Ipsum text.   

Go and click on that link and copy like 15 paragraphs from whatever Ipsum you choose.Then come back here and paste it into your editor just like I did.  

Once you have copied and pasted your content, click on the preview button and a new tab will come up showing what your post currently looks like. After you have had a look, go back to your editor tab window. As you could see from the preview, your post looks pretty plain so lets add to it.

We already created an H1 tag when we created the title, so let’s create an H2. Click in the 1st paragraph a few words in, then hit enter to move the rest of the paragraph down. Highlight the words you separated and select H2 from the Paragraph dropdown.  

Before we go any further there is one shortcut that will always come in handy that you need to learn. That is Ctrl + z on a PC and Command + z on a Mac for Undo.  

Yes, there is an undo icon in the editor menu but the keyboard shortcut works better, at least it does for me.

If you do something and do not want to keep it, just undo it.  I use a lot of shortcuts and I think it could really help your workflow as well, even just knowing a few of them. For the sake this video though, I will primarily use the controls in the editor.

Getting back to our H2 tag, let’s bold it and put it in italics, and center it.

Let’s take some text from the end of the 2nd paragraph and move it down. Then highlight it and select from the Paragraph drop-down H3, then make it bold, put it in italics and center it like we did above.  

Next, let’s make the 3rd paragraph into a bulleted list. Highlight the entire paragraph and click the icon for a Bulleted List. It should add one bullet to the first sentence. Now click in front of each sentence in the paragraph and hit enter each time to add a bullet in front of each sentence.  

Highlight the 5th paragraph and click the Blockquote icon. We are also going to indent the paragraph. Click the right indent icon with the paragraph still highlighted. You might want to click the indent icon twice but do what you think looks the best. Remember, you can always undo anything by clicking Ctrl + z.

Open up another browser window and search google, say for cats. Click on the images tab at the top in google. Then select the image you want. Hover your cursor over the image you have chosen, then right click on it and select “Save Image As…” Save the image to your desktop so it’s easy to find.

Back inside your editor, go down to the 8th paragraph and click your cursor at the end of the last sentence in that paragraph. Hit enter once to make some space. Go up to the “Add Media” button and click on it. Then under the “Upload Files” tab click on the “Select Files” button in the center.

Locate your image on your desktop and left click on it once. Then click the “Open” button This will load it into your Media Library. Then down in the right hand corner you will see the button “Insert into Post”. Click on it to insert the image into your post.

Right click on the image in your post and you will see some options popup. Hover over the icons until you see the tooltip that reads “Align Right” and click on it.  It should wrap the text more around the left side of the image. Click the “Update Button” to save these changes. Click on “Preview” to view your post from the front end.

Back inside your editor, click at the end of the 10th paragraph and hit enter on your keyboard to make a space.  From the top row of your icons, the second one from the right is the “Insert Read More Tag” . Click on it, then click the “Update Button”. Just over to the right in your editor, you will see the current tab you are in now which is “Visual”, click on the “Text” tab next to it.  

What you are looking at is the back end of your text and its in the HTML markup language.

This is part of what makes websites look the way they do. It’s actually fairly easy to understand but you do not have to think about that right now. Scroll down the page and look for (less than sign, exclamation point, dash dash “more”, dash dash, greater than sign) <!–more–> – This was added to the page when you clicked the icon to add the “Insert Read More Tag”.

To view this, you need you to log out of your dashboard. To log out, go to the upper right hand corner of the page, then hover over “Howdy, your login” and you will see “Log Out” from the drop-down.

Once you are logged out go to your address bar. Starting from the far right going left, delete everything up until the forward slash after your web address. Then add the word “blog” after that forward slash and hit enter on your keypad.  

Scroll down the page and you should see a text link that reads “Continue Reading”.  This is what the “Insert Read More Tag” did. But it also removed any content below that line. If you click the “Continue Reading” link it will add all the content back below that line.

Log back into your WordPress dashboard and navigate back to your post.  Just in case you are unsure how to get back in, here is a reminder. You need to go to your WordPress Dashboard login screen. That’s your complete web address, and add a forward slash at the very end of it. Then type in “wp-admin” and hit enter on your keypad.

Once you are logged in look for “Posts” on the left hand side menu. When you hover your cursor over Posts, click on “All Posts” from the flyout.  

After you open up your post click the “Text” tab to view the HTML again. Scroll down to the (less than sign, exclamation point, dash dash “more”, dash dash, greater than sign) <!–more–> .

We know this currently adds a text link with “Continue Reading” but you can change that. Just add a space after “more” and add whatever text you want. Lets try adding “View More”. (<!–more View More→)

Make sure you click the update button. To view it, you need to log out again. In your browser’s address window delete everything after your web address, then add a forward slash and the word “blog” to the end of it and hit enter on your keypad. Scroll down again and you should see the “View More” as a link.  If you click the link it will extend your content to its full length.

WordPress Posts Gutenberg

Next, I need you to log back into your WordPress Dashboard. Then open your post back up and make sure you have the “Visual” tab selected this time.

Go to the 12th paragraph, highlight the entire paragraph and then select the Numbered List icon. You will see one number in front of the first sentence. Click your cursor in front of each sentence hitting enter on your keypad. This will produce consecutive numbers each time.  

Finally, if you want to change the color of any text, just highlight the text you want to change and click the text color icon. Don’t forget to click update button.

This tutorial should have got you a little familiar with the WordPress Classic Editor and working with a post. The more time you can spend with it the better you will get using it.

Check out our WordPress Beginner Tutorials Series on YouTube. 

To read Part 1: https://webstop.net/wordpress-posts-classic-editor-1

Have a Great Day!

Drew & The WebStop.net Crew

Leave a Reply