Styling

The WordPress content editor gives you full control over the content. Whether it be the visual or the text editor. (We recommend using the visual editor.) While the editor toolbar gives you access to add styles and control the format of the text it’s easy to quickly disrupt style consistency. We’ll look at a few ways to not only adhere to the styles set for The Allender Center but also check out some custom styling enhancements.

For general editor tips please check out the offical editor documentation, this article from wpbeginner or check out the online courses. There are certain editor styles you should avoid using such as text color, the insert read more tag, and increase/decrease indent. Here are a few more tips:

Headings

Heading tags (h1-h6) are used to create structure within a page. They also help when a user is scanning a page looking for important information.

Heading 1 (h1) will always be the title of the page. This is built into the theme. It’s up to the content editor to add additional headings. Since h1 is always the page title you will start with h2. For example, for this page “Styling” is the h1 and “Headings” is one of the h2’s.

On the 2nd row of the toolbar there is a dropdown to select headings. Unlike paragraphs, headings are not automatically added. If you copy/paste from an external document be sure to double check that your intended headings are actual heading and not just bold.

When structuring your page with headings, think of heading tags as the titles of chapters in a book. These will be h2’s. Then if needed, there may be subchapters with related content these will be h3, and so on. Once you are finished with any subchapters you can then jump back to using h2’s in your content.

In-line Styling

There shouldn’t be a need to unnecessarily bold, italicize, or change text color.  Nor should there ever be a need to create a paragraph that is justified. See how it adds spacing…weird. Avoiding these styles will help allow us to stay on brand and maintain consistency throughout the site.

Strikethrough, or delete (del tag), represents an edit to the document. This is helpful if you’d like to indicate a significant removal of content that people accessing the document would benefit from knowing about. This doesn’t happen as often, but can be helpful.

If you are unsure when you should use in-line styling, please refer to the grammatical styling section.

Lists

The reason we use lists is because they not only provide semantic markup but also so that lists will be styled consistently instead of, for example, manually adding numbers or other bullets to create a list. There are two different types of lists that we can add within WordPress:

Unordered Lists

Use an unordered (bulleted) list when you are listing items, but the order is not important.

• Steps do not matter
• It’s just a list of things to do, see, or whatever
• In no particular order
  • Press tab and you get to have a list within a list
  • this is an unordered list inside one item of the larger unordered list

Ordered Lists

Use an ordered list (numbered list) when the order matters.

1. Log In
2. Go to Store
3. Click Add Item
4. Title the item

See the difference between an order list and a manual list and how it’s possible to use different numbered or bulleted styles. It’s also impossible to created nested lists.

1. Log In
– a sub list item
+ another sub list item
2. Go to Store
3) Click Add Item
4. Title the item

Paragraphs vs. Line Breaks

By holding shift when you press enter/return you can skip to a new line yet stay within the same paragraph.

The Seattle School

2501 Elliott Avenue

Seattle, WA 98121

The Seattle School
2501 Elliott Avenue
Seattle, WA 98121

Empty Paragraph Tags

Each time you press enter/return within the standard WordPress editor you create a new paragraph. Even if the paragraph is empty. Watch for empty paragraphs at the bottom of pages and posts as they create unnecessary, extra padding at the bottom of a page.

Copying and Pasting in the Editor

Copying and pasting from word processing applications (Word, Google Docs, etc.) sometimes creates unnecessary markup. There are a few ways to avoid this:

• Write copy in the WordPress editor. (There’s a nice distraction-free writing mode for this.)
• Write or paste into a plan text editor (notepad, text edit, etc.) before pasting to WordPress. (Be sure your app is set to plain text mode, not rich.)
• Use the Paste as Text mode in the 2nd row of the editor toolbar.
• Highlight your pasted test and use the Clear formatting button in the 2nd row of the editor toolbar.

Pasting as text and clearing formatting will not disrupt the structure of your content, but will clear any in-line styling. It may be good practice to clean up and add styling within WordPress rather than your word processor.