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.
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.
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 be used sparingly 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.
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.
WordPress 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.
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
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”
– In the Dashboard click “Media >> Add New”
– You can add images or documents here by dragging and dropping or selecting files.
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.
– On the edit page, you will find the URL is in the right column.
– You can also find this information by going to the media library and clicking on the file.
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.
– Copy the URL for the document in the destination URL box, select “Open link in a new tab,” and click “add link”
Be sure to test the link in the page when you preview changes and again after you have published to live.