• If you’re in Rennebohm Hall and are using the wireless network or are working somewhere outside the building, you’ll need to first log into VPN (aka Global Protect). 
  If you don't have VPN on your machine, instructions on how to download and install it are available at https://kb.wisc.edu/helpdesk/90370.
  
  
• After logging into Global Protect, you can log into your WordPress site.  In the browser url field, type in the address of your site with /wp-admin at the end. 
  Example: https://pharmacy.wisc.edu/wp-admin
  
  
• When the Login window appears, click on the “Log in with netID” button and enter your credentials when prompted (see Fig 1 below)
  
  Fig 1

• After logging in, you’ll be taken to the Dashboard for your site.

1. Two options:
   
   
   • Option 1:  While on the dashboard, click on Pages, find the page you wish to update, and hit the "Edit" option sitting below the page name.
         
     
     
   • Option 2: Navigate to the page you wish to edit in your web browser, then click the "Edit" option in the black bar at top of screen.
         
     
     
2. Use the WYSIWYG editor to make changes to your text - (see Fig 2 below).
   
   Fig 2
   
   
3. When copying and pasting in text from a Word doc, use the “Paste as Text” option – (see Fig 3 below). 
   Fig 3
   
   This will strip out potentially problematic formatting code from Word that can cause issues.
   You will need to reformat your text (re-add bold, italics, bullet points, etc.), but using “Paste as Text” will ensure that your page’s code is clean and free of weird formatting code.
   
   
4. You can use the "Add Media" button to add images. Visit our detailed KB doc on how to work with the Media Library.
   
   
   
5. You can preview changes you’ve made to your page by clicking on the Preview Changes button, which will open a preview in a new browser tab.
   You can return to your original tab to continue making edits and previewing your changes. (See Fig 4 below)
   Fig 4
   
   
6. When you’re finally done making edits, make sure to hit the “Update” button to save your changes. 
   
   
7. If you mess things up on a page, the good news is that you can either (1) reload the page without saving it, and it will go back to the state it was in before your latest round of edits; or (2) revert back to any earlier version using the Revisions panel – (unless you deleted a content layout section between versions). 
   
   In the Revisions panel (see Fig 5), select the version you wish to revert back to, and in the Compare Revisions window, check to make sure that version is the correct one (see Fig 6).  Then hit the “Restore this Revision” button. 
   
     Fig 5
   
   Fig 6

In the summer of 2023, UW-Madison's rolled out a new Digital Accessibility Policy (https://policy.wisc.edu/library/UW-519), which requires that all UW websites and digital resources be accessible for people with disabilities.  Below are some important best practices to follow as you build and update your website:

Best Practices for Digital Accessibility:

1. User hierarchical headings to help visitors with screen readers easily navigate to the section they wish to read. Example: 
   
   - The title of a page will automatically be set as H1 (Header level 1).
   - Main sections on your page should be H2 (Header level 2). 
   - Subsections within the H2 sections should be H3 (Header level 3).
   
   
2. Use correctly-formatted bulleted and numbered lists 
   Sometimes bulleted text that is pasted in from Word becomes a bullet symbol next to some text, and numbered list items are a number next to some text. These will not be read aloud correctly by screen readers.
   
   
3. Avoid using / pasting-in underlined text, which users may mistake for a url link.
   
   
4. Avoid using “click here” or “this link” for linked text. Instead, use specific, descriptive wording that enables visitors to know where a link is going to take them.
   Example:  Instead of "Click here to download the 2024 application", which is vague and confusing, you could use "Download the 2024 application."
   
   
5. Avoid using tables to layout / position page elements.
   On narrower devices, layout tables can cause content to be cut off and cause other display issues.
   
   
6. If you include a true data table on your page, it will need to be formatted in a way that is accessible to screen readers.
   Column headers and row headers should be used – (contact Sally Griffith-Oh for assistance.)
   
   
7. When adding an image from the Media Library onto a page, make sure the image has alt text.
   If the image is decorative, make sure the html code for the image has an empty alt text tag (see example below): 
       <img src="/wp-content/file-name.jpg" alt=" " class="border">
   

General Editing Tips & Tricks:

1. If you need a single-line return in a text block, hit Shift + Return.
   (If you just hit Return, you’ll get a double-line return.)
   
   
2. Do not delete / modify code in square brackets sitting on a page's content area.
   Short code (code in square brackets) is used in WordPress for including special content on a page (for example, event feeds, news feeds, or web forms) - see (Fig 7 below.)
   
     Fig 7
   
   
3. When adding a link to a page that sits on an outside website, select the check box for “Open in a new tab.” 
   
   
4. If you’re not able to see an area on the editing page (like the Revisions area), click on the Screen Options button at top of screen to hide/unhide screen elements. (see Fig 8 below).
   
     Fig 8
   
   
5. Make sure to test your site on a variety of devices, browsers, and especially on mobile devices. This will help you identify display issues, help you decide whether or not to simplify your menu structure, and figure out whether your pages require too much scrolling to read from top to bottom.

1. In the black tool bar at top of screen, select + New > Page   (see Fig 9 below)
   Fig 9
   
   
2. Add a page title, and select a layout (one or two columns).
   
   Tip: Shorter page titles are best and make for shorter, simpler urls.
   See Section E below for information on how to shorten a page’s url.
   
   
3. If you want the page to be a child page (sub-page) of another page, designate what the parent page will be in the Page Attributes box (see Fig 10 below). 
   
   Note: Child pages will have a longer url, since an extra slash and name of page will be appended to the base url.
   For example, https://sitename/parent-page/child-page
   
   Fig 10

1. In the Primary Content Area, you can add text to the pre-existing Text Block area, or add a new page element (e.g., Accordion Panels, Group of Links, Alternating Content Boxes, etc.)
   
   Visit the UW WordPress Kitchen Sink of Elements website to view examples of these layout options: https://uwtheme.wordpress.wisc.edu/kitchen-sink/. 
   Note: Some page elements are only available for use on one- or two-column layouts.
   
   Also, although they look cool, it’s best to avoid using background images (like behind Featured Content blocks) as they can slow page load speed.
   
   
2. Multiple editors: If you go in to edit a page and someone else is already in the process of making edits, you will be locked out of being able to make edits.  You'll have the option of taking over the page.  However, in these circumstances, be sure to coordinate with the other editor, and make sure you save your changes after you've finished making adjustments.

In cases where a page title is long, WordPress will automatically create a long url (see example below.)

   

You can shorten your url by editing it in the Permalink field (see screenshot below). In the example below, the original url “/2021-school-of-pharmacy-pharmd-and-pharmtox-research-symposium/” is shortened to simply “/2021-pharmd-tox-research-symposium/”

   

As you think through the design of your site, you’ll want to decide between having multiple chunks of content posted on a page vs. separating the content out into several different pages.  You’ll want to avoid creating pages that are too long (think of endless scrolling on a phone) while also avoiding having too many pages with minimal content that require more clicks to navigate through.

You’ll also want to keep the red navigation menu at the top of your site from getting too long.  Ideally it’s best to aim for a maximum of 5-6 links; too many links may look okay on a desktop screen, but will create very long menu that spans beyond one screen on a smart phone. 

As you build your menu set-up, keep in mind that “parent” menu items function as placeholders that serve only to initiate the drop-down of child pages (and not as functional links). Child menu items are active links that actually go to the destination pages (see Fig 11 below).

Fig 11

To create a parent link with child pages, first create a custom link for the parent menu element. You can put a "#" into the URL field (since the parent menu element won't actually link to anywhere), then type in the name you want for the parent element, and hit "Add to Menu". (See Fig 12 below)

Fig 12

You can then drag child pages under the parent element (inside red box in Fig 13 below) and save the menu.

Fig 13