Documentation:WordPress Basics/CMS Basics Guide

From UBC Wiki

Workshop Overview

This CMS at UBC workshop is geared towards members of the UBC community that have a need for the common look and feel (CLF) website such as faculty units, administrative departments, campus initiatives, etc. Participants will be introcuced to CLF theme options including layout, navigation, frontpage display, as well as ways to change the look and feel of your site, embedding external media, custom menus, domain mapping, utilizing short code for further customization, and much more. There will also be a brief introduction to copyright issues and creative commons licensing.

Need more info about CMS at UBC: Please visit to register for a site


For individuals seeking a personal web publishing solution it is recommended that you look at UBC Blogs. Please visit for more information.

Training Guide:

Workshop Agenda

  • Introduction: You, Us - Educational Resources Developer, CTLT - Learning Technology Specialist, CTLT
  • Session Objectives
    After this workshop, participants will be able to:
    • Customize the look and feel of either their own site
    • Embed multimedia into their pages or posts
    • Change the way visitors can navigate through their site


  1. Burning Question: What burning questions do you have about CMS at UBC that you would like to learn the answer to during this session?
  2. Recap
  3. Getting Started with CMS @ UBC (and Activity 1:Show and Tell)
  4. Activity 2:Hands-on WordPress
  5. Wrap-up, Questions
  6. Where to get support
  7. Copyright
  8. Feedback


What was covered in WP Basics I?

  • Pages vs Posts
  • Tags vs Categories
  • Widgets
  • Customization

UBC's WordPress Service

UBC Blogs and CMS at UBC both run the open-source WordPress blogging platform.

Note: If you are interested in some further training for UBC Blogs, please register for WordPress Basics II

Getting Started with CMS at UBC

The CMS service is geared toward members of the UBC community that have a need for a common look and feel website, and as such, are often faculty units, administrative departments, campus initiatives, etc. It is recommended that individuals look at UBC Blogs for personal web publishing solutions.

Requesting a site is a two step process:

  1. Create a UBC CMS User Account
  2. Fill out the Website Request Form
  • Go to (bookmark this for the future!) >> click on the LOGIN button and enter your CWL information.
CMS Login.png
  • The “Get your own CMS @ UBC account in seconds” screen appears
Your Username is permanent while you can change your Email Address and Display Name.
  • Enter a Username (only the lowercase letters a-z and numbers allowed), Email address, and Display Name
  • Agree to to the terms: "I have read and agree to the terms of service" at the bottom of the page
  • click the NEXT button


A showcase of more websites currently using CMS at UBC can be found at


Activity 1: Show and Tell: Would you like to showcase your site?

Activity 2: Hands-on with WordPress

Logging into a Workshop Sandbox

Even though you are probably working on your own unit/dept CLF webspace, we would like everyone to use a workshop sandbox today - this will help keep us all on the same page ;)

 Step 1: go to


 Step 2: log in with train 01-16 (facilitator will let you know which number you are!)
Step 3: Password is "4training"

CLF Theme Options

UBC CLF Theme Options Menu

The Common Look and Feel (CLF) is a WordPress them developed by CTLT in collaboration with UBC Public Affairs. It provides users with the UBC branding on their website as well as a variety of customization options.

All CMS at UBC sites have the CLF theme activated by default.

We will be looking at the following customization options:

You can access these options by going into your Dashboard and under Appearance, click Theme Options.

More information at


Hands-on Activity - Customizing the CLF

  Experiment with customizing the CLF in the Sandbox course 


The Widget Section can be found under Appearance. (Click to Enlarge)

WordPress Widgets are designed to provide a simple way to add various elements to your sidebar or footer without changing any code. They can help visitors easily navigate through your site or find the specific information they need.

Take note though that widget areas are theme dependent. Not all themes will have the same places to put widgets in.

Widgets Section

The Widget Section has 3 important elements: Available Widgets, Widget Areas, Inactive Widgets. (Click to enlarge)

The Widget Section contains three important elements:

  1. Available Widgets
    This box contains all the available widgets you can use for your blog.
  2. Widget Areas
    Depending on your blog's theme, you can have different areas to add widgets to. Some areas are for your left sidebar or the right sidebar. There are also themes that allow you to add widgets to your blog's footer.
  3. Inactive Widgets
    You can archive widgets you have used by placing them in this box. All the widgets placed here will retain all their settings, ready to be used if you choose to do so.
    When you change themes, all of your widgets will not be transferred automatically but placed in the Inactive Widgets area.

How to Add Widgets

You can add widgets by simply dragging a widget from the Available Widgets box and dropping them into any of the Widget Areas.

How to Remove Widgets

Remove widgets by dragging them outside of the Widget Areas or dropping them into the Inactive Widgets box.

Navigational Widgets

You can add widgets that will help visitors navigate around your site. Depending on how your structured your content, you have a number of options at your disposal.

  • Tag Cloud Widget: Creates a text cloud based on the tags you have used on your posts. The more a tag is used, the larger it will appear in the tag cloud.
    Tag Cloud Widget Back-end View Tag Cloud Widget Front-end View
  • Categories Widget: Create a list based on how you categorized your posts. You can also create drop-down menus by using subcategories.
    Categories Widget Back End.png Categories Widget Fron End.png
  • Pages Widget: Creates a list based on the pages you have created.
    Pages Widget Back-end.png Pages Widget Frond End.png

Text Widget

The Text Widget (Click to Enlarge)

The Text Widget provides you added flexibility with an area to add custom text, images, or any other media onto your sidebar. Some knowledge of HTML is needed for more advanced and customized uses.

If you don't know HTML, try creating your content as a post and then copying the code in HTML View.

Take note that space for the sidebar area is limited. You may need to adjust or experiment a few times to get the sizing correctly.



Section/Section (Tabbed) Widget

The Section widget allows you to add content only to specific areas within your site such as only the frontpage or specific post categories. There is also the Tabbed Section widget that allows you to create multiple tabs.

Dashboard view of the Tabbed Section Widget
Site view of a Tabbed Section Widget


Hands-on Activity: Adding Widgets

Try adding Widgets in the Sandbox course


CMS Plugins.png

Plugins are software components that you can add to larger applications to extend or customize its capabilities. In WordPress, you can install and activate a variety of plugins to perform more advanced tasks such as including a wiki page with your post/page or allowing visitors to receive notifications for new comments on a post.

You can find the Plugins area by going into your Dashboard and under Tools, click Plugins.

If you want to turn on/off a plugin, just click on the corresponding Activate/Deactivate link under the Actions column.

If you have a need or use case that cannot be met by the available plugins, you can fill out a Plugin Request Form. Each request is evaluated on a case-by-case basis as the support team will work with you to find potential solutions and perform testing to maintain the stability of the system.

For more information about plugins, visit the following resources:


  • Easy FancyBox
    With this plugins, when site visitors click on images or videos, it creates an overlay window instead of opening to another page. Once activated, you can customize Easy FancyBox by going to Settings and clicking on Media.
    You must set the image link to go the source URL.
  • Gravity Forms
    This plugin enables the ability to create forms that you can embed into your page, posts, or widgets. You have the ability for extensive customization such as entry fields, notifications, and design. Once activated, a new sidebar item called Forms will appear in your Dashboard.
    Embed a form into a page or post by typing in [gravityform id= name=].
    The Website Request Forms is a great example of a Gravity Form embedded onto a page.


Hands-On Activity: Adding and Configuring Plugins

Try adding and configuring PLUGINS in the Sandbox course

Documentation:WordPress Basics/Embedding External Content

Custom Menus

CMS Custom Menus.png

In some themes in WordPress (Coraline, TwentyTen, TwentyEleven, UBC Common Look and Feel) you can customize your navigation using custom menus. This allows you to select which main pages, sub-pages, links and categories will be added to the header.

You can have multiple custom menus for a variety of audiences and diverse ways of navigating around your site.

Start creating custom menus going into your Dashboard and under Appearance click on Menus.

Creating a Custom Menu

  • Click on the "+"
    Note: Only available when you haven't made a custom menu before
  • Enter a name for your custom menu in the box beside Menu Name
  • Click Create Menu
CMS Create Custom Menus.png
  • Add pages, external links or post categories to a custom menu
CMS Custom Menu Categories.png CMS Custom Menu Custom Links.png CMS Custom Menu Pages.png
  • Organize your custom menus and create hierarchies via drag and drop
  • Remove a menu item by clicking on the drop-down arrow beside its name and clicking Remove
  • Click Save Menu
CMS Custom Menu Save Menu.png
  • Under Theme Locations, click the drop-down box and choose the name of the menu you want to use as navigation for your site
  • Click Save
CMS Custom Menu Header.png


Hands-on Activity: Creating a Custom Menu for your Site

Blue square.png Intermediate Activity

  • To create a custom menu for your site begin in the Dashboard view* From the sidebar click on Appearance
  • From the drop-down menu that appears select Menu
  • Add a name for your menu in the Menu Name form* Select the pages and, links you wish to add to your navigation and click Add to Menu
  • From this view you can drag and drop the pages to change their order or their position as main pages and sub-pages
  • Under Theme Locations use the drop down menu to select the menu that you just created as primary navigation
  • Click Save Menuand return to your site to see the changes that you have made.

Black diamond.png Advanced Activity

  • From your Dashboard view select Appearance and then select Menu
  • From the Menu view try adding Categories to your menu as top level page titles.
  • (Optional) Create two menus and use one menu in the sidebar and one as the sites primary navigation.
  • Once you have saved this return to your site to view the changes.

Domain Mapping

Domain Mapping is changing the url of a CMS site from to

You can request a custom url from UBC IT at

The process usually takes 2 - 3 business days and it is important to include the following information with your request:

  • your site is hosted at CTLT
  • the IP address is

Changing Your Site's URL

Once your custom url has been approved, take the following steps to change your site's domain:

  • Go into your Dashboard and under Tools, click on Domain Mapping
    CMS Domain Mapping.png
  • Add your custom url in the box under Add New Domain
  • Check the box Primary domain for this blog
  • Click Add
    CMS Add New Domain.png

If you need to change the name your site and correspondingly change your custom url, you can easily add and change to a new domain by following the same procedure above.

If you have more than one domain already available just choose the one you want to use and click on Set Primary Domain. Take note that you cannot delete your primary domain.

CMS Changing Domain.png

Short Codes

Short codes are is named after what it means. Instead of inputting long lines of codes to take advantage of specific functionalities in WordPress, you only need to type in shorter ones.

For example, the short code [wp_get_archives] will automatically create an indexed archive of all of your posts.

Present a list of links that shows all of your posts by months.

You can add short codes to either pages or posts and unlike regular code, you can add these in either the Visual View or HTML View.

See a list of all available shortcodes on CMS at UBC.


  • Putting a "slideshow rotation" on an additional page(s) on your site:
 [slideshow width ="560" height=300"]
  • [column]
    Divide your content into columns or a grid system. The size of a regular post is defined as 12 where if you want to 4 columns, you will use [column size=3].
    For more information, please see Column Shortcode.
[column size=4 border]
We shall be in column 1
[column size=4 border]
We shall be in column 2
[column size=4 border]
We shall be in column 3

CMS Column Shortcode.png
  • [tabs]
    Divide your content into tabs. It's an easy way of organizing your content in order to avoid, long scrolling pages.
[tab title="tab1"]
   tab 1 content
[tab title="tab2"]
   tab 2 content
CMS Tabs Shortcode.png


Hands-on Activity: Using Shortcodes

Try inserting the above codes in some Pages/Posts in the Sandbox course


The Import and Export functions can be found under the Tools section.

WordPress makes it easy for you to import your blog content from a variety of other blogging platforms, including Blogger, LiveJournal, Movable Type, and many more. You can also easily import content from another site!

You can also export a WordPress webspace. Why would you do this? Let's say you have created a Science course site at UBC (Science 201) using Wordpress. You have put a lot of time and energy in this ONE site, (i.e. a ton of pages, posts, multimedia, etc). But, you are actually teaching THREE sections of this course at the same time and each section needs their own wordpress site. The fastest and easiest way to duplicate a WordPress webspace is to export the master (or template) course and then import it into 3 blank wordpress sites, giving each of them a different - Science201LevelOne, Science201LevelTwo, Science201LevelThree, etc.

This should really go without saying, but backing up your WordPress website on a regular basis is extremely important. Although a lot of web hosts (UBC does daily backups) may offer free backups, it is still your responsibility to keep recent backups yourself, preferably hosted on a local hard drive.


Hands-on Activity: Import/Export/Backing-up

Green circle.png Beginner Activity


  • If you have an external blog - for example on and would like to import it into, follow these instructions:
  • From the Dashboard, click on Tools, and the select Import
  • From the long list, click on the blogging platform to import from
  • Browse and locate the required format
  • Click the Upload File and Import button


  • If you have a webspace on - and would like export your blog to another web-based blogging application, follow these instructions:
  • From the Dashboard, click on Tools, and the select Export
  • Browse and adjust the various Filters (you can also leave all the defaults)
  • Click Download Export File button (an .XML file is created and saved on your computer)


Your questions answered (hopefully...)

Where to Get Support


Another other copyright questions?


Help us help you better! At the end of the session, please complete the feedback form.