CAN Website
UserManual

CAN Website UserManual

Document Control

Document History

Version / Date / Comments
1.0 / February 14, 2011 / Initial Phase I document created.
Page 1 of 18

CAN Website UserManual

Table of Contents

About this document

Overview

WordPress overview

Main WordPress Navigation Menu

WordPress Resources

Visual Admin

Overview

Navigating the Visual Admin

Types of views

Box color

Clicking methods

The top two levels of menu items

Working with menu items

Changing a menu navigation label

Adding a new page as a new menu item

Adding a link to an existing page as a new menu item

Adding a link to an uploaded file as a new menu item

Adding a link to another site as a new menu item

Deleting a menu item

Pages

Editing Pages

Standard WordPress HTML Editor

Standard WordPress Visual (WYSIWYG) Editor

Carrington Build Dynamic Layout Builder

Working with pages

Adding a new page

Editing a page

Adding specific types of content to pages

Uploading a file and adding a link to the file on a page

Embedding a YouTube video on a page

Adding a table to a page

Adding a photo gallery to a page

Media library

Overview

Working with media files

Viewing the media library

Uploading a file directly to the media library

Editing the properties of an uploaded file

Deleting an uploaded file

Page 1 of 18

CAN Website UserManual

Table of Contents

About this document

Overview

This user guide provides background information and step-by-step procedures for working with the basic components of the CAN website WordPress installation. More advanced, administrator-level tasks are described in the administration guide.

WordPress overview

Main WordPress Navigation Menu

The main WordPress navigation menu is visible on all screens within the WordPress administrator. It allows you to navigate between the various administrative and editing functions you can perform.

Navigating the menu

You can click the double arrows on the dividers between the sections to collapse (show only the icons) or expand (show the icons and the menu labels) the menu.

When the navigation menu is collapsed, you can roll your mouse pointer over the section name to see a drop-down menu of options for that section. When the navigation menu is expanded, you can roll your mouse pointer over the section name and then click the down arrow to the right of it to expand the menu of section options.

Menu panels

The menu panels and the subpanels available under them differ between Editor and Administrator users. The ones you will use the most are:

  • Dashboard: The dashboard subpanel under this panel is the first page you see when you log into the WordPress admin panel. This panel is where you access the CAN visual admin menu.
  • Media: This panel allows you to view, edit, or delete any of the media files (images, videos, etc.) that you’ve uploaded to the site, or you can upload new files.
  • Pages: This panel allows you to view, edit, or delete any of the existing pages, or you can add a new page.
  • Forms: This panel, which is only available to Administrators, allows you to view, edit, or delete any of the existing forms, or you can create a new form. (See the Forms section of the Administrator Manual for more information about using this panel.)
  • Users/Profile: Administrator users see “Users” because they have the ability to interact with more than just their own user account. Editor users see “Profile”, which gives them access to their own account settings, including the color scheme they want to use in the admin panel, whether or not they want the visual editor disabled, their personal details, and their password.

WordPress Resources

Additional information, instructions, and help can be found at the following:

  • Click the Help tab at the top right of most admin panel pages to see contextual help for using that particular panel or subpanel.
  • View WordPress’s primary documentation repository at
  • Visit WordPress’s support site for users of its WordPress.com hosting service at Though this site is specifically aimed at WordPress.com-hosted blogs, which vary in options and functionality from self-hosted WordPress installations, it offers some general purpose help using WordPress regardless of whether you host your own version or are taking advantage of WordPress.com hosting.
  • Visit WordPress’s support forums at
  • View video tutorials, including a four-minute video tutorial showing you how to use the WordPress visual editor, at

Visual Admin

Overview

The Visual Admin is a custom module that allows you to easily maintain the navigation menus on the public pages, including the text used in the menus and the pages, files, or sites linked to that text.

Navigating the Visual Admin

Types of views

The Visual Admin allows you to build and maintain the menu structure on the site. You can view the Visual Admin in two different ways:

  • Map viewallows you to navigate the pages on the site in a horizontal map view. Clicking anywhere in the colored box around any page name (except on the page name itself) expands the sub-items for that item.
  • Outline viewallows you to navigate the pages on the site in a vertical tree view, similar to how you view the files on your computer in the file manager (Windows) or Finder (Mac). Clicking in the colored box around any page name expands the sub-items for that item.

You can also view the admin as standard size (with the main WordPress navigation menu showing on the left side of the screen) or full-screen (without the main WordPress navigation menu) regardless of which of the two views you’ve chosen. To toggle between standard and full-screen, click the full-screen button.

Box color

  • Green boxes show the path from the top level of the menu to the page you’ve currently selected.
  • Yellow boxes show menu items that have sub-items.
  • Grey boxes identify menu items that have no sub-items.

Clicking methods

  • Clicking the name of the menu item allows you to edit the menu item, add sub-items, or edit the page.
  • Clicking the colored box around the menu item selects that item and expands any sub-items below it.

The top two levels of menu items

When you first log into your WordPress administration panel and open the Visual Admin, the default map view shows the top Menus level and the top level of menu items, which serve as groups for the items below them, below it.

The Menus level

The Menus level allows you to define which menu grouping contains the primary site navigation elements and which menu grouping contains the top navigation elements.

The top level of menu items

The menu items in the top level of the Visual Admin are groups to help organize the menus on the site. The group menu items are listed alphabetically.

  • Main Menu: The menu sub-items that appear under this menu item in the Visual Admin are the entries that appear in the primary navigation drop-down menus on all of the pages of the site. The order of the sub-items here denotes the order of the entries in the drop-down list.
  • Top Menu: The menu items that appear under this menu item in the Visual Admin are the items that appear under the search box at the top right of all pages on the site.

Working with menu items

Changing a menu navigation label

The menu navigation label is the text that appears on the public page for a given menu item. This is the text that the user clicks to open that particular page or link. Changes made to a menu navigation label are immediate.

To change a menu item navigation label

1.Login to /wp-admin.

2.In the left navigation menu, clickDashboard and then click Visual Admin.

3.Navigate down through the menu tree until you see the menu item for which you want to change the label.

4.Click the menu item name to select it.

5.In the Navigation Label box, type the new label for this menu item.

6.Click Save to save your changes, or click Cancel to close the menu item properties box and return to the Visual Admin without saving your changes.

Adding a new page as a new menu item

In order to add a new page as a new menu item, you must first create the new page, and then add the newly created page as a new menu item. (Refer to the Adding a new page topic in this manual for help creating a new page, and refer to the Adding a link to an existing page as a new menu item below for help adding a link to the newly created page as a new menu item.)

Adding a link to an existing page as a new menu item

To add a link to an existing page as a new menu item

1.Log in to /wp-admin.

2.In the left navigation menu, click Dashboard and then click Visual Admin.

3.Navigate down through the menu until you see the menu item under which you want to add a new item.

4.Click the menu item name to select it.

5.Click Add.

6.Select Existing Page, and then select the page to link to in the drop-down list. (Only published pages appear in the list.)

7.Click Add to add the menu item, or click Cancel to cancel the addition of the menu item.

Adding a link to an uploaded file as a new menu item

In order to add a link to an uploaded as a new menu item, you must have first uploaded the file. (Refer to the Uploading a file topic in this manual for help uploading a file.)

To add a link to an uploaded file as a new menu item

1.Log in to /wp-admin.

2.In the left navigation menu, click Media to open the media library.

3.Page through or search the library until you find the file that you want to link to.

4.Click the name of the file to open the Edit Media subpanel for that file.

5.In the File URL box, select and copy the URL.

6.In the left navigation menu, click Dashboard and then click Visual Admin.

7.Navigate down through the menu tree until you see the menu item under which you want to add a new item.

8.Click the menu item name to select it.

9.Click Add.

10.Click the Links tab.

11.In the URL box, paste the URL that you copied in step 5.

12.In the Label box, type the text that you want to appear as the navigation label for this menu item.

13.Click Add to add the menu item or click Cancel to cancel the addition of the menu item.

Adding a link to another site as a new menu item

To add a link to another site as a new menu item

1.Log in to /wp-admin.

2.In the left navigation menu, click Dashboard and then click Visual Admin.

3.Navigate down through the menu tree until you see the menu item under which you want to add a new item.

4.Click the menu item name to select it.

5.Click Add.

6.Click the Links tab.

7.In the URL box, type the URL you want to link to.

8.In the Label box, type the text that you want to appear as the navigation label for this menu item.

9.Click Add to add the menu item or click Cancel to cancel the addition of the menu item.

Deleting a menu item

To delete a menu item

1.Login to /wp-admin.

2.In the left navigation menu, clickDashboard and then click Visual Admin.

3.Navigate down through the menu tree until you see the menu item you want to delete.

4.Click the menu item name to open the item’s properties box.

5.Click Remove.

6.Click OK to confirm the deletion of this menu item, or click Cancel to return to the menu item’s property box.

Pages

Editing Pages

On the CAN website, you can create and edit pages using WordPress’s standardHTML and visual editors, but you can also use a special dynamic layout component called Carrington Build.

Standard WordPress HTML Editor

The WordPress HTML is a plain text editor that allows you to edit the HTML for your post or page directly. It’s particularly helpful if you have to add any kind of special code (scripting, etc.) to the page.

Standard WordPress Visual (WYSIWYG) Editor

The WordPress visual editor is a WYSIWYG (what you see is what you get) editor that allows you to type and format your text as you would in a word processing program.

Toolbar
Upload/Insert tools
Add an Image: Allows you to insert an image from your computer, the Web, or the site’s media library into the post or page. / Add Media: Allows you to insert an image from your computer, the Web, or the site’s media library into the post or page.
Add Video: Allows you to insert a video file from your computer, the Web, or the site’s media library into the post or page. / Add Gravity Form: Allows you to insert a form into the post or page. (This tool is only available if you’re logged in as an Administrator. Refer to the Administrator Manual for information about using forms.)
Add Audio: Allows you to insert an audio file from your computer, the Web, or the site’s media library into the post or page.
Standard editing tools
Bold: Bolds the selected text. / Align left: Left-aligns the selected text.
Italic: Italicizes the selected text. / Align center: Center-aligns the selected text.
Strikethrough: Strikes through the selected text. / Align right: Right-aligns the selected text.
Underline: Underlines the selected text. / Insert/edit link: Allows you add a hyperlink to the selected text.
Unordered list: Creates an unordered (bulleted list). / Unlink: Allows you to remove an existing link.
Ordered list: Select some text and click this button to turn the text into an ordered (numbered) list. / Insert More tag: Click the location on the page or post where you want
Outdent: Moves a previously indented paragraph back out one indent level. / Show/Hide Kitchen Sink: Shows or hides the second row of buttons (the advanced tools) on the editor toolbar
Indent: Indents a paragraph one level. / Link to post: Allows you to link to a post, page, category, or tag on this site.
Advanced editing tools
Format: Allows you to apply specific formatting (for example, a heading level) to a paragraph. / Insert row before: Allows you to insert a row before the selected row.
Paste a Plain Text: Allows you to paste text copied from any source and convert it plain text / Insert row after: Allows you to insert a row after the selected row.
Paste from Word: Allows you to paste text copied from Word and have it retain some of its formatting. / Delete row: Allows you to delete a row.
Undo: Allows you to undo your last action. / Insert column before: Allows you to insert a column to the left of the selected column.
Redo: Allows you to redo your last undone action. / Insert column after: Allows you to insert a column to the right of the selected column.
Insert a new table: Allows you to insert a table / Remove column: Allows you to delete a column.
Table row properties: Allows you to view and edit the properties of a row. / Split merged table cells: Allows you to split previously-merged cells.
Table cell properties: Allows you to view and edit the properties of a column. / Merge table cells: Allows you to merge the selected cells into one cell.

Carrington Build Dynamic Layout Builder

The Carrington Build dynamic layout builder allows you to easily build pages using a dynamic layout and content modules that you can drag and drop to rearrange.

Row layouts

You can add formatted rows to the dynamic layout:

  • 1 Column – Single column, full-width row.
  • 2 Columns – Two identical-width columns.
  • 3 Columns – Three identical-width columns.
  • 4 Columns – Four identical-width columns.
  • Multi-Row – Creates a complex row layout
  • Carousel – Creates a carousel layout
  • Full Column, Left Float – A full-width column with a second column floated to the left. Contents of the full-width column wrap around the floated column.
  • Full Column, Right Float – A full-width column with a second column floated to the right. Contents of the full-width column wrap around the floated column.
  • Left Sidebar – Two columns, with the left column narrower than the right column.
  • Right Sidebar – Two columns, with the right column narrower than the left column.
Types of row content
Modules
  • Callout – Displays a headline, an optional image, and brief text with a link.
  • Divider – Creates a horizontal rule to separate sections
  • Gallery – Allows you to select and insert images that are displayed on the page as a gallery
  • Heading – Add headings to the page wherever you need them
  • Hero – Adds a super image.
  • HTML – Add raw HTML or JavaScript. This content is not altered.
  • Image - Add an image from the media library.
  • Loop - Choose and display a set of posts (any post type).
  • Notice - Add a notice/alert area to the layout.
  • Plain Text - Standard WordPress formatting will be applied.
  • Post Callout - Show the title, an excerpt, and optional image of a post.
  • Pull Quote - Insert a stylized pull-quote into the layout.
  • Rich Text - Provides a WYSIWYG editor.
  • Shortcode - Inserts a shortcode into the layout. The following shortcodes are supported: [Array], [gallery_shortcode], [img_caption_shortcode]
  • SideBar - Place a WordPress sidebar to the layout.
  • Slideshow - Select and insert images as a gallery
  • Sub-Pages - A list of sub-page titles or excerpts.
Widgets

These are standard WordPress widgets.