WordPress Editor Training

WordPress is the CMS that powers both the BSU and NTC websites.

wordpress-logo-680x400 If you are interested in learning more about WordPress and how to use it within your department or office, the Office of Communications and Marketing offers training opportunities to help you get started.

WordPress 100 Series – The Basics
101: Logging in and accessing your sites
102: Basic layout of WordPress
103: Editing content in a page
104: How to add a page
105: How to use secondary content and sidebar columns

WordPress 200 Series – Photos, Documents and Video
201: How to add video to a page
202: How to add an image to a page
203:How to edit photos in WordPress
204: How to link a .pdf document to text
205: How to build a photo gallery
206: How to replace a document or a photo

WordPress 300 Series – Intermediate Page & Post Management
301: How to point a page to another page
302: Editing faculty/staff listings (note: this does not include making directory edits)
303: How to assign parent pages
304: How to organize your website menu

WordPress 400 Series – Advanced Page & Post Management + Gravity Forms
401: How to create a blog/news post and use it on your site
402: Adding an Anchor (page jump) to a page
403: How to build a form and use it on your site
404: Customizing form notifications

WordPress 100 Series: The Basics

101: Your Sites: Gaining Access and Logging In
To gain access to a BSU/NTC website, email Rachel Munson (rachel.munson@bemidjistate.edu) Office of Communications and Marketing digital communications specialist. If you do not have a WordPress account, one will be created for you.

Follow these steps to log into WordPress:

  • Go to www.bemidjistate.edu or www.ntcmn.edu.
  • Click “MyBSU” or “MyNTC” in the top right corner of the page.
  • Use the form and log into MyBSU or MyNTC using your StarID credentials:
    • For Bemidji State: user name: starID@bemidjistate.edu; password: your starID password
    • For NTC: user name: starID@ntcmn.edu; password: your starID password
  • Once logged in, a dark blue bar will appear at the top of the webpage, which in this document will be called the “toolbar”. This toolbar should include a WordPress logo — a “W” inside a circle, with the word “WordPress” next to it. Please contact Rachel if you do not have this icon on your toolbar. If you do have this icon, hovering over it will open a popup menu listing the sites you have permission to access. Graduate to WordPress 102!

102: Basic WordPress: Dashboard Layout
Once you are logged in to MyBSU or MyNTC, there are two ways to access the list of websites you have permission to edit. First, you can click the WordPress logo in your toolbar, which will take you to a white screen that will give what looks like an error message stating you do not have permission to edit the homepage, but will include a list of the sites you can access. You can click the “visit Dashboard” link next to the name of your site to visit that site’s dashboard. The second, and quicker, way is to select the site you wish to edit from the popup window that appears when you hover over (or tap on, on a mobile device) the WordPress icon in the toolbar, and then select “Dashboard” from the flyout menu for that site.

Site Dashboard: The dashboard is the main entry point to your site. It includes some boxes with basic information about your website and, on the left side, a menu of tools you can use to manage, edit and add content to your website. This list of tools will vary from user to user, but the most common items are:

  • Posts – Your website’s blog or news feed. See WordPress 201 or contact Rachel for private training on posts.
  • Media – Your website’s media library, containing the photos and other documents used on your website.
  • Forms – See WordPress 403 or contact Rachel for private training on this topic.
  • Pages – The individual pages on your website can be created, edited or deleted from this menu. The majority of the work you do to manage the content on your website will likely be done in this page editor.

Depending on your access rights, you may have additional tools in your menu. contact Rachel for private training if you would like to learn how to use them. Graduate to WordPress 103!

103: Basic WordPress: Accessing and Exploring the Page Editor

Accessing the Page Editor
WordPress gives you several different ways to access the Pages tool for a page you wish to edit. The two most common are:

  1. From the Dashboard, you can use the “All Pages” link under the “Pages” menu item to see a list of all pages on your website. This list is limited to 25 pages per screen, so for large websites you may need to use the arrow buttons on the upper right or lower right of the list to navigate through the index. Click the page you wish to edit to open the Page editor for that page.
  2. When logged into MyBSU or MyNTC, visit the page and click the “Edit Page” option in the toolbar or use the “Edit” link at the bottom of the page you wish to edit. You will only see the “Edit Page” toolbar option and “Edit” link on pages you have permission to edit.

Exploring the Page Editor
The Page editor has a standard layout, regardless of the page you wish to edit. It includes a number of fields you can edit to add to or change the content on your page and, in some cases, control how the page will look. The Page editor has two main sections — the editor and the sidebar.

In the Editor:

  • Page Title — Once a page is created, only change a page title if it is absolutely necessary. Contact Rachel if you need to change a page name. You may also have an option to edit the page’s Permalink; this changes the URL to the page and can cause links to the page to break. Again, use caution or consult with Rachel if you wish to edit a Permalink after a page has been created.
  • Add Media — Used to add items such as photos or documents to your page’s Media Library. The Media Library is explained in WordPress 201.
  • Add Post Element — The “Add Post Element” option can be ignored.
  • Add Form — Add a form for your visitors to complete. Creating and using forms is covered in WordPress 403.
  • Editor — This is the main content area for this page of your website. You will see two tabs in the editor’s upper right-hand corner — “Visual” and “Text”. For the majority of your work, you’ll want to be in the “Visual” tab. The editor also includes its own toolbar that you’ll use to format text, images and links on your page.
  • SEO Meta Description — A 160-character summary of the page used to share information with Google and other search engines.
  • Revisions — After a page has been published for the first time, the Revisions box includes a list of all the times a page has been saved after changes have been made, and the name of the user who saved that version of the page.
  • Discussion — Checkboxes to enable user comments and share tracking for the page. These are off by default, and you are encouraged not to enable them.
  • Comments — After a page has been published for the first time, the Comments box appears. If you have enabled comments with the Discussion tool above, any comments left on the page will appear here. Note that this box appears even if comments are disabled, and seeing this box does not mean your page has received comments.
  • Slug – A “slug” is part of a page’s URL; by default, the slug is set to the page’s title, but this can be edited. As with the permalink, changing slugs can lead to broken links elsewhere on the site. Consult with Rachel if you need to edit slugs after a page has been published.
  • Page Links To — This is an advanced navigation tool covered in WordPress 205.

In the Sidebar:

  • Publish — Preview and publish changes to your pages here. The green button in this section will read “Publish” until you publish a page for the first time; after a page is published, this button will change to read “Update.” Other features of the Publish box include the date and the page was first published, the date, time and editor for the page’s most recent revision, and four other tools:
    • “Preview Changes” — open a temporary, unpublished version of your page so you can see how any changes you have made will appear before you publish the page.
    • “Status” — a page can be set to Published, Pending Review or Draft. This is an advanced feature. You will rarely, if ever, need to change a page’s status.
    • “Visibility“ — a page can be set to Public, Password Protected or Private. This is an advanced feature. You will rarely, if ever, need to change a page’s visibility.
    • “Revisions” — WordPress stores every version of your web page that has existed since you created it in the Revisions tool. Every time you hit the “Update” button, WordPress creates a new copy of your page in Revisions. This is an advanced feature.
  • Page Attributes – This box includes controls for setting how your page will appear in your website’s main navigation, to set the main template used for the page’s layout, and to control whether users must be logged into MyBSU or MyNTC to view your page.
    • “Parent” pulldown — A parent page houses a child page, and a child page becomes an expandable menu item under its parent. Pages in your site’s main navigation are listed as “no parent.” Note: a website should not have more than 6 or 7 parent pages.
    • “Template“ pulldown — Change the template being used by your page. This is an advanced feature.
    • (unlabeled box) — the integers in the box under the Template pulldown menu control the order in which pages appear on your main navigation. This is an advanced feature.
    • “No authentication required” pulldown — this menu will let you choose whether or not a viewer must be logged into MyBSU or MyNTC in order to see the contents of the page. This is an advanced feature.
  • Secondary Content Column – Secondary Content is explored in WordPress 105.
  • Sidebar Column – The Sidebar is explored in WordPress 105.
  • Featured Story – This is used to identify a Post to be featured on your website’s homepage. Posts are explored in WordPress 201.

104: Basic WordPress: Creating a New Page
There are several ways that you can add a page to your website:

  • From your dashboard, hover over the “+New” link in the top-bar navigation and select “Page” from the flyout menu.
  • From your dashboard, hover over “Pages” on the right-hand navigation menu and select “Add New” from the flyout menu.
  • From the Page editor, use the “Add New” button next to the “Edit Page” title.

Creating a new page will open a new Page editor, which was explored in WordPress 103.

105: Basic WordPress: Secondary Content Column and Sidebar Column

  • Secondary content columns – Content in this field will always appear in a separate column to the right of the main content box text. This is a good place to put quick links, a form or an image.
  • The sidebar column is where you should place contact information for your department or office. This will appear immediately under the page’s main navigation. Sidebar content must be set separately on every page of your website.

WordPress 200 Series: Photos, Documents and Video

201: How to add video to a page
WordPress makes embedding videos very easy. However, the video will need to be hosted on YouTube or Vimeo. WordPress does not currently support mp4 (video) uploads. Copy the video’s URL and navigate your site to the webpage that will hold the video.

Situate your cursor where you want the video and paste. The video will automatically generate in the editor and will be embedded into the page.

Select the blue “update” button near the top right corner. If this is a new page, the blue button will say “publish.”

202: How to add an image to a page
You can add images to a webpage when you are in the editor’s suite. Images can be placed main content box or the secondary content column.

Click “Add Media.” This will prompt a Media Library upload option. If you are uploading a new image, you can drag and drop a photo into the designated upload space or select the file from your desktop using the link “Select Files.” If the image already exists with your media library, select “Media Library” under the “Add Media” title.

Upload or select the image you would like to insert into your page. Once selected, an “Attachment Details” menu will appear to the right of the image (see image to the right).

Using the “Attachment Details” menu briefly provide some basic information about your image in this menu.

  • Title – The title field allows you to provide an image title that is used internally to sort images in the Media Library.
  • Caption – This is the text that you want to display with your image. It will appear in a transparent box at the bottom of the image on the webpage.
  • Alt text – Alt text or alternate text can reflect the same text as the caption field and is displayed when a user’s browser is unable to locate an image. Search engines like Google also use alt tags as a ranking factor in their image search results.
  • Description – You can enter as much information as you want in the description field. You can even add links in the description field.

If you want to replace the media file, you can do that in the “Attachment Details” menu using the “Upload a new file” link.

At the bottom of the “Attachment Details” menu you will see “Attachment Display Settings.” Here you can designate:

  • Alignment – Use this to tell your image where to appear on the page. You can align left, center or right.
  • Link To – This tells your image how to behave when clicked on by a user. You can link to a media file, an attachment page or a custom URL. Media files and attachment pages will prompt a photo pop-up. Custom URLs will point the user to a different site. If using a custom URL please be sure to use a live link.
  • Size – Image sizes range from thumbnail to large size.

Select “Insert into post.”

203: How to edit photos in WordPress
You can edit photos in the file’s attachment details which can be reached using one of two ways.

  • Option 1: Enter your media library and click on the photo you would like to edit. This will prompt the attachment details box.
    • Click “Edit Image” and you will be brought to the internal editor where you can crop, rotate or resize your image.
  • Option 2: If you want to edit a photo that is already embedded in your site, simply click on the photo. This will prompt a small menu of actions – click the pencil icon.
    • Click “Edit Original” and you will be brought to the internal editor where you can crop, rotate or resize your image.

204: How to link a .pdf document to text
There are two ways that you can link a .pdf to content on your website. Both processes will work very similarly to when you hyperlink a URL to web content, but instead of using an outside URL, you will be using a media-personalized URL that is generated by WordPress. To find that URL, first navigate to the page in which you want to embed a .pdf and enter the backend editor. Make sure that you are logged into your MyBSU or MyNTC so that you have access to your pages.

  • Option 1: Identify the text within which you would like to embed the .pdf. Highlight and copy the text, then click the button above the main content field titled “Add Media.” This is going to prompt a new window to appear, where you can upload photos or documents to your Media Library or access the files that have already been uploaded. You do not need to upload your files prior to this step.
    • Click on the .pdf or media file that you would like to attach to the text you previously highlighted.
    • Clicking the file will prompt the “Attachment Details” box, click the blue “Insert into post” button in the bottom right corner.
    • This will bring you back to the main content field and you will see that your highlighted text has now changed to the title of the .pdf. Don’t worry, this is why you copied the text.
    • Click the newly embedded link and you will see a pencil icon appear. Click the pencil icon and then click the gear icon.
    • The “Insert/edit link” box will appear, paste your clipboard into the text field following the “Link Text” identification.
    • Select “Update” and your .pdf file will be linked to your original text.
  • Option 2: When you are in the backend editor, click “Media” in the left navigation panel. This will bring you to your media library.
    • Identify or upload the .pdf or media file you want to embed into your page and click on it. This will prompt the “Attachment Details” box. Copy the custom URL. You can do this by double clicking the actual URL and clicking Cmd C or positioning your curser in the URL box and using Cmd A to highlight all and Cmd C to copy.
    • After you have copied the URL, return to the page where you want to embed the .pdf.
    • Highlight the text you want linked and click the hyperlink icon in the toolbar. This looks like a paperclip.
    • Paste the URL when prompted and click the blue arrow to secure the link.

205: How to build a photo gallery
Once you have navigated to the site you would like to edit and enter the editor’s suite, you are now equipped to make edits and add a photo gallery.

In your main content box, situate your cursor where you would like to embed the photo gallery and click “Add Media”.

This will prompt a pop-up of your site’s media library. In the left hand column, click “create gallery”. Select your gallery photos and make certain that all photos have a caption, alt text and description. Alt text is required to be ADA compliant.

Click “create a new gallery” in the bottom right corner and an “edit gallery” screen will appear.

Ensure that the “link to” field is set to “media file” and click “insert gallery.

Select the blue “update” button near the top right corner. If this is a new page, the blue button will say “publish”.

206: How to replace a document or a photo
This process is fairly simple, however when updating documents, please consider using this filter to identify documents that may be crucial to BSU’s or NTC’s general archive:

    • Are you replacing a .pdf or media file that has minor grammar/spelling errors?
      • If so, feel free to replace the document without archiving the original.
    • Are you replacing a strategic plan or outdated plan of action, mission statement, etc. with a revised, up-to-date document or media file?
      • Do you have the original or historical document archived somewhere?
        • If no, please download and archive the original document.
      • Will BSU/NTC or a successor benefit from having the archived data?
        • If yes, please download and archive the original document.

After using the above filter and are prepared to move forward with replacing the .pdf or media file navigate to your media library in the backend editor of WordPress.

Identify and click on the outdated .pdf or media file. This will prompt an “Attachment Details” box with a section where you can replace media. To replace the current file, click “Upload a new file.”

You will be brought to a new “Replace Media Upload screen” where you can upload the new file using the “choose file” button.

You should almost always use the “Replace the file, use new file name and update all links” designation. This will update the document, the title AND it will update all links pointing to the document throughout the BSU/NTC multiverses.


WordPress 300 Series: Intermediate Page & Post Management

301: How to point a page to another page
Pointing or redirecting pages in WordPress is a helpful feature when you want to redirect users from your site to another. For example, the American Indian Resource Center’s main navigation has several pages that redirect to other sites within the BSU multiverse. The child pages in the example to the right are great examples of how to utilize the page-redirect tool:

    • “New Students” points to BSU’s undergraduate admissions site.
    • “Transfer Students” points to the transfer student admissions site.
    • “Graduate Students” points to the graduate student admissions site.

This tool eliminates the need to duplicate content throughout the BSU/NTC website, which also means less work for you!

To use this feature in your site, enter the editor’s suite of the page you want to direct to another, scroll to the bottom of the page where you will see a “page links to” field.

Select “A custom URL” and enter the URL to which this page will now be redirected.

Select the blue “update” button near the top right corner. If this is a new page, the blue button will say “publish”.

302: Editing faculty/staff listings
Many sites within the BSU/NTC website multiverse use a faculty/staff widget that pulls information from the directory managed by Human Resources. If this widget is activated on your website and you have a page dedicated to the faculty and staff for your department, the page itself will appear empty. This means that there will not be a faculty or staff listed in the main content box of the faculty/staff page.

You will be able to tell if the widget is activated because “faculty/staff listing” will appear in the main navigation of your site’s dashboard. It is here that you will manage your department faculty and staff. If you do not see the faculty/staff listing in the left-hand navigation as imaged above, contact Rachel.

When you click on “faculty/staff listing” you will see the current listing of faculty and staff for your department. You can click on individual names to enter the editor for that listing. Note: You will only be able to edit titles i.e. chair, director, adjunct, professor, administrator, staff etc. in this field. All directory changes need to be requested through HR.

You can remove someone from the existing list by hovering over their name and clicking “trash.”

You can add someone by clicking the “add new faculty or staff” link at the top of the page or in the left-hand navigation.

Enter the name of the faculty or staff member in the “enter BSU username” field. If you start typing, the widget will auto generate individuals that you can choose from. When you select the faculty or staff the “basic information” field will populate with that person’s directory information.

Before the faculty or staff member is added to the list you must designate their “grouping.” This field will appear either below the basic information or on the right-hand side. Choose a category and special title (if applicable).

Select publish and you have added this individual to your list. If you have questions about the faculty/staff listing or want to learn more, contact Rachel.

303: How to assign parent pages
Parent pages are the main navigation items on your page. They are indicated in red in the image blow. You can create child pages of parent pages easily by assigning parenthood in the backend editor. A child page is indicated in yellow in the image below.

You can designate the parent when you create the page or after by simply entering the backend editor and using the “Page Attributes” content box. Under “Parent” click the drop down menu. This will prompt a list of all your site’s existing pages.

Identify and click on the appropriate parent.

*Hint* You can also use the “quick edit” feature described in WordPress 303 to designate parenthood.

304: How to organize your website menu
Organizing parent pages is a little more difficult than assigning parent pages. When you are in the backend editor, navigate to “Pages” in the left-hand navigation panel. This will display all of your pages in list form. Those with a dash before their page title are child pages of the pages that precede them. See the diagram to the right.

The red boxes indicate parent pages – also referred to as your website’s main navigation items – and the green boxes indicate child pages of preceding red parents. You can assign parenthood by following the steps in WordPress 302.

Hover your curser over the page you want to move in the main navigation of your website, this will prompt a small menu of actions. Click “quick edit.”

When in the quick editor, you can change the order that the page will appear in the site’s main navigation by changing the number in the box preceding “order.”

Be sure to click “Update” after making changes in the quick editor.


WordPress 400 Series: Advanced Page & Post Mgmt + Gravity Forms

401: How to create a news (blog) post and use it on your site

First: what is the difference between a post and a page?

  • Pages (indicated in red below) appear in the main navigation and guide users to where they want to be on your site.
  • Posts (indicated in yellow below) are used to relay important or exciting news and can be displayed within pages. They can never stand alone in the main navigation.

*Note* By default, all posts live in the news page of your website.
There are several ways that you can add a news post (or blog post) to your website and it works very similarly to how to you add a page (WordPress 103). First, log in to MyBSU/MyNTC and hover over the WordPress icon in the top left corner. A drop-down menu will appear, navigate to your site and select “dashboard” in the right-hand fly-out menu.

  • Option 1: When you are in your sites dashboard you can hover over the “+New” link in the top navigation bar which will prompt a fly-out menu. Here you will be able to select “post.”
  • Option 2: You can also hover over “posts” on the right-hand navigation menu which will prompt a fly-out menu. Here you will be able to select “add new.”
  • Option 3: If you click on the “posts” in the right-hand navigation menu, you will see a blue button labeled “add new” at the top of the page. You can click this to prompt a new post editor.

You will find that when you are in the editor of a post, it will look like you are creating a new page. Be certain that you are creating a new post and not a new page. When you are in the post editor, you will see:

  • Post Title – This is your headline.
  • Add Media – This is where you can upload photos or documents to your Media Library.
  • Add Post Element – Ignore this.
  • Add FormTo learn more about forms see WordPress 404 or contact Rachel.
  • Editor’s Toolbar – This is where you can format and design text.
  • Main Content Box – This is where your content lives.
  • SEO Meta Description – In 160 characters or less, what is this post about?
  • Excerpt – copy and paste the first two sentences of your post.
  • Page Links toSee WordPress 204
  • Format – Choose what type of post you want this to be. Each option will display differently on your news or landing page.
  • Featured Image – place a photo to accompany your post. You will need a featured image for a post-preview like the one on page 1.

When you are ready to publish this item to your site, select the blue “publish” near the top right corner. If you have a news page on your site, this post will automatically appear in your news feed. If you do not have a news page or you want to add your posts to other pages on your site, contact Rachel for private training.

402: How to add an anchor link (page jump) to your website
WordPress anchors are helpful when you have want to give the user the opportunity to quickly jump to a specific location within your site. One of the biggest advantages of using anchor links is that they can create a better user experience when browsing your site. This is especially true when it comes to pages that have lengthy content and scrolling can become a pain. Using anchor links will allow the user to instantly jump to the section that they are interested in.

To embed an anchor onto your website you first need to create the anchor. To do this, situate your cursor at the anchor link destination. *HINT* – place the anchor one line above the destination content. WordPress anchors jump to the anchor link line and sometimes this can cut off content.

When you have placed your cursor in the anchor link destination, click the anchor icon in the toolbar. The icon looks like a small flag.

You will then be prompted to enter the anchor title. Titles must be:

  • Lowercase letters only.
  • Separated by underscores if spaces are needed. Spaces are not recognized in anchor links.
  • Punctuation free.

When you have entered your anchor link title, click “OK”.

You have now placed the anchor. Anything linked to this anchor will jump to this point of your website.

To apply the anchor, highlight the text that will direct traffic to your anchor and click the hyperlink icon in the toolbar. This icon looks like a paperclip.

Place an ampersand (#) followed by the anchor link title.

403: How to build a form and use it on your website
In WordPress, submission forms are called “Gravity Forms.” You can access your website’s gravity forms by entering the back-end of your website and clicking “forms” in the left navigation.

To create a new form, first enter your website’s dashboard. Once there, you can create a new form by:

  • Hovering over the “+New” link in the top-bar navigation which will prompt a fly-out menu. Here you will be able to select “form.”
  • Hovering over “forms” on the right-hand navigation menu which will prompt a fly-out menu. Here you will be able to select “new form.”

If you click on “forms” in the right-hand navigation, you will be brought to your master list of forms. To create a new form from this page, click the “add new” link.

When creating a new form, you will first be asked to submit a form title and form description. Enter this information and select create form. Descriptions are optional.

The WordPress gravity forms walk you through the process of adding entry fields to your form when you first enter the form editor – you will first be asked to select a field type using the options provided in the “Standard Fields,” Advanced Fields,” “Post Fields” and “Pricing Fields”. Simply click on the fields that you want to include in your form and they will appear in your form body. I encourage you to look at all the field options before adding any to your form body to know what WordPress has to offer!

To remove fields from your form, hover over the field and click the blue X in the top right corner. You can also delete the form entirely by clicking the “move to trash” link below the field options.

You will be able to customize each field by clicking on it in your form body prompting a drop down menu with customization options.

When you have built your form, click the blue “update” link to save.

Once you have created your form, you will need to embed it into your website. Navigate to the page where the form will live; sometimes forms should stand alone on their own page. If this is the case for your form, you will need to create a new page (WordPress 103) and assign parenthood (WordPress 302.)

Enter the page where you want to embed the form and situate your curser where the form should appear. Forms can live in the main content box or the secondary content box.

Click the “add form” link. Select your form and click “insert form.”

Update your page and your form will be live.

If you have questions about forms or want to learn more advanced form skills, contact Rachel.

404: Customizing form notifications
WordPress automatically generates a default confirmation and notification system for gravity forms and they can be found in the settings menu of each gravity form.

By default, each form submission is sent via email to all of your website’s editors. This means what every submission will be emailed to everyone who has access to your website. The default email subject line is “New submission from {form_title}” and it will appear to be sent from the WordPress admin email. These fields are customizable by clicking “notifications” (as imaged above) and navigating to the “admin notification” page.

You will find small drop down menus below most of the available notification fields, this is where you can customize the notification to your liking.

If you have questions about forms or want to learn more advanced form skills, contact Rachel.