Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Brooklyn College Library & Academic IT | Library Guides

Instructional Guides on Creating Accessible OER: WordPress Classic Editor

Learn how to use LibGuides, WordPress, Scalar, Manifold, Word, Adobe Acrobat Pro

WordPress Brooklyn College The City University of New York.

Classic Editor

Getting Started

  • Contact Associate Professor & Librarian Miriam Deutch (miriamd@brooklyn.cuny.edu) or one of the OER Developers.
  • In the email, please provide your Brooklyn College email address to use for login name (typically first name.lastname@brooklyn.cuny.edu).
  • A Brooklyn College email is required if using Brooklyn College's hosted instance of WordPress.
  • You will receive a system-generated email with link to the WordPress system for logging in and setting password.

WordPress Instructions

How to Login to WordPress

WordPress login
 
  1. Go to login page given to you by OER developer
  2. First time logging in: Put in your email address
  3. Type in your Username or Brooklyn College Email address
  4. Type in your Password
  5. Once logged in you will be at your course's Dashboard

 

 

WordPress Initial Dashboard for Editors

 

 

How to Change your Password

  1. From the left-side menu select “Profile”
  2. Then Scroll down to bottom of the screen
  3. Click on the button “Generate Password”
  4. A pop-up box appears where you can change your password.
  5. Make sure your new password is at least “Strong” level
  6. Click "Update Profile"

WordPress Account Management initial screen

WordPress Change Password box

How to Add a Page

  • Login to your site
  • From your “Dashboard” screen you can add a page to your site
  • There are several ways to add a page
  • Choose whichever option you like best.
  • Option numbers correspond to the numbers in this screen image

Dashboard showing where to add pages

Option 1:

  1. From black top menu bar, place cursor over  "+ New"
  2. A drop-down menu will appear
  3. Select "Page"
  4. A new blank page will appear

Option 2

  1. From the black left-side menu bar, click on the word "Pages"
  2. You will be sent to the Pages page, where all pages created are listed
  3. Click on the "Add New" button
  4. A new blank page will appear

Add a page from the Pages page

Option 3

  1. From the black left-side menu bar, place cursor over "Pages"
  2. A pop-out menu will appear
  3. Select "Add New"
  4. A new blank page will appear

Option 4

  1. Click the number of pages link in the "At a Glance" box
  2. You will be sent to the Pages page, where all pages created are listed
  3. Click on the "Add New" button
  4. A new blank page will appear

Add a page from the Pages page

 

How to Edit a Page

Have you created a page already but need to edit it?  Maybe you've created a page but cannot find it because it is not showing up in the top navigation menu of the site.  Here are various ways for you to search and then edit pages you've already created.

Option 1

  1. From the public side of the site, go to page you want to edit
  2. Scroll down to the footer of the site
  3. Click on the "Login/Edit" link
  4. Login to the site
  5. Editing options for the page will now become visible

Option 2

  • Login to the site
  • From the black left-side menu bar, click on the word "Pages"
  • You will be sent to the Pages page, where all pages created are listed
  • Once you get to the "Pages" page there are several different ways to find page(s) you wish to edit.
    • Number 1-4 show you different to ways to find, browse and search for pages created.
    • Number 5 explains how to "edit" and "quick edit"

How to edit pages screen grab

  1. Sort pages by "Title" by clicking on the top of the "Title" column
  2. Sort pages by "creation month" by clicking on the drop down menu next to "All dates" and selecting the month you wish
  3. Search the pages by "title" or words within the guide content.
  4. Sort pages by creation "Date" by clicking on top of the "Date" column
  5. There are several different types of "editing" you can do
  • Clicking on the page's "Title" link takes you to the page with editing options now visible
  • Clicking on the "Edit" link takes you to the page with all editing options now visible
  • Clicking on "Quick Edit" expands page information
    • Content editing is not available in "quick edit"

Quick editor expanded window

  • Clicking on "Trash" deletes page
  • Clicking on "Preview" opens up a preview of the page in your current window

Understanding Parts of a Page

Whether you are adding a new page or editing a page, there are several sections, located in different boxes, which you should be familiar with, on your page screen


Add new page box sections

 

 

Publish box defaultsPublish box (#1):

  1. "Save Draft" button: Save a draft copy of your page
  2. "Preview" button: Opens up preview in new window/tab
  3. Status, Visibility and Publish have default settings, to change select "edit" link
    • Status: Set to "Draft"
    • Visibility: Set to "Public"
    • Publish: Set to "Immediately"
  4. "Publish" button: Publish page

 

Publish box expanded

Publish box expanded:

If you click on the "edit" links next to "Status", "Visibility" or "Publish immediately" you can change the defaults.

  1. Status: From the drop down menu select "Draft" or "Pending Review" to set "Save Draft" button action
  2. Visibility: Set page's visibility to: public, password protected or private.
    • If you click "password" a pop-up box will appear where you can type in the password
  3. Publish: Set if you want the page to publish immediately, or if you want to set a future date and time.

Page Attributes (#2):

 

Page attributes box Parent: Use this section to decide where your page will be located on your site.  Will it be a top level, main menu page (no parent) or will it be a sub-page, listed under another page.

  • To make a top level page: use (no parent)
  • To make a sub-page: from the drop down menu, highlight the page your current page should be located “underneath”

Template: Use this section to determine the template for this particular page

  • Depending on the Theme being used for your site, there can be various types of templates

Order: Leave "0"

Feature Image (#3)

Would you like a featured image on your page? The featured image will be under the banner image for your site and above any written content. You can have different featured images on different pages.  This is not the only way to add images to your pages or site.

Add Featured Image

  • Click “Set featured image” link. 
  • In pop-up window choose “Upload Files” or “Media Library” tab
    • Upload via drag and drop or search your computer files
    • "Media Library" allows you to select an image already uploaded
  • Accessibility: Make sure to give each image “Alt-text" (alternative text which describes the image for screen readers)

Featured image box

 

Featured image upload window

Edit or Update a Featured Image:

  • Inside the "Featured Image" box you will see the current featured image
  • Click on the image to edit or update it
  • Selected image will have a check mark next to it

 

Attachment Details box: 

Close up of attachment details box.

 

  • For ALL images make sure to add "alt-text"
  • Making images and graphics "visible" to all users is one of the first principles of accessibility. 
  • The way you make your image visible to everyone is by adding "alternative text" or "alt-text".
  • Adding alt-text to your images is an accessibility best practice.
  • For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
  • Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 
  • Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
  • You can also add /change alt-text when you add an image in a Rich Text/HTML.
  • You can also add Title, Caption and “Alt-text” & Description

 

Discussion (#4):

Choose whether you want to allow users to make comments and if you want "trackbacks and pingbacks"

Slug (#5):

The slug is the place where you can create a user friendly URL.

Author (#6):

Select who you want listed as the author of the page/post.  There can only be one author.

Formatting & Adding Media section (#7):

In the classic editor, you have a WYSISYG (what you see is what you get) editor.

Some important areas:

  • To add a link click on the "link" icon.
  • Make sure your link text is meaningful, DO NOT have a "click here" link or a "more" link
  • When adding a numbered or bulleted list, use the built-in formatting, don't just type in numbers and tab over or type a bullet.
  • Use the "Headings" and "Paragraph" built-in formatting, DO NOT just make text bold and larger to represent a header.
  • To add images, audio, word docs and pdfs click on "Add Media"

NOTE: To embed a video you do not select "Add Media". You type url of the video on a single line with nothing else on the line and hit enter

Screen grab showing few WYSIWIG formatting.

Visual / Text / Page Builder (#8):

  • By default the editor is set to the "Visual" editor.
  • The "visual" editor is a WYSIWYG (what you see is what you get) editor
  • If you'd like to use code, select "Text" and you can see the html code and edit the code.
  • To use the new "Guttenberg" block editor, select "Page Builder".

 

Videos: WordPress (Classic Editor/Gutenberg)


Attribution:
[iThemes] (2019, Jan. 15) How to Use The Classic Editor in WordPress 5.0 [Video File]. Retrieved from https://youtu.be/y7cZXPHkgYg

Creating Accessible WordPress sites

Finding accessible-ready WordPress.Org themes

  1. Go to https://wordpress.org/themes/
  2. Click "Feature Filter"
  3. Check the "Accessibility Ready" box in the "Features" column
  4. Click "Apply Features"

Page or Post Title

  • Page and Post titles should be brief, clear, informative, and unique.

Screen grab showing where to type in title that screen reader will read outloud.

 

Use Headings

  • Headings help in organizing a web page or post.
  • When creating headings in WordPress classic editor make sure to use the actual heading option and don't just make them visually look different by changing font or color.
  • When selecting headings, don't use <h1>.  Your page or post title is already an <h1> and there should only be one <h1> per page.

Screen grab of wordpress classic editor showing where to select headings

 

Create Alt-text for Images

  • Adding alt-text to your images is an accessibility best practice.
  • Making images and graphics "visible" to all users is one of the first principles of accessibility. 
  • The way you make your image visible to everyone is by adding "alternative text" or "alt-text".
  • For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
  • Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 
  • Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
  • In WordPress classic editor there are several ways to add alt-text to images to your site.
  • You can add "default" alt-text to an image so that each time you reuse the image its default alt-text will be attached.
    • This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
    • You can edit this "default" alt-text on individual pages (option four)

Option 1: Adding Default Alt-text to Image via Media Button

  1. Select <Add Media> button from within a page or post
  2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select)
    1. If you need to upload an image first then, select upload files tab, upload your image and then do step 2.
  3. Once an image is selected you will see the "Attachment Details" box on the right hand side of your window.
  4. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing the add media button

 

Screen grab showing add media window with atachment details

Option 2: Adding Default Alt-text to Image via "Media" left side-bar option & "Add New" button

  1. Select "Media" on the left side-bar
  2. Click on the <Add New> button located in the "Media Library" window
  3. Drag & drop image or search computer to upload image
  4. Once an image is uploaded, select it (you will see a check-mark next to the image you select)
  5. Once an image is selected you will see the "Attachment Details" box.
  6. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing selecting Media then Add New Item button

Option 3: Adding Default Alt-text to Image via left side-bar option "Media" - "Add New"

  1. Select on "Media" on the left side-bar to open up drop down menu
  2. Click on "Add New", located under "Media" and "Library".
  3. Drag & drop image or search computer to upload image.
  4. As your image is being uploaded you will see a progress bar saying "crunching".
  5. After image is uploaded, click on the work "Edit" (located on the bottom right) 
  6. A new window will open, an "Edit Media" window.
  7. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing how to upload new media and add alt-text.

 

Option 4: Customizing Alt-text of images on individual pages or posts

  1. Click <Add Media> button from within a page or post
  2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select).
  3. Click on <Insert into page> button.
  4. Once back on the page or post, click on the image you just uploaded.
  5. A new editing bar will pop-up
  6. Click on the pencil "edit" icon
  7. An "Image Details" page will pop-up.
  8. Here you can edit the alt-text without changing the "default" alt-text of the image.

Screen grab showing how to edit an image's default alt-text from within a page or post.

How to create Lists

  • Do not create lists manually, use the built in formatting.

Screen grab showing where to select bullet or numbered lists.

Check Color Contrast

  • Check to see if the colors you've picked for your tabs and background are accessible.
  • Use these color contrast evaluation tools.
  • WCAG Contrast Checker is a Firefox browser plug-in.
    This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1.
  • Color Contrast Analyzer is a Chrome browser plug-in.
    This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.

Why worry about color contrast?

  • Choosing accessible colors for your documents and site is important.
  • Colors affect the readability of your document and site for all users, not just those with vision impairments.
  • The only people for whom the color choices don’t matter are those using screen readers.

How to use color correctly:

  • Don't use color as the only way to communicate information, always make sure meaning is conveyed in multiple ways.
  • This is true for the main text of your document, links in blocks and images of text.
  • In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
  • Run your site and documents through color contrast checkers to make sure the contrast ratio is good.
  • To meet basic guidelines (Level AA) text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).

WordPress Classic Editor Plug-In