Formatting

Formatting pages in WordPress

Formatting of text should be done with the drop down styling choices in the visual editor with the hierarchy of information in mind. (Think outline.) Screen readers use the tags created from these style choices to alert their users to what areas are most important.

Editing Toolbar with Styles Highlighted

Adding bold and / or  italic to the styles also adds information to both the code for those using screen readers and visual cues for those viewing the site in the usual manner as it adds emphasis.

Editing toolbar with bold highlighted

Editing Toolbar with Italic Selected

Underlines should NOT be used for emphasis.  Underlines on the web are a visual cue that the text is a link.  Adding additional color to text is discouraged as it adds clutter to the code a screen reader sees and creates inconsistencies in what the viewer sees.

Changing text colors using the text color drop down should not be used because it adds span styling to the coding which can cause formatting issues and is not interpreted well in screen readers.

If you are copying text from MS Word use the paste as text icon in the editor toolbar. This will eliminate many formatting issues that can be caused by the invisible code that Word will bring into the page with it.

Editing Toolbar with paste as text selected

One of the hardest things to get used to when using the WordPress interface is you can only see the style in the same manner the user does in preview mode or after the page is published.  For this reason, make sure you use Preview mode to check your work on a regular basis.


Style Guide

NOTE: it is typical to use no more than 4 levels of styling: paragraph, heading 1, heading 2, and heading 3.

This is “Paragraph” – it is the style should be selected for most text.

Tip – a “soft-return”  – using shift and return together
will create a single line space.

A “hard-return” – simply using a return will create separate paragraphs with spacing in between them.

A horizontal rule can be created by adding the tag <hr /> in the appropriate place in the text code of the page.

Sample of Horizontal Rule in Text code

Horizontal rule tag added in text code view


This is Heading 1 – it  should be used for main headings only.


This is Heading 2 – It should be used for subheadings.  Think of it like the main topics on an outline.  Screen readers often look for these tags to aid the user in deciding where to find the content they are looking for.


This is Heading 3 – It can be used to call out special sections


This is Heading 4 – Italic serif text


This is Heading 5 – can be used to add gold background to text.  NOTE: using “hard-returns” will create white space between lines.

This is Heading 6 – there is currently no special styling set up for this tag

This is Pre-formatted - a tag set up within the core WordPress system

More information:

Formatting a post:  http://youtu.be/DQtaYKvdklo?list=PL9478A91370624E9F

Adding a link: https://www.youtube.com/watch?v=49Du5IS_mJ8

Sizing Images for the Web
– Basic information: https://computing.artsci.wustl.edu/resize-images-web
– Using the free Pixlr online app: http://miamioh.edu/ucm/web/managing-website/instructions/adding-images/editing-images/index.html

Adding Images to WordPress https://www.youtube.com/watch?v=Y0CzY35eGGw


 

Adding documents to WordPress

How to add a document to the site so others can download them

1 – Upload the media to the library.
This is the same process used for images. 
– To get to the dashboard if you are logged in to the site hover over “Oxford Presbyterian Church” in the black bar and choose “Dashboard”

1-upload-document-dashboard-343x129

– In the Dashboard click “Media >> Add New”

2-document-upload-media-addnew-332x273

– You can add images or documents here by dragging and dropping or selecting files.

3-upload-media-600x244

2 – Copy the URL for the file
The file URL is the location of the file on the server.
– After the upload is complete find the file URL by clicking edit.

4-edit-image-from-upload-600x300

– On the edit page, you will find the URL is in the right column.

5-copy-url-600x283

– You can also find this information by going to the media library and clicking on the file.

6-choosing-from-library-600x410

3 – Add the download link
– Go to the page where you want the information, add descriptive text about what the user will download.  Include file type.  Highlight the text, and click on the “insert link” icon in the editing toolbar.

7-insert-link-600x109

– Copy the URL for the document in the destination URL box, select “Open link in a new tab,” and click “add link”

8-add-url-to-link-503x498

Be sure to test the link in the page when you preview changes and again after you have published to live.