Style Guide July 21st, 2014
Text, words etc!
Using WordPress’s Rich Text Editor
Formatting text in a WYSIWYG editor can sometimes be finicky. If you’re trying to copy/paste in content from somewhere else, be mindful of the source. Is it a webpage? You may copy over all the unseen HTML tags from that page. Is it a Word Doc or PDF? You may paste in even worse formatting code that can cause things to look weird.
There’s a ‘paste as text’ button you can use to remove styling on pasted in content.
Trouble is, you now need to reformat in WordPress. WP claims that they will clean up unwanted styles when pasting from Word, but just be mindful it may not work completely. Look closely at your copy before publishing to make sure things don’t look weird.
Page Headings
This is a Heading 2
This is a Heading 3
This is a Heading 4
And this is plain paragraph text.
It’s best to format your pages with an easy to skim, hierarchy of content. Use h2s for main sections, h3s for subsections within those sections, and so on. This is because, on “the internet”, people tend to not read every article word for word. We skim the page, look for sections that are interesting, then dive deeper.
I’m sure there’s been a study somewhere that proves this. If only there was a tool that would let me search for a specific thing using a few simple phrases.
Anyway, headings. You’ll notice there is also a Heading 1 option, and you may have also noticed that I’ve left it out above. You are very perceptive and do a good job at noticing. You deserve a treat. This is because Heading 1 is reserved for the Post Title, which displays at the very top of the page. There should only be one Heading 1 per page. This syncs up with SEO best practice, the design of the site, and Highlander rules.
Images
Full Width Image
The full width placeholder should be 730px wide. Height can vary depending on subject matter, but should be at least 250-300px. Set alignment to ‘none.’
Image aligned left
Left and right aligned images are no wider than 300 px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel urna ullamcorper, rutrum arcu sit amet, condimentum tortor. Nulla eget elit et purus facilisis sollicitudin. Sed adipiscing metus augue, at feugiat felis pharetra a. Ut consectetur cursus dui id posuere. Ut pharetra libero nibh.
Sed gravida rhoncus tincidunt. Mauris felis justo, pellentesque nec pulvinar nec, tincidunt at nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sagittis lectus vel facilisis ultrices. Nulla eget sollicitudin mi. Praesent in sem non elit mollis gravida. Vestibulum dolor purus, feugiat ut magna sit amet, adipiscing tincidunt tortor.
Image aligned right
Because of the way HTML documents flow, right aligned images need to be inserted at the beginning of the paragraph that you want the image to be paired with.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel urna ullamcorper, rutrum arcu sit amet, condimentum tortor. Nulla eget elit et purus facilisis sollicitudin. Sed adipiscing metus augue, at feugiat felis pharetra a. Ut consectetur cursus dui id posuere. Ut pharetra libero nibh. Sed gravida rhoncus tincidunt.
Mauris felis justo, pellentesque nec pulvinar nec, tincidunt at nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sagittis lectus vel facilisis ultrices.
Nulla eget sollicitudin mi. Praesent in sem non elit mollis gravida. Vestibulum dolor purus, feugiat ut magna sit amet, adipiscing tincidunt tortor.
Important note on aligned images: in WordPress, the width of the WYSIWYG window can be wider than design of the live post or page, so text and images will appear to wrap differently. If you think you need to enter a bunch of spaces to get the next line of text to clear, preview the post first. For an example on how odd it can be, here’s what it looked like when setting up the images above:
Tables
The Knowledge Center uses a great plugin called TablePress, which allows you to create tables simply without needing to use HTML. Click the TablePress button in the left nav when logged into WordPress to create a new table, then in your post, click the insert table icon: 
You can toggle on/off interactions like sorting on columns, filtering via search input, & pagination of rows. Find these options under Features of the DataTables Javascript Library.
Simple Table
Date | Chrome | Internet Explorer | Firefox | Safari |
|---|---|---|---|---|
| July 2013 | 36.29% | 20.27% | 16.60% | 11.37% |
| June 2013 | 35.82% | 21.35% | 16.79% | 10.83% |
| May 2013 | 35.66% | 23.67% | 16.87% | 10.55% |
| April 2013 | 33.71% | 25.58% | 17.27% | 10.65% |
Table with Sorting & Filtering
Date | Chrome | Internet Explorer | Firefox | Safari |
|---|---|---|---|---|
| July 2013 | 36.29% | 20.27% | 16.60% | 11.37% |
| June 2013 | 35.82% | 21.35% | 16.79% | 10.83% |
| May 2013 | 35.66% | 23.67% | 16.87% | 10.55% |
| April 2013 | 33.71% | 25.58% | 17.27% | 10.65% |
Table with Pagination
Date | Chrome | Internet Explorer | Firefox | Safari |
|---|---|---|---|---|
| July 2013 | 36.29% | 20.27% | 16.60% | 11.37% |
| June 2013 | 35.82% | 21.35% | 16.79% | 10.83% |
| May 2013 | 35.66% | 23.67% | 16.87% | 10.55% |
| April 2013 | 33.71% | 25.58% | 17.27% | 10.65% |
| March 2013 | 32.88% | 25.08% | 17.86% | 11.18% |
| February 2013 | 31.96% | 25.54% | 18.28% | 11.26% |
| January 2013 | 31.51% | 26.37% | 18.39% | 10.76% |
| July 2013 | 36.29% | 20.27% | 16.60% | 11.37% |
| July 2013 | 36.29% | 20.27% | 16.60% | 11.37% |
| July 2013 | 36.29% | 20.27% | 16.60% | 11.37% |
| June 2013 | 35.82% | 21.35% | 16.79% | 10.83% |
| June 2013 | 35.82% | 21.35% | 16.79% | 10.83% |
| June 2013 | 35.82% | 21.35% | 16.79% | 10.83% |
| May 2013 | 35.66% | 23.67% | 16.87% | 10.55% |
| May 2013 | 35.66% | 23.67% | 16.87% | 10.55% |
| May 2013 | 35.66% | 23.67% | 16.87% | 10.55% |
| April 2013 | 33.71% | 25.58% | 17.27% | 10.65% |
| April 2013 | 33.71% | 25.58% | 17.27% | 10.65% |
| April 2013 | 33.71% | 25.58% | 17.27% | 10.65% |
| March 2013 | 32.88% | 25.08% | 17.86% | 11.18% |
| March 2013 | 32.88% | 25.08% | 17.86% | 11.18% |
| March 2013 | 32.88% | 25.08% | 17.86% | 11.18% |
| February 2013 | 31.96% | 25.54% | 18.28% | 11.26% |
| February 2013 | 31.96% | 25.54% | 18.28% | 11.26% |
| February 2013 | 31.96% | 25.54% | 18.28% | 11.26% |
| January 2013 | 31.51% | 26.37% | 18.39% | 10.76% |
| January 2013 | 31.51% | 26.37% | 18.39% | 10.76% |
| January 2013 | 31.51% | 26.37% | 18.39% | 10.76% |
Posted by Chet Farley in Uncategorized