How To Use The WordPress Quick Edit Feature

Learn how to use the WordPress Quick Edit feature to edit information about your WordPress posts and pages.

Learn To Use WPPages and Posts in WordPress not only include content but also information and settings about the post or page itself.

For example:

  • Post/Page Title
  • Slug (i.e. the words make up the post/page URL)
  • Date your page or post was published.
  • Page/Post Author
  • Post/Page Status (e.g. Draft, Pending Review, Published, etc.)
  • Page/Post Privacy Settings (e.g. Private)
  • Categories and Tags (Posts)
  • And various other settings

If you want to change the above settings for a post or page without making the changes to the content, you can simply use the Quick Edit function.

In this tutorial, you will learn how to use the inline editor (Quick Edit) in WordPress to edit various elements of Pages and Posts.

Info

For step-by-step tutorials about how to edit and delete posts and pages, go here:

How To Use The Quick Edit Function

Follow the step-by-step tutorials below to learn how to use the inline editor feature of WordPress to edit your pages and posts.

Editing WordPress Post Details With The WordPress Inline Editor

Log into your Dashboard and click on Posts > All Posts

Posts Menu - All Posts

(Posts – All Posts)

This brings up the Posts screen, which displays all your WordPress posts …

Table Of Posts

(WP Posts Screen)

Search for the item you would like to edit, then hover your mouse over the post title to display the options menu and click on Quick Edit

Click on 'Quick Edit'

(Click on the ‘Quick Edit’ link)

The inline editor displays various options …

Inline Editor screen

(Quick Edit – options)

The  inline editor section lets you modify a number of settings:

Post Settings

(WordPress Post Options)

Plus …

WordPress Post Settings - Quick Edit Screen

(WordPress Post Settings – Quick Edit)

Quick Edit Screen – WordPress Post Settings

[1] Title – Use this option to replace your post titles.

[2] Slug – Change the post slug. Important: When editing post slugs, make sure to include only lowercase letters, use “a-z” and “0-9” only, and separate words with a hyphen (e.g. “here-is-an-example-of-a-post-url”). For more information about using this option to improve your post SEO, see this tutorial: Configuring Your WordPress Permalinks

[3] Date – Edit the date and time of your post here. Note: Use this section to schedule your post to publish at a future date. For more information about this setting, see this step-by-step tutorial: How To Schedule WordPress Posts

[4] Author – If your site includes multiple post authors, use this function to assign another author to your select post. Note: If your website or blog only contains one post author, this option will not be displayed. For more information on how to change post authors, go here: How To Change Post Authors In WordPress

[5] Password -OR- Private – Use this section to password-protect posts or make them private (hidden from visitors). For a detailed step-by-step tutorial on how to protect content in WordPress, go here: Password-Protecting Content On Pages And Posts

[6] Cancel Button – Click this button to cancel the edit and leave your changes unsaved.

[7] Categories – This section lets you change your post categories. Note: You can add and change post categories in this section, but you cannot delete a post category using the inline editor. For a tutorial on how to add, edit, and delete post categories, go here: How To Set Up Categories In WP Posts

[8] Tags – Use this field to specify a new tag for your posts. Note: You can edit and add new tags in this section, but you cannot delete tags for your posts using Quick Edit. To learn how to add, edit, and delete tags, see this step-by-step tutorial: How To Configure Tags In WordPress Posts

[9] Allow Comments / Allow Pings – Check or uncheck the boxes in this area to allow/disallow pings and comments for your posts. For more information about using this feature to protect content in WordPress posts, see this step-by-step tutorial: WordPress Setup – Discussion Settings

[10] Status – Use the dropdown menu to edit the Status of your Post.

Inline editor - Status options

(Quick Edit – Post status pulldown menu)

[11] Make this post sticky – Check/uncheck the boxes in this section to make a post ‘sticky’. For more information about the practical uses of this setting, see this tutorial:

[12] Update Button – Clicking this button saves the edit.

Click the 'Cancel' button to cancel and exit the Quick Edit screen or click the 'Update' button after making changes to save your new post settings

(Click the ‘Update’ button after making changes to save your new post settings)

Bulk Editing WordPress Post Settings Using The Quick Edit Feature

As well as making changes to individual posts, you can also bulk edit posts using the Quick Edit feature.

To make bulk changes to posts using the Quick Edit function, tick the check boxes next to the posts you want to edit, then choose ‘Edit’ from the ‘Bulk Actions’ drop-down menu and click Apply

Table of Posts - Bulk editing posts

(Bulk editing posts in WordPress)

The Bulk editor displays all your editing options …

Bulk editor - Post editing options

(Bulk Edit – Post editing options)

Most of the settings are identical to those shown in the regular Quick Edit screen with some differences.

For example, depending on the theme you are using, you may see an option called Format. Use the drop-down menu to change the format of your post (options: Standard, Aside, Gallery, Link, Image, Quote, or Status.)

Bulk Editor - Post Formats

(Bulk editor – Format Options)

For a detailed step-by-step tutorial about WordPress post formats, go here:

You can also remove a specific post entry from the bulk editor by clicking on the remove icon next to the post title …

Removing posts from the bulk editor

(Removing specific items from Bulk Edit)

Now that we’ve looked at using the Quick Edit feature with posts, let’s take a look at using the inline editor with WordPress pages.

Editing Pages With The Inline Editor

Since Posts differ from Pages (to learn more about the differences, go here), the inline editor displays a few different options when you’re working with Pages.

Log into your WordPress dashboard, then go to the admin navigation menu and choose select Pages > All Pages

Pages - All Pages

(Pages – All Pages)

The Pages screen will appear, displaying all the pages you have created …

Pages Screen

(Table Of Pages)

In the Pages area, find the page entry you would like to edit, hover over the title of the page to display the options menu and click on the ‘Quick Edit’ link …

'Quick Edit' feature

(Click on the ‘Quick Edit’ link)

The Quick Edit inline editor expands and displays all the options for editing your page …

Inline editor screen

(Quick Edit – Page editing options)

The  Quick Edit section lets you change the following information about your page:

Page Settings

(Quick Edit Screen – Page Settings)

And …

Quick Edit Screen - WordPress Page Options

(Quick Edit – WordPress Page Options)

[1] Title – Modify the title of your page here.

[2] Slug – Use this field to replace your page slugs. Important: When editing page slugs, type all letters in lowercase (use “a-z” and “0-9” only) and separate all with a hyphen (e.g. this-is-a-page-url).

[3] Date – This field lets you edit the page date and time. Note: You can schedule your page to be published at a later date in this section.

[4] Author – If your site allows multiple authors, use the Author drop-down menu to assign another author to your select page. Note: If your website or blog only contains a single author, this setting will not be displayed.

[5] Password -OR- Private – Use this section to password-protect your pages or make them private (hidden from visitors).

[6] Cancel Button – Click ‘Cancel’ to abandon your edit.

[7] Parent – Use the pulldown menu to specify whether your page is a ‘main’ page (displays at the top level) or a ‘child’ page (i.e. a subpage – see image below)  …

In WordPress, main pages and nested pages can also be referred to as 'parent' pages and 'child' pages

(In WordPress, top-level pages and subpages can also be referred to as ‘parent’ pages and ‘child’ pages)

[8] Order – This option is useful for rearranging the order of your page in page lists, menus, etc. Type a number into this field. For example, assigning a page a value of “1” will display it before pages with a higher number (e.g. ”2”, “11”, etc.).

[9] Template – If your theme provides a number of page templates, you can change the template of your page by selecting a new one using the drop-down menu in this section.

Quick Edit - Template pulldown menu

(Inline editor – Page template function)

[10] Allow Comments – Check / uncheck the box in this section to allow/disallow comments on your Page. (See How To Configure Your WordPress Site Settings: Discussion Settings tutorial for more details)

[11] Status – Use the dropdown menu to change the Status of your Page to Published, Pending Review, etc.

Status pull-down menu

(Quick Edit – Status options)

[12] Update Button – Clicking ‘Update’ saves your edit and updates your page settings.

Click the 'Update' button after making changes to save your new page settings

(Click the ‘Cancel’ button to cancel and leave the Quick Edit area or click ‘Update’ after making changes to save your new page settings)

Bulk Edit WordPress Pages Using The Inline Editor

As well as making changes to individual pages, you can also bulk edit pages using the inline editor.

To bulk edit pages, select the check boxes next to the items you want to edit, then choose ‘Edit’ from the ‘Bulk Actions’ drop-down menu and click Apply

Bulk edit pages in WordPress

(Bulk edit WP pages)

The Bulk Edit feature presents several bulk editing options …

Inline editor - Page editing options

(Bulk Edit – options)

Most of the settings are identical to those listed in the Quick Edit screen with some additional settings.

For example, the Comments feature changes from a checkbox to a pulldown menu …

Bulk editor - Comments menu

(Comments menu)

Make changes to your page settings in the Bulk Edit screen by selecting options from the pull-down menus …

Bulk editor settings

(Bulk editor options)

You can also remove a specific entry from the bulk editor function by clicking on the delete icon …

Removing specific entries from the bulk editor

(Remove from the bulk editor)

Quick Edit Plugins

As well as the inline editor’s core options, you can also customize the Quick editor and Bulk editor using plugins, like the one shown below:

Custom Bulk/Quick Edit

Custom Bulk/Quick Edit

(Custom Bulk/Quick Edit Plugin For WordPress)

Download the plugin here, or install the plugin inside your WordPress dashboard (search for keywords like “Quick Edit, Bulk Edit, etc.”) …

Locate and install 'Custom Bulk/Quick Edit'

(Find and install the ‘Custom Bulk/Quick Edit’ plugin)

Once the plugin has been installed and activated, configure the plugin settings …

Custom Bulk/Quick Edit plugin - Settings

(Configure your Custom Bulk/Quick Edit plugin settings)

Configure the plugin’s settings to add custom options to pages and posts …

Custom Bulk/Quick Edit Settings

(Configure the plugin settings)

After configuring the plugin’s options, you should see new fields appear in the Bulk/Quick editor screen …

Bulk Editor - Custom Edit Fields

(Bulk Editor – Custom Edit Fields)

For more details, go here}:

Congratulations! Now you know how to use the WordPress Quick Edit to quickly edit posts and pages.

The Inline Editor Of WordPress

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com

***

How To Use The WordPress Visual Content Editor

This tutorial shows you how to use the WordPress Visual Content Editor – what the menu items do, how to format text, plus useful tips and information on how to get the most out of the WordPress content editor.

A Beginner's Guide To Formatting Content In WordPress - Using The WP Editor*** Important ***

WordPress introduced a new content editor in version 5.0 called Gutenberg.

For tutorials on how to use the new Gutenberg content editor, go here:

***

WordPress makes it easy to publish and format content online by providing users with a fully-featured visual editor that requires no knowledge or coding experience to create professional-looking web pages with formatted text and embedded images quickly.

In this comprehensive tutorial, you will learn how to use the WordPress Visual Editor.

A Simple Guide To Content Formatting In WordPress For Beginners

WordPress provides a built-in semi-WYSIWYG (What-You-See-Is-What-You-Get) editor for creating and editing your posts and pages …

WordPress editor

(WordPress content editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

If you have used a text editor like MS Word, then the WordPress content editing interface will probably seem quite familiar to you …

WordPress Visual Editor Menu Buttons

(WordPress Visual Editor Menu Buttons)

Below is a brief description of each of the visual editor menu items shown in the screenshot above:

1. Post Title Field – Enter your Post/Page title here.

2. Permalink – Click on the “Edit” button to change your post/page permalink. This feature is useful if you want to change your post or page URL.

3. Media Manager – Click the Add Media button to upload, manage and insert pictures, videos, audio, etc. into your post/page from your computer, an external URL, or from your site’s media library.

4. Visual Content Editor Tab – Clicking this tab lets you access the WYSIWYG (What You See Is What You Get) editor.

5. Text Tab – Clicking this tab lets you work with your content’s HTML code. When adding content using the text tab, WordPress automatically converts line breaks into paragraphs …

WP Text Editor Mode

(Text [HTML] Editor Tab)

6. Bold – Highlight words in your text and click this button to add bold formatting.

7. Italics – Highlight words in your text and click this button to add italicized formatting.

8. Strikethrough – Formats your selected text with strikethrough.

9. Unordered list – Select this option to turn your selected text into an unordered list like the example below:

  • List item 1
  • List item 2
  • List item 3
  • etc …

10. Ordered list – Use this feature to turn your content into an ordered list like the example below:

  1. List item 1
  2. List item 2
  3. List item 3
  4. etc …

11. Block Quote. Select this menu button to create a block quote. Just select the content you would like displayed as a block quote and click this button.

To exit the blockquote press the “Enter” key to create a line of space and then click the block quote button again and this will return your text to normal.

12. Dividing Line. Select this item to add dividers to your content …

Insert dividing lines into your content

(Add horizontal lines to your content)

13, 14 & 15. Alignment buttons – Click these buttons to align content elements …

13. Align Left

14. Align Center

15. Align Right

Press the “Enter” key and leave a line of space to end your alignment formatting.

16. Insert/Edit Link. Use this button to paste hyperlinks into your content (See “Inserting Hyperlinks Into WordPress” tutorial to learn more about using the hyperlink function).

17. Unlink. Highlight content you want to be unlinked and click this button to remove the hyperlink.

18. Read More Tag. This feature inserts a “read more” tag wherever you have placed your cursor. Text added to a post prior to the insertion of this tag will display when published, but content added to the post after this tag will only appear to site visitors once they click on the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Useful Info

The ‘Read More’ tag doesn’t work on WordPress Pages. It is only used on the page showing your latest post entries (i.e. the Blog Page).

19. Toolbar Toggle. Clicking this button toggles the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Enhanced Menu Toolbar

(Display/Hide Enhanced Menu)

20. Distraction-Free Writing. Click this item to toggle between distraction-free writing functionality & normal writing screen. This is a handy feature for checking the placement of items on the page and for working on your content without distracting page elements …

Distraction-Free Writing Functionality Button

(Distraction-Free Writing Mode Toggle)

With distraction-free writing mode enabled, the page elements return to the screen when you move the mouse cursor outside of the content editor box.

Refer to the “Tips” section further below for more details about using this item.

21. Format Style. Use this feature to format text.

Notes:

  • The style pull-down menu may include default heading formats and other pre-defined styles built into your theme.
  • When you create a new post or page and start entering text into the content area, your text will typically be formatted using the “Paragraph” style by default.
  • Modifying content formatting styles typically require having knowledge of how to edit CSS (Cascading Style Sheets).

To add a heading style to your content, highlight your text and select a format style from the pull menu (e.g. Heading 4) …

Heading Options

(Heading Styles Dropdown Menu)

22. Underline. Select content and click this button to add underline formatting.

23. Justify. Clicking this button will justify a paragraph where your mouse cursor has been placed or text highlighted. Justification can only be applied to a block of text.

24. Text Color. Highlight text and select a color from the drop-down palette to replace text color …

Text Color Palette

(Text Color Palette)

Important

You can add new colors to the color palette by clicking on the Custom area …

Custom Color Palette

(Custom Color Palette)

This gives you access to an almost limitless palette of colors. If you are familiar with the Hexadecimal (HEX) color system, you can just type in the code for the specific color you want into the # field. Otherwise, click in the color box, enter RGB values or use the slider to add a custom color.

The table below shows the HEX color values for some of the most commonly used “web safe” colors (i.e. colors that display accurately across most browsers) …

HEX Colors [Web-Safe]

(HEX Color Codes [Web-Safe])

25. Paste as Plain Text. Click the button marked with a “T” to paste the content of your clipboard into your content editor area as plain text …

Plain Text On/Off Mode

(Plain Text On/Off)

See the “Tips” section in this tutorial for useful details on using this function.

26. Clear formatting. Use this feature to clear all content formatting if you find strange codes in your text (or if your content isn’t displaying as you intended after your post or page has been published).

27. Insert special symbols. Click this button to add symbols like © ® ™ and custom characters and symbols to your content.

Special character table

(Add symbols and custom characters to your content)

For more information on adding special characters to WordPress, refer to this tutorial:

28. Decrease Indent – Click this item to decrease indented text.

29. Increase Indent – Click this button to shift text to the left.

Here’s a line of indented text.

To keep indenting text, press the Indent button more than once.

30. Undo. Click this button to undo your previous actions. This is useful if you accidentally delete a section of text, or format content incorrectly and need to revert to a previous state.

31. Redo. Click this button to recover a change or deletion that you have undone.

32. Keyboard Shortcuts. Click this button to see the Keyboard Shortcuts feature. This is covered in more detail in the Tips section further below.

Idea

After installing new WordPress plugins you may see extra items added to the WordPress content editor menu …

Plugins can add extra items to the toolbar

(Plugins can add new buttons to your editor)

Important

Underline And Justify Buttons Removed From The Editor In WordPress 4.7

The WordPress development team has removed the Underline and Justify buttons from the visual editor in version 4.7, as it was felt that underlining text can confuse readers who may interpret it as a hyperlink and the justify button was removed because most web browsers that render CSS and HTML lack sophisticated page layout functions to adjust the gaps left in words by justification and can make text less readable.

Underline And Justify Buttons Removed From The Editor In WordPress 4.7

(Underline And Justify Buttons Removed From The Editor In WordPress 4.7)

Although the buttons have been removed from the toolbar, you can still use the keyboard shortcuts for both buttons (see below).

Useful Tips

Tip #1 - Keyboard Shortcuts For Power Users

As well as using the buttons in your content editor toolbar, you can use the key combinations below as you type. This will help you get work done faster …

WordPress Content Editor Power User Shortcuts

(Content Editor - Keyboard Shortcuts)

Additional Formatting Shortcuts

Prior to the release of version 4.5, WordPress introduced formatting shortcuts for lists and headings. In WP v. 4.5 you can now also use formatting shortcuts for horizontal lines and code …

Formatting Shortcuts

(Formatting Shortcuts)

Add three horizontal dashes to insert a horizontal line and enclose your text in backticks to turn it into <code> …

WordPress 4.5 : Formatting Shortcuts - Backticks

(Formatting Shortcuts – Backticks)

The formatting shortcuts for horizontal lines and code are shown below …

WP v. 4.5 - Formatting Shortcuts

(WP 4.5 – Formatting Shortcuts)

To learn how to enhance the WordPress visual editor with additional formatting features, see the tutorial below:

Tip #2 – Pasting Content From MS Word

MS Word and some other text editors (e.g. Open Office) store code that is not directly visible when copying text from a document into the clipboard.

If you’re using an earlier version of WordPress than version 3.9, pasting content directly from Microsoft Word into the content editor will add a bunch of messy code …

Pasting content from word processing applications into pre-WP 3.9 versions can add unwanted formatting to your content.

(Pasting content from word processors into pre-WP 3.9 versions can add unwanted formatting to your content.)

This is a great example of how WordPress continually improves its software, so that more of the “magic” required to integrate content from different platforms seamlessly will take place invisibly behind the scenes, freeing up more non-technical minded users to enjoy the benefits of using their WordPress sites.

WordPress now lets you paste content directly from Microsoft Word and other word processors. If the source content has heavy formatting and is not pasting cleanly, however, then try pasting it in using the Paste as text button and format it afterwards.

Select the Paste as text menu button …

WordPress Visual Editor - Paste as text button

(Paste as text button)

When you toggle on the Paste as text feature, the following notification displays …

Paste as Text popup message

(Paste as Text message)

Tip #3 – Using The Clear Formatting Feature

You can paste formatted content and then remove the formatting inside the WordPress Visual editor.

Before …

Before removing formatting

After …

After removing formatting

This is a useful feature if, for example, you have pasted content directly from another website that includes CSS formatting.

Sometimes, you cannot tell whether or not content sourced and pasted from another website or blog contains formatting specific to that site …

Content pasted directly from external websites ...

(Content pasted from an external website …)

… until you see the underlying HTML code …

Content pasted directly from an external website may include unwanted CSS formatting

(… can contain unwanted styles!)

If the content has been sourced from your own website or blog, everything may look fine until you make a change to the styling (e.g. change the color scheme) and some of your earlier posts have a different CSS style.

For this reason, it’s a good idea to remove the formatting from pasted content, especially from content sourced from other WordPress websites or blogs.

To do this, paste your pre-formatted content into the Visual editor …

Paste pre-formatted content into the visual editor

(Paste pre-formatted content into the visual editor)

Next, select all the content and click on the Clear formatting button …

WordPress Visual Editor - Clear formatting button

(WordPress Editor – Clear formatting menu toolbar button)

All your formatting (e.g. bold, italicized text, colors, etc.) has been removed …

Remove formatted text from your text

(Content formatting removed)

Note that some content styling elements will not be removed from your text after applying this button. This includes hyperlinks, headings, blockquotes, etc.

Useful Tip

Here is a quick and useful way to test for content errors that you suspect may be caused by poor formatting tags without losing your original content.

Before using the Clear formatting function, switch to the Text tab, then select and copy everything to the clipboard …

Copying formatted text to the clipboard

(Copying formatted text in WordPress)

Open a new text file, paste the content from your clipboard into it and save, then return to your editor and complete the formatting removal process. Now, if something were to go wrong, at least you have a backup copy with all the original content formatting preserved.

Tip #4 – Adding Single Line Returns To Text

As with most applications, a line return is created by pressing the “Enter” key at the end of your paragraph …

Default line spacing

(Line spacing – default)

When you hit the “Enter” key to add spacing between lines of text, WordPress adds a regular paragraph ending tag (</p>) to your content’s code. To add a line break tag (<br />) and create single line returns, use both the “shift” and “enter” keys …

Line break returns

(Single line spacing)

Breaks allow the formatting of your text to be carried over. This is useful if you want to add a line break to a bulleted section (without creating a new bullet point) or keep the same style going in another text block.

Tip #5 – How To Resize The WordPress Content Editor

By default, all newer versions of WordPress have the Full Height Editor feature enabled, providing users with a responsive and self-adjusting content editor …

WordPress comes with a responsive editor

(WordPress has a built-in responsive editor)

You can easily tell whether the Full Height Editor function is active or not, by looking at either of the  following tell-tale signs:

  • If the Distraction-Free Writing Mode button is visible, then the Full Height Editor function is active,
  • If the content scrollbar is not visible when your text exceeds the size of the text box, then the Full Height Editor function is enabled …

Tell-tale signs that the Full Height Editor feature is enabled

(Tell-tale signs that the Full Height Editor function is turned on)

With the full height editor feature enabled, the WordPress content area should automatically expand to accommodate your writing …

Your content editor box automatically resizes as you type

(The WordPress content editor box should automatically resize as you type)

If the Full Height Editor function is inactive, the content editor scrollbar will appear once your text exceeds the visible space inside your editor …

Full Height Editor function disabled - scrollbar visible

(Full Height Editor feature disabled)

Additionally, you will not see the Distraction-Free Writing menu icon displayed in the Visual Editor …

Full Height Editor feature disabled - Distraction-Free Writing Mode menu button hidden

(Full Height Editor feature disabled)

If your Full Height Editor feature is inactive, you can resize your text box using the text box resizing feature …

Text Box Resizing Feature

(Text Box Resizing Feature)

Simply click and drag the text box to resize the content editor …

Resize your editor using drag and drop

(Drag and drop to resize your editor)

The text box will enlarge to the new size …

Resized content editor

(Resized editor)

Tip #6 – Distraction-Free Writing Functionality – Additional Info

Distraction-Free Writing requires the full-height editor to be enabled in Screen Options (see further below).

You can use Distraction Free Writing with both the Visual and Text editor and switch between the two tabs while working …

Distraction-Free Mode - WordPress Text Editor

(Distraction-Free Writing Mode – Text Editor)

Practical Tip

To completely eliminate all writing distractions try combining Distraction-Free writing with the Full Screen function of browsers like Google Chrome & Firefox …

Distraction-Free Writing - WordPress Only vs WordPress & Full-Screen Web Browser

(Distraction-Free Writing Screens – WordPress Only vs WordPress & Full Screen Web Browser)

With Distraction-Free Writing mode turned on and the Full-Screen option of your browser enabled, your current page will completely fill the screen, leaving you completely free to focus on your content.

To activate the Full Screen feature in your web browser, open your browser options menu and click on the buttons shown below …

Google Chrome & Firefox - Full Screen Feature

(Google Chrome & Firefox – Full Screen Function)

Info

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click on the Screen Options tab …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, enable the full-height editor and distraction free functionality option …

Screen Options - Enable full-height editor and distraction-free features

(Enable full-height editor and distraction-free functionality in your Screen Options)

Tip #7 – Converting Emoticons

One final tip worth mentioning is that you can convert emoticons (e.g. 🙂 ) to graphics by enabling the formatting option inside your Writing Settings (Settings > Writing) area …

Convert Emoticons - Writing Settings

(Writing Settings – Formatting Options)

🙂

Congratulations! Now you know how to use the WordPress visual editor.

The WordPress Visual Editor - A Simple Guide To Text Formatting In WordPress For Beginners

Get Thrive Leads for WordPress

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com

A Basic Guide To HTML For WordPress Users

Learn basic HTML formatting you can use to format content in your posts and pages …

A Beginner's Guide To HTML Formatting Tags For WordPress UsersThe world wide web, your website, your web pages and even your content are all built and driven by a language of code.

It is inevitable, then, that sooner or later, you will probably need something done for your business online, for your web site, or in your web pages that requires having coding skills.

HTML is one of the “code” languages that is used throughout the world wide web, web sites, blog pages and also your content.

You don’t have to learn HTML in order to use WordPress. WordPress has unique features like “themes”, “plugins” and “widgets” that let you manage your website without having to touch code, and a powerful, built-in editor that lets you create and easily format content simply by clicking on a few buttons.

As you will discover below, it’s handy to have a basic knowledge of HTML when creating, editing or formatting content for WordPress. Knowing a little bit of HTML can also save you time and money.

Using HTML In WordPress

You don’t have to learn HTML in order to use WordPress, but having a little familiarity with HTML can be really useful as a WordPress user!

A Practical Guide To HTML – Tutorial

As stated in the introduction, having a basic HTML knowledge is very useful when creating, editing or formatting content on WordPress.

Let’s say that:

  • You would like to adjust certain elements in your existing content, insert a text link and an image to a section of your sidebar, or direct visitors to the contact page, opt-in form, etc. If you understand basic HTML, you can do this very quickly without having to pay somebody else to do this for you.
  • You outsource some content writing to a web copywriter and get back files that contain formatted content. Having a little knowledge of HTML can help you better understand the content before you accept the work.
  • Someone creates your site’s content. You see a couple of mistakes in the text, like a passage that could have been made bold, or a hyperlink that is pointing to an incorrect destination URL. Having a little knowledge of HTML can help you fix simple errors in your pages and posts very quickly without having to go and ask (or pay) a webmaster, a web designer, or someone else to do it for you.
  • You need to discuss new project or requirement with your website designer. Having a little knowledge of HTML not only will help you communicate more effectively with web developers and web designers, it also helps you feel and appear more confident and knowledgeable when presenting ideas or requesting changes to be done on your website.

A Beginner's Guide To HTML For WordPress Users

You don’t need to become a code-loving web developer – just have enough knowledge of HTML to be a “web-smart” business owner!

HTML – A Basic Definition

HTML is an acronym for HyperText Markup Language. According to Wikipedia’s definition of HTML …

HTML is the main markup language for creating web pages and other information that can be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <table>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.

Source: Wikipedia, HTML

Important Info

Important: Like all things online, HTML is subject to change and evolution, and some of these changes will no doubt affect WordPress.

Currently, the latest version of HTML is version 5 (also called HTML5), and this change has introduced a number of new “tags” to remain up-to-date with new advances in software and browser technology. As some of the older tags get dropped from HTML5, you should expect that WordPress will also continue to update its software in order to ensure compatibility with industry-wide standards.

How To Use HTML Tags To Format Your WordPress Content

WordPress provides users with a option of adding content to posts and pages using its rich Visual Editor (also called a WYSIWYG editor, which stands for What You See Is What You Get) and a Text Editor that allows you to input code like HTML and other web languages (e.g. Javascript) when adding or editing your content …

Default WordPress Text Content Editor

WP HTML Editor

Info

We discuss the WordPress WYSIWYG Editor and adding content to posts and pages in separate ”how to” articles.

HTML Tags Allowed By WordPress

WordPress allows you to add most commonly-used HTML formatting tags, including the ones listed below:

Common HTML Tags

Frequently-Used HTML

Here are a few useful content formatting examples using a number of the HTML tags displayed in the table above …

Using Basic HTML Tags In WordPress

Formatting WordPress Content With HTML Tags

Tip

If you are interested in learning some more HTML, see the free tutorials in the site below:

The WordPress HTML (Text) Editor Menu Explained

The WordPress Text Editor lets users add, edit and work directly with HTML code and other web languages (e.g. Javascript) in the content.

By default, the Text (HTML) Content Editor comes with a number of standard menu features …

WordPress Text Content Editor Menu Features

WordPress HTML (Text) Content Editor Features

Here is a brief description of the function of each of the Text Editor buttons with their corresponding HTML tag (refer to the above screenshot):

  1. b: <strong></strong> Use this HTML tag for strong text emphasis (i.e. bold).
  2. i : <em></em> Use this button to italicize text.
  3. hyperlink: <a href="http://example.com"></a> Use this HTML tag to add a hyperlink to your selected text.
  4. b-quote – <blockquote></blockquote> Select this button to quote or cite selected text.
  5. del: <del></del> This HTML tag is used to label text considered as having been deleted from a post. Many browsers will typically display this as strikethrough text.
  6. ins: <ins></ins> Use this HTML tag to mark text that has been inserted into the existing content. Many browsers will typically display this as underlined text.
  7. img: src="http://www.yourdomain.com/img/image.jpg" alt="image description" /> Use this HTML tag to insert an image into your post or page and add an “alt” description (a text description of your image in case the image is not rendered in your visitor’s browser. Note: you can also use the “Add Media” button (15) to insert an image into your content.
  8. ul: <ul></ul> Choose this menu button to insert an unordered list into your content. Unordered lists usually appear as a list of items preceded by bullets. Note: this HTML tag needs to be used with the <li> tag (see below) in order for bullet lists to work.
  9. ol: <ol></ol> Select this menu button to insert a numbered list. Items in an ordered list are generally numbered (just like the list you are reading right now!). Note: this HTML tag needs to be used with the <li> tag (see below) in order for bullet lists to work.
  10. li: <li></li> Use this HTML tag to insert or turn your selected text into a list item. (This tag should be used in conjunction with the ul or ol tag).
  11. code: <code></code> Click this button to display code (like html formatting tags) in your text. If you don’t use these tags to surround the code you want to display, WordPress will apply your tags and you will get errors (e.g. missing text). Note: content selected within the <code> tags generally will display using a different text style, such as a monospaced font like Courier. (See the “Tips” section below for more details).
  12. more: <!--more--> This menu button will break a post into “teaser” and ”rest of content” areas. For example, if you type a couple of paragraphs, then insert the “more” tag and add the remainder of your post, visitors will only see the first paragraphs of your post and a hyperlink (e.g. continue reading…), which displays the rest of the post when clicked on.
  13. Close Tags – This function closes any open HTML tags left open. Note: proof your content after using this function to make sure that all HTML tags have formatted your text correctly.
  14. Distraction-Free Writing Mode – click this button to work in “distraction-free” writing mode (see screenshot example below). You can toggle between the Visual Editor and Text Editor modes, insert media and hyperlinks and update your content while in “full screen” mode. Click the button again to return to the normal text editor mode.
  15. Add Media button – Click this button to insert media into your content (e.g. images, videos, audio files). This button appears whether you’re in the Visual or Text editor tabs.

WordPress Content Editor Distraction-Free Writing Mode

Distraction-Free Writing Mode [#14]

Useful Tips Related To Using HTML In WordPress

HTML Content Editors

If you plan to use HTML extensively, there are several Free HTML editor software applications that you can download and use when getting started.

A popular free HTML software tool, for example, is KompoZer.

Kompozer - Free HTML Editor

Kompozer

KompoZer is Free Open Source software built as a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing. It’s designed to be extremely easy to use, especially for non-technical computer users who just want to create attractive, professional-looking web pages without needing to know HTML or web coding. You can build HTML-based content with this application, then use plugins that let you insert code into your WP posts or pages.

Another option, if you don’t want to touch any code at all or use an external HTML content editor, is to use a WordPress plugin that lets you build your content inside WordPress itself.

Thrive Content Builder - Plugin For WordPress

Content Builder – WordPress Plugin

To learn more about this plugin, see this article:

If you have no need or desire for doing any kind of work that involves editing code, but would still like to be able to easily create, insert and format content containing basic HTML into areas of your WordPress site other than your posts and pages (e.g. your sidebar, author profile, etc.), then see the quick tutorial below for a really simple solution that involves spending no extra time downloading HTML-editing tools.

Tutorial: Adding HTML-Formatted Content To The “About Yourself” Text Box In Your User Profile

In WordPress, there are some locations like ”widgets” in your sidebar, and the “About Yourself” text field in your User Profile section that allow you to insert HTML tags.

These areas, however, don’t come with a content editor like the Visual editor found inside your Posts and Pages areas (Quick update: WordPress version 4.8 introduced rich text widgets that now let you format content inside the widget using a WYSIWYG editor) …

WordPress WYSIWYG Editor

WordPress Visual/Text Editor

You can still use the WordPress Visual Content editor to compose HTML-formatted text, and then simply paste it into these other areas.

Let’s show you an example, so you can see how simple this can be.

By default, whenever you publish a post in WordPress, a link to the post author displays somewhere in your posts (i.e. at the bottom or top of the post) …

Link To Author Page In WordPress Post

Author Page Link In WordPress Post

Clicking on the author link takes visitors to the Author Archives section, where site readers can learn more about you (or other authors registered as users on your site) and browse other blog posts that you (or other authors) have published …

WordPress Author Archives Section

Note: As you can see from the above screenshot, you can add hyperlinks and simple text formatting like italics and bold text to enhance your author bio box and promote yourself, your products, social media pages, other websites you own, etc. to all of your site visitors …

Author Profile

The author resource box is located in the About Yourself > Biographical Info field within your Profile section …

About Yourself

Although the Biographical Info text box allows you to add HTML-formatted content, it doesn’t have a content editor, so you have to either know how to type HTML code directly into the text box, or create it somewhere else, then copy and paste it in …

About Yourself

Let’s “paste the content” into this field using the method described below.

First, create a new post and type your content in the Visual Editor.

In this case, we want to create an author promo

Creating An Author Description

Next, format the content using the Visual Editor . Please note that you can only use simple formatting in your author description such as hyperlinks, bold, underline and italicized text, so keep it simple – use bold, italics and text hyperlinks sparingly over one or two paragraphs to explain who you are and what you do, and remember to include a call to action for your visitors …

Creating An Author Description

Keep working inside the Visual Editor tab until you have added all of the formatting you want to add to your author bio …

Author Description

Once you have created your content, switch over to the Text Editor and copy everything to your clipboard …

Creating An Author Description

Next, go to your profile by selecting Users > Your Profile from your admin menu …

User Profile Screen

Scroll down to the About Yourself section and paste the content from your clipboard into the Biographical Info text area ….

About Yourself

Click the Update Profile button to save your changes …

Update Profile Button

Congratulations … You have just created an author promo for your posts and formatted it using basic HTML!

Author Profile

To learn more about editing your profile settings, see this ”how to” article: How To Edit Your WordPress User Profile

As you can see, you don’t need to learn HTML to use WordPress, but it can be useful to know the basics of HTML.

Tip

HTML Tips For WordPress Users

Tip #1 – If you would like to add more complex design elements to your content (e.g. highlighted segments, pricing boxes, etc.) without learning HTML, you can use cut & paste HTML tools …

Save time using cut & paste HTML tools

Save time using cut & paste HTML tools

Learn about a time-saving “cut & paste” HTML resource we recommend for non-technical WP users here:

Tip #2 (Advanced WP User): You can enhance the function of your WordPress Text Editor using various WordPress plugins.

For example:

WordPress HTML

WordPress HTML - WordPress Plugin

WordPress HTML allows you to add custom HTML to both the post and page body and head sections.

WordPress HTML - WP Plugin

WordPress HTML – Plugin For WordPress. (Screenshot source: plugin website)

Pasting HTML directly into your WordPress editor can break various elements and corrupt the HTML. By pasting the code in the custom fields dialogue boxes, you can output the exact HTML-formatted content to your page or post.

Extensible HTML Editor Buttons

WordPress Plugin - Extensible HTML Editor Buttons

Extensible HTML Editor Buttons is a free WordPress plugin you can add to your site that lets you have better control of settings for HTML tags like div and span, and add custom buttons and additional functions to the text editor …

Extensible HTML Editor Buttons - WP Plugin

Extensible HTML Editor Buttons – WordPress Plugin. (Screenshot source: plugin website)

Here is another free WordPress plugin you can use …

Raw HTML

Raw HTML

Raw HTML lets you disable automatic formatting like smart quotes and automatic paragraph creation, and use raw HTML/JS/CSS code in your posts without WordPress messing it up.

With this plugin installed, you can wrap any section of your post in [raw]…[/raw] tags, preventing WordPress from converting newlines to HTML paragraphs, replacing apostrophes with typographic quotes and so on. This is also very useful if you want to add a CSS block or JavaScript to your post.

Raw HTML - WordPress Plugin

Raw HTML – Plugin For WP. (Screenshot source: plugin website)

Tip #3 – Troubleshooting HTML Tag Errors: If your text formatting displays incorrectly after publishing your post or page, make sure that you have entered your HTML tags correctly in the Text Tab, not in the Visual Editor.

For example, if you type the following text in the Visual Tab …

Troubleshooting HTML Formatting Errors

Your text will look like this when you publish your post …

Troubleshooting HTML Errors

You can see the problem by switching over to the Text Tab …

Troubleshooting HTML Formatting Errors

As you can see in the screenshot above, WordPress converts the symbols “<” and “>” into their HTML code equivalents (called ASCII characters).

So:

  • <(open angled bracket) = “&lt;
  • >(closed angled bracket) = “&gt;

To preserve the symbols “<” and “>” intact and ensure that your text will format correctly, you need to paste the code into the Text Tab …

Troubleshooting HTML Formatting Errors

Now … when you publish your post, you should find that your text has been formatted correctly …

Troubleshooting HTML Formatting Errors

Tip #4 (Advanced WP User): By default, WordPress does not allow some HTML tags to be used (e.g. codes such as embed, input and others). This is for security reasons.

If you do experience any problems when adding commonly-used HTML tags into your content that are allowed to be used in WordPress, try disabling the visual editor in your user profile section …

Disabling the WordPress visual editor

After disabling the visual editor and saving your new profile settings, go back to your page or post and reinsert the content with the problematic HTML tags, then republish your post.

If the above suggestion fixes the issue, return to your User Profile area, reactivate your Visual Editor, and check if the HTML code is still working fine with the visual editor restored.

Practical Tip

Note: If the above suggestion doesn’t fix the issue and you still continue to experience problems adding HTML code to your site, you may need to look at other options. This may include:

  • Asking someone with experience troubleshooting WordPress errors to help you
  • Searching the WordPress Support Forum or WordPress troubleshooting resources for possible causes and solutions
  • Reinstalling your WordPress application (i.e. performing a clean installation)
  • Contacting your webhosting company for assistance

Congratulations! Now you know the basics of using HTML to format and style your content.

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum