I’m putting this little post together to help my clients on Wordpress, and hopefully a few other folks out there when composing Wordpress posts and pages. Please comment below with questions/additions, as I’ll continue updating this post.
Audience:
This cheat-sheet is intended for users using the Wordpress CMS, and would like to have a bit more control over the layout and formatting. It is not a complete guide to HTML, rather is focused on HTML formatting for using the Wordpress post and page functions.
Scope:
We will be reviewing how to better format content within the Visual and HTML tabs for Wordpress pages and posts, relying on WP’s built in rich text editor, a few HTML snippets, and a basic synopsis of CSS styles as they are relevant. Things such as Doctype and <head> tags that are not editable from the editor will not be covered.
Image styling & galleries
Uploading and inserting an image in Wordpress is very straightforward (see here if you have trouble). Styling it once it’s in the post:
Floating an image
Floating means that all other page content including text, etc., will wrap around the floated element (an image in this case).
Code:
Example:
This is example text: “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Giving it a border and/or padding
A simple way to dress images up a bit, is to give them a border and/or padding. Borders can be any pixel amount in width, either solid, dotted, or dashed, and can be colored using HTML hex codes or by simply declaring white, red, blue, etc as is done below in the background style.
Code:
Example:
This is example text: “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Margins: the key to using white space
Text bumping up against images and other elements can sometimes be confusing to the eye, a simple way to fix this is by using margins. Remember, margin values are are like a clock, they start at 12 O’clock high and run clockwise. (e.i. – top, right, bottom, left)
Code:
Example:
This is example text: “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Inserting Galleries
Inserting photo galleries could not be easier since WP 2.5. Simply use your upload/insert button to upload your images to a post. Simply use the “Gallery” tab to select options, or use the HTML syntax below:
Code:
or link to the file:
[/gallery link="file" columns="4"/]
* you have to remove the slashes (/) for it to work!
Example:
Or, link to file
Text styling
Boxes = Div’s
There are any number of scenarios in which you’ll want to create a box. Boxes in HTML are made using the <div> tag, and can contain text, images, and nearly anything. You may add margin, padding, borders, and background just like the images above. Here’s a couple examples:
Code:
Example:
Code:
Example:
Paragraphs
Just like in a book or a magazine, paragraphs are blocks of texts that you may style to your liking. You may add borders, backgrounds, padding, and margins just like above. Also, you may add text indentation, line height, text alignment, etc.
Code:
Example:
This is a paragraph with the text indented 50 pixels. Now for some sample text (disregard, for display only) to demonstrate how the next line falls back into place with regular padding and margins set up in your theme, etc.
Code:
Example:
This is a paragraph with the text indented 50 pixels. Now for some sample text (disregard, for display only) to demonstrate how the next line falls back into place with regular padding and margins set up in your theme, etc.
Header tags (H1 – H6)
Header tags are a great way to organize your content. Use them to separate your posts and pages hierarchically with the H1 tag at the top, and lesser tags below. *Note: Most themes have styles already created for these tags, but you can always customize them using the style=”" attributes like above and below.
Code:
<h2>This is an H2 tag</h2>
<h3>This is an H3 tag</h3>
<h4>This is an H4 tag</h4>
<h5>This is an H5 tag</h5>
<h6>This is an H6 tag</h6>
Example:
This is an H1 tag
This is an H2 tag
This is an H3 tag
This is an H4 tag
This is an H5 tag
This is an H6 tag
Italics
Just use the emphasis tag, <em>
Code:
Example:
Underlined Text
Easiest way to underline, is to add the “text-decoration” attribute:
Code:
Example:
This is underlined text
Strike through
Code:
<strike>This is text with a strike through</strike>
Example:
Links
Hyperlinks, or links for short, are what make HTML different than any other medium. Links are handled with the <a> tag, and the “href” attribute is the address of the page you would like to link to. Here’s a simple example:
Code:
Example:
Title attribute
When a visitor hovers over your link, it’s nice to have give them a little info about what they would be clicking on if they do so. Different browsers (IE, Firefox, Safari) handle this a little differently, however it usually hovers a tooltip with the title of the link near the mouse pointer.
Code:
Example:
Opening in a new window
Though it’s not always recommended, sometimes you want to open links in a new window or browser tab. For example, if you want to open a link that goes away from your website or blog. It’s done by setting a target attribute for the link, we’ll use blank as it’s the most common (and don’t forget the preceding underscore). *It’s highly discouraged to ever use new windows with links that go to within the same site
Code:
Example:
A note about Microsoft Word
This cheat-sheet is intended for users using the Wordpress CMS, and would like to have a bit more control over the layout and formatting. It is not a complete guide to HTML, rather is focused on HTML formatting for using the Wordpress post and page functions. Hint: it’s the icon with the clipboard and MS Word logo on it.