{"id":107705,"date":"2018-03-28T00:00:00","date_gmt":"2018-03-27T13:00:00","guid":{"rendered":"https:\/\/problogger.com\/?p=107705"},"modified":"2019-08-06T10:45:47","modified_gmt":"2019-08-06T00:45:47","slug":"wordpress-wysiwyg-tutorial","status":"publish","type":"post","link":"https:\/\/problogger.com\/wordpress-wysiwyg-tutorial\/","title":{"rendered":"How to Use the WordPress WYSIWYG Toolbar to Format Your Blog Posts Like a Pro"},"content":{"rendered":"

\"WordPressAre you using WordPress\u2019 formatting features to their fullest?<\/p>\n

I expect you already know the basics of formatting your blog posts to make them more readable. (If you\u2019re just getting started, you might want to check out 4 WordPress Formatting Tips to Make Your Posts More Readable<\/a><\/span>\u00a0for an overview of the basics.)<\/p>\n

But many bloggers <\/span>\u2013<\/span>\u00a0even experienced ones <\/span>\u2013<\/span>\u00a0don\u2019t realise just how many formatting features are built into WordPress.<\/span><\/p>\n

Understanding the WordPress WYSIWYG Editor<\/h2>\n

Whether you write your drafts in the WordPress editor or elsewhere, it\u2019s important to be familiar with the WordPress WYSIWYG toolbar and know what all those buttons do.<\/p>\n

WYSIWYG (pronounced \u201cwizzy-wig\u201d) stands for \u201cWhat You See Is What You Get\u201d, and describes any interface where you can see how your text will actually look as you apply various types of formatting to it. Microsoft Word, Google Docs and WordPress are all WYSIWYG editors.<\/p>\n

Whenever you create a new post or page in WordPress, you should see the WYSIWYG editor. The toolbar (the buttons along the top) looks like this:<\/p>\n

\"How<\/p>\n

(If you don\u2019t see these buttons, make sure you\u2019re using the \u201cVisual\u201d rather than the \u201cText\u201d version of the editor. You can swap between the two using the tabs on the right-hand side of the box where you write your post.)<\/span><\/p>\n

If you\u2019ve written and formatted your post in another WYSIWYG editor and copied the text into WordPress, some of the formatting may have been preserved. But some formatting options, such as blockquotes and horizontal rules, can only be applied in WordPress.<\/p>\n

(Don\u2019t worry if you have no idea what \u201cblockquotes\u201d and \u201chorizontal rules\u201d are. You\u2019ll know all about them, and how to use, them by the end of this post!)<\/p>\n

Even if some of the buttons look confusing right now, they\u2019re all straightforward to use. We\u2019ll take the toolbar one row at a time.<\/p>\n

The Top Row of the Toolbar: The Most Common Formatting Options<\/h2>\n

The buttons are divided into two rows. The top row contains the options you\u2019re likely to use most frequently.<\/p>\n

Here they are:<\/p>\n

\"How<\/p>\n

We\u2019ll go through them one by one:<\/p>\n

#1: \u201cParagraph\u201d Dropdown<\/h3>\n

\"How<\/p>\n

HTML tag equivalent:<\/span>\u00a0<h1>, <h2>, <h3>, etc. and <pre>.<\/span><\/p>\n

This dropdown menu lets you format your text using heading styles:<\/p>\n

\"How<\/p>\n

Heading 1 is used for the title of your post, and so should be avoided for subheadings within your post.<\/p>\n

Most bloggers use Heading 2 for their main subheadings and Heading 3 for any subheadings nested beneath those. (In this post, for instance, the subheading The Top Row of Buttons: The Most Common Formatting Options <\/span>is Heading 2, and the subheading #1: \u201cParagraph Dropdown\u201d<\/span>\u00a0is Heading 3.)<\/p>\n

The \u201cPreformatted\u201d option can be used if you\u2019re including sections of code in your post. it will display the text exactly as written using a monospaced font.<\/p>\n

#2: Bold Text<\/h3>\n

\"How<\/p>\n

HTML tag equivalent:<\/span>\u00a0<strong><\/span><\/p>\n

The button that looks like a B<\/span>\u00a0is probably familiar to you from Microsoft Word and other programs. It makes your text bold like this<\/span>.<\/p>\n

To use it, you can either:<\/p>\n