Creating and formatting your first post with the content editor toolbar

- [Instructor] Now it's time to start creating your first real post, and that process always begins with adding a title. Any time you create a new post or page always begin with a title, even if it's just a working title, to avoid confusion. That way you don't have to sift through posts without titles or posts titled Untitled later on. From here on forward, I'll be building out my site using content from my fictitious company H+ Sport, and I want you to follow along with your own content. That way, you'll know how to use WordPress in the context of your own style of content and find your own preferred ways of doing things.

Before I continue, I'm going to toggle on the Distraction-free writing mode so we only see the title and the content field and are not distracted by all the other stuff that's happening in our view. I'll start out my post by adding my title, H+ Sport, Vision Come to Life. And then I can start writing content in the content editor. Because WordPress works like a word processing application, you can write your posts directly into the interface, if you want to. Thanks to the auto-save features, you're unlikely to lose anything if your computer runs out of battery or gets disconnected from the web.

If on the other hand, you like to write content in another application, either on your computer or online, you can do so as well. I typically write short articles and tutorials directly in the content editor and larger pieces in Google Docs so I can get others to help me with editing before it goes live. How you want to work is entirely up to you. Like I said, the content editor in WordPress works much like a typical word processing application. This is because just like in a regular word processor, to get your text and content to display the way you want you have to apply styling to it, and that styling has to work with the medium you're working in which in our case is the web.

Now that we have some content, let's take a look at the available tools in this WYSIWYG Editor. With WordPress 4.7, the editor toolbar has been updated to prioritize the most used and most important features and a couple of rarely-used features have been removed. So, if you used WordPress before December 2016, you may want to take a closer look at the new toolbar and where all your favorite features are. As a bonus, this new and improved toolbar gives you keyboard shortcut hints for Mac, Windows and Linux any time you hover over a button that has keyboard shortcuts.

If you do a lot of editing work, this may turn out to be one of the most important new features in this update. And just a side note, this course was originally recorded with an earlier version of WordPress, and since the WYSIWYG toolbar change is cosmetic more than functional, I've chosen not to update every other movie. As a result, as you move forward in the course, you'll see the old toolbar on my screen. This has no impact on your ability to follow along, and all the features discussed in this course are still available in the toolbar. Now, let's return to our regularly scheduled programming.

By default, the content editor toolbar has one row of tool buttons, but there's a second row of buttons available, if you click on the toolbar toggle at the far right. As far as I'm concerned, you should always have the second row open so we have access to all the features all the time. The first button I want to show you is on the second row and it's the one you'll use every time you want to copy and paste content into WordPress. whether it's from the web, or from a document, or from somewhere else. The button in question is this clipboard here that triggers the Paste as text function.

Click Paste as text and the contents will now be pasted in as plain text until you toggle this option off. Now I can go to any document I've created before or any website, copy the content from that document, and paste it in without having to worry about styling being carried over in the process and corrupting my page. As an example, I have a document in Google Drive that I want to publish on my post. It has the same title as my post and as you see, there's some styling here, I have some bolded text, and some italicized text, and there's a quote, and then there's some headings.

When I copy this from Google Drive to WordPress, I need to strip off all this styling, because this styling is for Google Drive, not for my WordPress site, and that's exactly what Paste as text does. So, in the Drive document, I'll copy all the content except for the title, 'cause I already have the title. Control or Command + C to copy. Then jump back to WordPress. Make sure that Paste as text is currently checked, it is. Then I'll take away the content I've just typed in, 'cause I don't need it anymore, and just paste in the content from Google Drive.

Now that I have just the text from the Drive document in my post I can turn Paste as text off and begin bringing the formatting back in, starting with the headings. In particular, any time I have a heading, so like down here for instance 5K to H+, you'll see it's currently jammed up against the next paragraph and that won't work very well. So for each heading, I need to go to the end of the heading section, hit delete once and then hit return to give it its own paragraph line.

Any time you paste content from a document into WordPress, you should always do this with all headings to ensure that everything is properly separated. By the end, you should see that each heading sits on its own separate line with nice and ample space above and below, meaning it's its own separate element. With the headings separated, I can now assign the correct heading levels to each of the headings in my article. I do this by placing my cursor on the heading and then using the drop-down here at the top of the toolbar where I can select what heading level I want.

Now I know this may sound strange but when you add headings to a post or page, always start with Heading 2. That's because Heading 1 is already reserved and used by the title of the post or page and you only want one main heading per page. So, start with Heading 2 and use the others when appropriate to create a proper hierarchical heading structure. This first heading in my article is a Heading 2 because it's the main heading in the article. When I scroll down, you'll see I have a second heading and this is actually a subheading under this one.

so under 5K to H+, and that means I need to set that one to Heading 3. As you create posts and pages on WordPress, it's important to use this heading structure properly to create hierarchies within your content. That means all your main headings are going to be Heading 2 and if you have any subheadings under those, they are going to be Heading 3, 4, 5 or 6. So the content hierarchy is preserved and people who use text to speech browsers or other accessibility tools can navigate the content. With my heading structure in place, let's look at some other features in the toolbar.

Looking back at my main article, you'll see that some of the text here is either bold or italicized. You see here H+ Sport is bold and Henry Twill is italicized. I also have this quote down here, which is supposed to look somewhat different. Now I want to apply that same styling to my document inside WordPress. I'll start by finding the text I want to be bold, it's right here the top, H+ Sport, and to bold it, I can now either highlight it and click on the Bold button in the toolbar, or I can simply use Command or Control + B to toggle bold on and off.

Same thing with italicized. Highlight the text you want italicized and click the Italicize button or use Control or Command + I to toggle this button on and off. Now, in addition to Bold and Italicize, there's also a third option found on the second row over here on the very left hand side called Strikethrough, which is kind of neat. If you write an article or a page or anything else, and later you want to change something that was in it, but you want to keep the original text in a way that clearly shows that it's been edited, you can highlight whatever text you want to change, let's say this, to provide a strong basis, and then click Strikethrough and a line will show up striking through the text, showing that the text has been edited out, but not deleted.

This is a great feature to avoid rewriting history. But I digress. Next on the toolbar, after italicized, we have Bullet list and Numbered list, or unordered list and ordered list. These are used to create lists in your content. Let's say I want to create a Bullet list with some items. I first create a new paragraph by hitting return where I want the list to appear, then I click the Bullet list button, a bullet appears, and I can type in, item one, hit return, item two, return, item three.

And when I want to break out of my Bullet list, I hit return twice. The first time I make a new bullet item, the second time I break out of the list and start a paragraph instead. Creating a Numbered list is done the exact same way. Select Numbered list, here's number one, and type out. And to break out, you hit return twice. Now if you think clicking on these buttons in the toolbar is a little bit clunky, there're actually shorthands for both of these types of lists. If you want to create a Bullet list, simply start a paragraph with a dash and then a space and a bullet automatically appears.

Same with Numbered lists, if you start with one and a punctuation mark and a space, you automatically create Numbered list starting at the number one. If you've already created a list, let's say a Bullet list, and you want it to be a Numbered list, you can click on any of the items within that list and just switch from Bullet list to Numbered list, and you can see now that not only does that change the list into a Numbered list, but because WordPress recognized that there's already a numbered list underneath, it merged the two together. If you want to separate them again, you go where you want to separate them, so in this case, item number three, and hit return twice and that creates a separation between the two lists.

Next on my toolbar, I have this a quotation mark that marks a Block Quote, and you'll remember in my original article, there's a quote that's supposed to look different from the rest of the content. In HTML we have a feature specifically for this purpose and it's this feature hidden under the Quote button called Block Quote. If you place your cursor anywhere within a paragraph and then click the Block Quote button, that text is broken out and made into a Pull Quote within your article. It's styled differently and displayed differently, telling the viewer this text has been pulled out just like in a newspaper article to highlight it.

If you're using a text to speech browser, the Block Quote will also be read differently than the rest of the text to clearly emphasize that this is different from the rest of the text. Now, it's important to note here that the behavior of block quotes changes between themes. So when you change your theme, the appearance of your block quotes will change, but they'll continue being separate from the rest of your content. The next three buttons are for text alignment. Now, technically you can use these three buttons to align your text right, center, or left, however, your theme is already doing this job for you and if you start changing the alignment of content, you often end up with something that looks less than great.

So I urge you to take great care when using these features and make sure you preview any of your changes before committing it to a live post. After alignment, we have the two Link buttons, which we'll talk about in a later movie. So we'll ignore them for now. And next is the Insert Read More tag button, which allows us to add what's known as a More tag within the content. Let me quickly show you how that works. If I publish this post for a second, and then jump to the front page of my site, you'll see here we have the complete post with all my content.

Now, this post is not very long, so this is fine, but you can imagine if I had a post that was say, 5000 words or 10000 words, having that on the front page in a blog would be really annoying, 'cause then you would have to scroll past this enormous post to get to the next one. That's where the Read More tag comes in. If I go into my post and find a decent place to break my post in half, let's say directly after this block quote here, I can click the Insert Read More tag button, and then update my post and when I go to the front page and reload it, you'll see in place of the entire post, I get this Continue reading link.

And when I click the Continue reading link, I'm taken to the full post for the entire article, and navigated directly to where the Insert Read More link was. So in effect, the Insert Read More tag button allows us to insert the natural break point in the article where we want to separate the top of the article, which is displayed in index pages from the remainder of the article, which is only displayed when you go to the post itself. Now, this feature has one caveat. Sometimes, it's a little hard to get rid of once you've added it into a post.

So, if you're in the WYSIWYG editor, and you can't delete it, for whatever reason, try going over to the text editor, here you'll see the More tag, it looks like this, bracket, !--more-- end bracket, and to remove it, simply remove that tag, and go back to visual. Yes, that is a little clunky, but to be honest, that is the simplest way of getting rid of the More tag once you've added it. The last button on the first row is the toolbar toggle, which opens the second row, as you've seen before. So let's move on to the second row.

Here on the second row, we start with the Strikethrough, which I've already mentioned, and then we have this button called Horizontal line. If you go to a new line in your page, let's see, down here, and click this button, you get a line. And that's exactly what this button does. It adds a horizontal line in your content. Now this line will be styled differently, depending on the theme you're using, but it's main function is to show in the markup that there is a separation between the stuff that went before the line, and the stuff that comes after.

It's not a feature that's common in use, and the reason is, this is literally separating your content inside your post between what goes before and what goes after the link. So, in some cases, it's useful, but in most cases, it's not. But when you need it, you'll know you need it, and now you know how to add it. After Horizontal line, we have Text color, works exactly the same as Bold and Italicize. Simply highlight some text, pick a color, so let's say this hideous orange here, and the text turns orange. This feature works fine across all themes, but I would recommend being very careful about using it, because sometimes the text color you pick might match other colors that are used in the theme, maybe link colors or something else, and it might end up being confusing for the end user.

So, use it, but use it sparingly. We already talked about Paste as text in the very beginning of this movie and the next button actually bookends the Text color button very well. This button looks like an eraser, and that's precisely how it works. If you highlight some content that has been styled in some way and then click on the Eraser button, you take away the formatting. So you see the orange text became not-orange text. And if I highlight the content over here, where we have both bold H+ Sport, and the italicized Henry Twill, and then click Clear formatting, formatting goes away.

So this is a simple way of removing formatting if you've accidentally applied it. Now, if you do this by accident, and you want to return to the way things were, you can use the third to the last button on the second row, Undo, and this will bring back the features you just removed. Under the Omega symbol hides the tool that James Williamson has said is the most important tool in any kind of editor. Click it and you'll get a modal pop-up with special characters where you can pick and insert any kind of special character you don't have on your keyboard, a pi symbol, or a Mu, or maybe a Norwegian ah, or uh, or aw, or any of the number of other icons that are available.

It's one of those things you don't know you need until you need it, like if you're writing an article and you need to talk about the current temperature and you want to add a degree sign. Or you're in need of a financial symbol like per mil, or a yen, or a pound, or an Euro, or maybe you're just writing an article about your latest Bridge tournament, and you need the jackets and suits of a card deck. Next to special characters, we have two indentation buttons, Decrease indent, and Increase indent. Now, I find these most useful when you're working with nested lists.

So, let's say I have a list here. Let's make a paragraph, and then make a list. And I want these subitems to be a subitem of item three. In that case, I would select the item, and then click on Increase indent on that item. And you can see it now shifts in underneath item three. I can do the same with the second one here, and I can also indent them so that they become three nested items. Now, once they're indented, I can of course, decrease the indent the same way, and maybe highlight two of them and decrease the indent, and this way I can manage nested lists properly.

Now, here's the thing. These features work very well for nested lists. However, while it may be tempting to use indentation for layout, I recommend you do this sparingly, if at all, as it may crash with the theme and create confusing user experiences. If you do indent something, make sure to preview your post or page on the front end to ensure everything looks decent before hitting Publish. Now I've already mentioned these two next buttons once, but they deserve repeating. To round things off, we have Undo, and Redo, which can be controlled with either Control Command + Zed for Undo, or Control Command + Y for Redo.

These are the, whoops, my micro pig just rolled over my keyboard and made huge changes and deleted everything buttons. And you can use them liberally to avoid any frustration. Finally, if you click on the Question mark, you get a full breakdown of all the available keyboard shortcuts and the many hidden short codes in the editor. Knowing all of these shortcuts will make writing and editing content without a mouse a breeze. Once you've finished styling your content in the WYSIWYG editor, you can take a peek behind the curtain by switching to Text view.

This gives you the actual raw code the browser uses to format and style your content. For every piece of content you've styled, the browser sees a tag. So for instance, this H+ Sport, which is bold, on the visual side has the tag strong wrapped around it on the code end, for italicized content, we have an em and an end em wrapped around, and the same thing for Block Quote, blockquote, and end blockquote. When you start looking through this code, you'll see that every single thing that you've added on the visual side has a tag.

Here we have headings h2 and h3, and the line which separated the content is an hr with a forward slash at the end. Once they're more familiar with all these tags, some content creators actually prefer to write content for WordPress in this text editor. But personally, I like the visual editor, especially if my theme has styling that matches on the back end and the front end because it just makes it easier to understand where my content are and it makes it much easier when you start adding images and other media elements to your posts and want to align them.

Once all your content is styled to your liking, move your mouse out of the editor field to see all the other panels, and then go to the Publish field, and click on Preview. This will open a Preview of your post on the front end, that only you can see, and here, you'll see the content styled the way you set it up. Here I have the title, my main content with bold and italicized text, we have that orange text I added in, there's a block quote, subheading, and a sub-subheading, and even that horizontal line. Now I can check to make sure all my styling is correct and if it's not I can simply return to my post and make the changes as required.

The great thing about this Preview is that it's a preview that's only happening in your browser, you're the only one who can see it and no one else can gain access to this post unless you publish it. So now you know how to create your post and style the content within that post using the content editor toolbar.