Skip to main content

MSF Content Management Help

Help Sources

Help with managing content can be found in several places.

  • WordPress Lessons: This contains a good overview. Unfortunately they have not done a good job of separating User documentation from Developer documentation. A good place to start is here.
  • In-context Help: A little drop-down menu item appears on the top of admin pages gives you help for the current page.
  • WordPress Forums: Here you can search for answers and ask questions if are having difficulty.
  • This page: Help with aspects of this website that are custom built.


The editor is a Microsoft Word-like tool that allows you to edit text content in pages, sidebars, slides and posts in a fairly visual way. It offers tools to assign headings, bold, italic, lists, etc.

Editor Hints

Microsoft Word and other desktop editing programs are wonderful – until you try to copy and paste the content into a web page. It will translate into very bad HTML which will look inconsistent with the look and feel of the site. To avoid this:

  1. Copy and paste from Word into a plain text editor like “Notepad” or “Text Wrangler” which should strip all formatting.
  2. Copy the unformatted text into the WordPress editor window.
  3. Delete any extra spaces between paragraphs.
  4. Format the content using primarily the “Format” tool from within the WordPress editor.
  5. If things aren’t appearing as expected, its likely that some bad HTML was pasted in. Select the “Text” tab of the editor window and take out any <span …></span> tags.

Editor Styles

The editor has a “Formats” select list. In it are special “classes” that can be applied to various elements as follows.

  • “Float Left / Float Right”: This will be most often used for smaller images. The image will be position on the left/right with wrapping around it.
  • “Text align Left / Right”: When this is applied to a content, text align will be changed to left/right.
  • “List Tight”: This will change list item margin top & margin bottom to be tight.


In most cases, .jpg will be the best format to use for photos. Graphics with a lot of areas with flat colour may benefit from .gif file format.

Image dimensions

  • Page Header Image: 2060 x 685 px (larger is OK, it will scale down automatically)
  • Sidebar Image: 255x 147 px (larger is OK, it will scale down automatically)
  • Biography Image: 108 x 127 px (larger is OK, it will scale down automatically)
  • Project Image: 156 x 102 px (larger is OK, it will scale down automatically)


Adding a content image & image text

  1. After login, click “Edit Page” button at the top of the window.
  2. Select an image from the featured image to display on top of the page.
  3. Add content for the image text at the “Transparency Content” section.
  4. Update the page.

Adding an accordion on a page


  1. After login, click “Edit Page” button at the top of the window.
  2. Click Insert shortcode button at the top of the editor.
  3. Select “Accordion”.
  4. Insert accordion title, content and click insert shortcode button.
  5. It will create a shotrcode this:
  6. [su_accordion] [su_spoiler title="Title1"]Content1[/su_spoiler] [su_spoiler title="Title2"]Content2[/su_spoiler] [su_spoiler title="Title3"]Content3[/su_spoiler] [/su_accordion]
  7. Update the page.

The above will generate this:


For advanced documentation, please visit Example Page

Appearance > Menus


  1. “Menus” contain “Menu Items”. The site templates were designed to use only for registered menus. Adding other menus will have no effect.
  2. Once changes made to the position of Menu Items are saved, they can’t be undone. So BE CAREFUL.

Modifying Menus

  1. From the admin console, select “Appearance” > “Menus”.
  2. You will see the two menu tabs in the main content area. The “Menu Items” are displayed hierarchically for each.
  3. You can change the menu item by dragging it into the position you want.
  4. To add a Menu Item to the currently selected Menu:
    • Use any of the panes in the center column to select the asset you would like it to link to.
    • Select “Add to menu”. It will appear at the very bottom of the currently selected Menu.
    • Drag it to the position you want.


The sidebar content is editable, a user can organize the content.

Right Sidebar Template

  1. After login, select “Appearance” > “Widgets”.
  2. Select and Edit “Landing” for Homepage, “Primary” for other pages.
  3. Please make sure that changes are saved before you close the page.

Add a lightbox video into sidebar content

Create lightbox video using a shortcode

Video Types: [youtube,vimeo]

  1. From the admin console, select “Appearance” > “Widgets”.
  2. Select a widget and select content.
  3. Write a shortcode.[msf_video_lightbox_vimeo5(youtube) video_id="VIDEO_ID" width="640" height="480" auto_thumb="1"(creating auto thumbnail from the video) anchor="VIDEO_THUMBNAIL_IMAGE_URL"]


[msf_video_lightbox_vimeo5 video_id="13562192" width="640" height="480" auto_thumb="1" anchor=""]


Create a Documentation Link with file type icon

[msf_documents] [msf_document_item type="ppt" title="TIC Overview Presentation" url="FILE_URL"]Powerpoint presentation describing the TIC, types of projects and timing[/msf_document_item] [/msf_documents]

  • type: [“ppt”, “xls”, “docx”, “pdf”]