Editing Pages

The WUSM Web Theme includes set styles to ensure page elements like headings, links and bullet points are styled consistently. Please follow the guidelines below so your website fits these standards.



Editing pages

  1. From the WordPress dashboard click on Pages then select the page to edit; or navigate to that page on the live site while logged into WordPress, then click “Edit Page” in the top ribbon
  2. Add/edit content in the main text editor box

    If you copy and paste text from another website, an email, Microsoft Word or any other source besides your WordPress site, select “Paste as text” before you paste. This mode will prevent the source’s code from invading your page and causing mysterious formatting issues.

    This imposter code may cause unexplained spacing, background colors or line breaks, fonts or text colors that don’t match the rest of the site, or links that appear underlined or blue.

    paste-as-text

  1. Style your text – adding headers, links and bolding, as well as custom features like call-out boxes and accordions – following the instructions below
  2. Add a photo if desired
  3. If unexplained spaces or other formatting shows up, you may need to edit the code directly by toggling from the Visual to Text view (top right of text editor box)
  4. After making your changes, click “Preview” in the upper right (opens in new tab); when the edits are ready to go live click “Update
  5. After changes are updated, click “View Page” in the top ribbon to toggle to page view on the live site

Clicking Publish or Update will save your changes to the live website. Preview allows you to see your edits without saving them. Even if you preview changes before saving them (recommended), be sure to always view the page on the live site after your changes are saved.


Applying styles (bold, headers, etc.)

  1. Make sure you are in Visual (not Text) view
  2. Make sure you have clicked the Toolbar Toggle button to show all editing options

toolbar-toggle

  1. Add bold, italics, bullet points, block quotes, indentation, etc. by highlighting the text and selecting the style in the toolbar
  2. Add headers using the “Paragraph” dropdown; use Heading 2 to add sub-headers, and Heading 3 if those sections need to be further subdivided (see editorial standards for page titles and headings)
    Do not add underlining or bold, or change the text color or size, to create headers. Instead, use the pre-formatted heading styles to ensure they are consistent across your website and that they are updated correctly when the theme changes.
  3. To add a soft return (line break with single space instead of double), hold Shift + Enter/Return
  4. If styles are appearing incorrectly (extra spaces, bold in the wrong places, etc.), make sure you’ve used the “Paste as text” tool, and view the page in HTML (“Text” view) to troubleshoot using basic HTML code

Adding links

(See best practices for naming and using links.)

  1. Highlight the text that will link
  2. Click the “Insert/edit link” button from the top toolbar (looks like links of a chain), or use keyboard shortcut (PC: ctrl + k / Mac: cmd + k)
  3. Add the link’s URL / web address:
    1. Page on your site: Start typing the page name and select it from the options that appear below
    2. Page on another website: Insert web address in the URL field
    3. Email address: Insert mailto:email@address.edu (Ex: mailto:mpa@wusm.wustl.edu)
    4. Link to download a document (pdf, xls, ppt, etc): See tutorial for linking to documents
    5. Link to a specific section of a page: See HTML code for adding anchor links
      For more link options, click the gear icon.
  4. Do not set links to open in a new window/tab
  5. Click blue ⏎ button to save link

Custom formats (buttons, accordions, etc.)

Follow the instructions below to add:

  1. Page intro (2-3 lines of larger, gray text at top of a page): Highlight the text, then click Formats > Custom Styles > Intro Text
  2. Accordions (text headers that expand to show more content when clicked): Type your accordion header and body text first, then:
    1. Highlight the accordion title, click Formats in the toolbar, select WUSM Accordion Styles > Accordion Header
    2. Highlight the body, click Formats, select Accordion Body Text
  3. Call-out box (puts a white box around any text): Highlight the text to call-out, go to Formats > Custom Styles > Callout
  4. Button: In the toolbar select Insert (dark circle with a +) > Button, add the button URL / link address and text, and click OK
    Buttons should be reserved for your website’s most important calls to action and should be used sparingly; please follow these guidelines for creating links and buttons.
  5. Disclaimer: Highlight the disclaimer text, click Formats in the toolbar, then select Custom Styles > Disclaimer
  6. Block quote: Highlight the text, then select the quotation mark icon in the toolbar