Text Formatting

As with other website content management systems, WordPress provides tools to format text and other content but also some inherent limitations. In this post, we'll explore how you can best use the tools without being hindered by the limits.

You can format text in a number of ways using the toolbar at the top of the main text field in Visual mode. Visual mode is the most common way to work with posts. Largo provides additional styles you can apply by using Text mode.

Note the tabs that allow you to switch between Visual and Text mode while writing or editing a post:

Visual Mode

Most common text formatting can be done in Visual mode. If you don't see all the tools shown in the image above, click the Toolbar Toggle button:

If you're familiar with text formatting in Word or other desktop software for creating documents, you'll see that Visual mode gives you many of the same tools for WordPress posts.

Bold and Italics

You can add bold or italic styles by selecting text and clicking the B and I buttons:

Add Hyperlinks

Add a hyperlink to any text by highlighting the words you want linked and clicking the link button. You can then paste theURLl of the link and click the arrow button to confirm:

To edit or remove the link, hover over the text and a toolbar appears:

Click the pencil icon to edit the link, or the X to completely remove it from the text.

Lists, Alignment, and other Text Formatting

Add bulleted and numbered lists, blockquotes, align text, underlines, special characters, and other standard formatting provided by word processing programs.

The Module Wrapper

Largo adds one tool not found in desktop text authoring programs: the Module Wrapper.

The Module Wrapper allows you to make a selection of text appear as an aside or a pull quote. You can also use it to include embedded content like a YouTube video, and make it responsive for different screen sizes. To use it, select some text in Visual mode and click the Module Wrapper icon which is the furthest to the right in the formatting toolbar. You can then select:

• Aside, which pulls the text aside and wraps the other post content around it. This similar to a pull quote but with undecorated text.
• Pull Quote, which also pulls the selected text aside and applies styling to make it stand out from the body text.
• Embedded Media, which is useful for videos and other embedded content to make them resize responsively for different screen sizes.

Use the Module Wrapper options to align your selection left, right, or center, and to display half-width or full-width. In the case of embedded content, you can choose to extract the width from the embed code itself but this will prevent it from resizing responsively.

Tip: Preview the post to see how the Module Wrapper will display your content. You can use undo to revert changes made by the Module Wrapper, or by using Text mode you can delete the HTML wrapped around the selected content.

Module Wrapper Pull Quotes versus WordPress Pullquotes

Note that the standard WordPress formatting toolbar also has a Pullquote button. You can use this to apply the standard WordPress styles to a selection of text, with this result:

The Module Wrapper applies a more visually-rich style to the selected text, and allow you to align the pullquote to the side of the other post content:

Text Mode Tips and Tricks

Text mode gets you access to many standard html tags, so if you're comfortable with html you can tweak things quite a bit. But keep in mind that WordPress only allows some html tags, and will strip out disallowed code. This includes most JavaScript, Flash objects, and form markup. This is an important security feature to prevent insertion of code that could have very bad results for the entire website.

When you switch the Text field from visual to text mode, the toolbar changes:

Feel free to explore what the text mode formatting buttons do, or if you know html you can enter tags by hand. For example, if you need to include some actual code as part of the post text, you can wrap it code tags.

You can also apply certain classes to paragraphs. For example <p> for a larger, more prominent font, or <p> to make a paragraph smaller.

Given the limitations inherent in formatting text on a website, you have a great deal of flexibility in Visual mode.