Help

Have no fear, help is here, read this page and all will become clear…

Welcome to WordPress, and modern word processing for the web. This page demonstrates all of the standard page/post editing tools you can use, and shows how they are displayed in any given theme. When done correctly your content will look perfectly clean and tidy, as well as being formatted to international web standards, thus working properly for the search engines, as well as working as intended with the universe of new technology out there.

Text StylingImage Alignment and CaptionsTablesForm ElementsYouTube/Embedding Media


The WordPress Editor

The most common of these formatting tools, like paragraphs and headings, are available from the tool bar above the editor. Make sure you have the second row of tools/buttons visible, this can be shown/hidden using the last button on the top row called ‘Kitchen Sink’, see below:

WordPress Editor Toolbar - The red arrow points out the button which will show or hide the second row of tools, you will need both rows to be visible.

WordPress Editor Toolbar – The red arrow points out the button which will show or hide the second row of tools, you will need both rows to be visible.

Paragraphs – When you first start writing you will be typing within a paragraph, they are the default, this text you are reading now is a paragraph. If you write a paragraph and then press ENTER, you are creating a new paragraph below, there will be some space below the first paragraph in order to separate them. There are no hard rules, but generally you don’t want more than 100 words or 4/5 lines per paragraph; so to make the text clear and easy to read.

Headings – If you click on the drop-down menu where it says “Paragraph” you will see the list of available formats, if you click on one it will change the format of the section of text you were working on; thus it will not be a paragraph any more. The other options are: Headings (H1 to H6), Address, and Preformatted. The headings are ordered by importance like this:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings are very important, they are used to define a section within your page. This document you are reading now uses an H1 for the page title at the very top, and then H2’s as section or chapter titles, also some H4’s in the Embed section down the bottom; when a smallish sized and medium importance heading looked good.

Address – this is useful for defining a line of text as the address of a location/place, and thus not a standard paragraph. The line below is an address, and is styled as such, usually with italic text though this depends on your theme:

10 Downing St, London SW1A 2AA, United Kingdom

Preformatted – this is a special format for displaying a section of computer code; or text which needs the styling taken away, it displays with a basic mono-spaced font and most themes will put it in a box to make it easier to read, or to copy & paste:

This text uses the preformatted option, this allows use of complex characters without problems so you can write code like: <?php bloginfo('stylesheet_url'); ?>. It takes away all line-breaks and will break your word if it slips onto another line.

Adding styling to words and sections of text:

Within a paragraph you may want to emphasise a particular word, maybe make it bold or italic, colour the text, or add a clickable link etc. Click the button to make it happen, click the button again to take that These are the available tags in the order the buttons appear on the toolbar:

icon-boldBold – This is pretty standard stuff, but remember it is not to be used for headings. Select some text and click the ‘B’ button to make that word or group of words appear bolder – like this text here – it’s exactly the same as in MS Word or any word processing system.

icon-italicItalic – Again this is another standard text style which you will probably have seen before – this text here is italic.

icon-strikethrough Strikethrough – Not particularly common; but this is used for amending a piece of information which is no longer correct; while leaving a record of what was previously there – this text is strike’d out – (and this can be used in combination with the insert tag <ins> in order to make text display like this: Our gig is at 7pm. Schedule change; we now play at 8pm.)

icon-ul Unordered List – This is used for making a nice tidy list for when you needed ‘bullet points’, though your theme dictates exactly how this looks.

  • List Item 1
  • List Item 2
  • List Item 3

icon-ol Ordered list – The same as above but it will automatically put a number beside your list item, incrementing in order like this:

  1. List Item 1
  2. List Item 2
  3. List Item 3

icon-blockquote Blockquote – If you are quoting somebody else’s words then consider using a block quote, it will make the quote stand out by placing it in a box/indent of some kind (depending on your theme) and usually use a different text style:

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you. — HAL 9000

Horizontal Rule – A handy line used to divide or separate sections within your content, you can see them separating sections of this page.

icon-align-left Align Left – Another common feature of any word processor; but text is normally aligned left by default so you will not need it for text – it’s more used for images where you want the image to ‘float’ left of your text – select the image and click Align Left.

This paragraph here is aligned left.

icon-align-center Align Center – This can be used to center align text text, but again is more useful for images, or within tables as we’ll cover later.

This paragraph here is aligned center.

icon-align-right Align Right – It’s unusual to right align text, so again this is really meant for ‘floating’ an image to the right hand side of your text.

This paragraph here is aligned to the right.

icon-link Insert/Edit Link – Use the Link button to create links to pages or websites – this text here links to Google. Select the text or image you want to be a link; click the Link button and “Enter the destination URL”, you should add a descriptive title as well which shows when you hover your mouse over the link. There is a tickbox for making that link open in a new browser window, plus there is an easy method of linking to other pages/posts within your WP site.

icon-unlink Unlink – If you want to remove a link, click on the element with the link; you will see this button become available; click it and the link will be gone.

icon-insert-more-tag Insert More Tag – This may not be suitable for use with your theme, but the idea is to specify the point in an article where a summary version stops; requiring you to view the full article on its own page to see the content below this tag.

icon-underline Underline – Another option for emphasising a particular word or phrase – this text here is underlined.

icon-align-full Align Full – Otherwise known as ‘justified’ alignment, this makes the text expand to be flush with both the left and right side.

This paragraph here is aligned full, or justified, it needs to fall onto a second line for you to see the width stretch to fit the allowed width of the content, which is why I am continuing to write more words in order to demonstrate this effect, all the lines should be flush with both the left side and right side of the content.

icon-color Select Text Color – Select a piece of text and choose a color, really that simple. When you click on some other non coloured text you’ll be back to typing normally again.

icon-plain-text Paste as Plain Text – If you are trying to paste some content into your page but you get unwanted formatting or strange results etc – try using this plain paste function instead as it will strip any hidden formatting tags out; only pasting pure text.

icon-clear-formatting Remove Formatting – Another option when you have pasted some content but accidentally ended up with unwanted formatting, hidden tags, or strange results. Select the problem content and hit this button to strip out anything that is not purely text.

icon-special-character Insert Custom Character – A computer keyboard gives you access to many symbols; for example a pound sign (£) or a percentage sign (%), but there are far more characters available to you. Click this button to enter special characters like the copyright symbol (©) or a Euro sign (€) etc.


Other useful tags which require use of text mode:

Subscript Text – This is used for subscript characters, a good example is that water is H2O. Add <sub> before and </sub> after the desired characters.

Superscript Text – Similar to the above, often used for defining footnotes like for example this[footnotes]. Add <sup> before and </sup> after the desired characters.

Citation – A citation is … The New York Times (That’s a citation).

Abbreviation – When using an abbreviation you may want to provide the meaning when the mouse is hovered over that text; like these: HTML and CSS. In order to use this you need to add…

Variables – To copy a file type COPY filename.


List Types

You can add basic lists using the button in the editor; as explained in the styling section above, but to add more complex lists with ‘nested’ lists requires use of Text mode.

Definition List

Definition List Title
This is a definition list division.
Definition
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Ordered list

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Unordered list

  • List Item 1
  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

Tables

When you need to display data with rows and columns you will need to use a table. The easiest way to get a table into your content is to copy&paste this very simple table into your page/post using Text mode, and then edit it from the normal Visual mode.

<table>
<tbody>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>

The code above will create the table you see below:

Table Header 1 Table Header 2 Table Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

Table at 100% width, Align Center:

To make a table stretch to fit the width of your content; add width="100%" to the table tag, like this: <table width="100%">. To make the contents of a cell centred you need to click inside that cell and press the AlignCenter button, this needs done for all cells which you want aligned in the middle, like this example:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Example Table with text and pictures:

Tables are intended for displaying sheets of data; like a spreadsheet, but you can also use them for achieving layout in columns containing any content you like:

Heading (H3)

Parts Paragraph text.

Heading (H3)

servicing6 Paragraph text.

Heading (H3)

trailers6 Paragraph text.


CODE

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block like this:

#container { float: left; margin: 0 -240px 0 0; width: 100%; }

Word-Break Test

This is a test to see what happens when a line or word is too long for the container: ——————————————————————————————————————————————————————————————————————————————————————————————————————————-


Image Alignment

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

Anglo Scottish GS Jan 2011 - courtesy of Racer Ready

Anglo Scottish GS Jan 2011 – courtesy of Racer Ready

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

Thanks to Winners Gym and Tom Cawston for all your help

Thanks to Winners Gym and Tom Cawston for all your help

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

Taking a break!

Taking a break!

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

Young sporting talents share 25th Mik Sangster grant

Young sporting talents share 25th Mike Sangster grant

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

English-Championships---Feb-2011---courtesy-of-Racer-Ready-(edit)

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page. This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.

This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.This is a test paragraph, in order to test the styling of paragraphs and elements placed within we need a test page.


Form Elements

This section tests how form elements are displayed.










Send Me Newsletters
Send Me Promotions




Embedded Media

Most services like YouTube or Soundcloud have a button for ‘Share’, and then ‘Embed’ which will give you some options and give you the code you need. Make sure to select all of the code; right click and copy it. Come back to WordPress and edit the page you want the video to go on, click on the Text view and find the place on the page where you want to embed the video, right click and paste the code in. When you switch back to Visual mode you will see a ‘placeholder’ where the video will be, publish it and hopefully there will be a video where you wanted it.

YouTube:

Soundcloud Flash:

Aion & JCR – Revelation (Petroglyph185) The X-mas Compilation 2013 by flitemusic

Soundcloud HTML5:

Twitter Timeline:

TBA