Welcome to the DeGroote WordPress Training Guide for Editors. This guide will help to prepare you for working on DeGroote WordPress websites. Once you have read through, if you have any questions please email the Marketing and Communications team.
Make sure you connect to the McMaster VPN via Cisco Anyconnect before you start this process.
You may get an email from WordPress to complete your setup. If not, a member of the team will let you know your account has been created.
Your login is your MacID and password.
You’ll be asked to set up Two-Factor Authentication (2FA):
Please use TOTP Authenticator App as your default 2FA, and Fallback Email as your backup. See the image below for reference, and use your own email.
We suggest you use the Microsoft Authenticator App to set up your codes, as it is the same one you use with your MacID Authentication.
Below is a step by step guide on how to setup your Authenticator App for websites.
At DeGroote we have over 30+ websites. The full list of DeGroote websites is available here.
Basic Steps
Connect to the McMaster VPN via Cisco Anyconnect.
When logging in to any website you navigate to the URL + /wp-admin.
For example: https://degroote.mcmaster.ca/wp-admin
Enter your MacID and password.
Provide your 2FA code using your generator (ex. Microsoft Defender).
Be sure to bookmark the URL+ /wp-admin for easy access in the future.
Here is a helpful video of the steps to watch:
If you are having issues and cannot log in, review the below:
Check if you are you connected to the McMaster VPN
Do a hard refresh on your browser to clear cache:
Chrome/Firefox/Edge: Hold down Ctrl and press F5.
Safari: Hold down the option and command key then press the ‘E’ key.
Ensure you logging in from the home page of the website plus /wp-admin
Ensure your 2FA code matches the server your website is on (new vs. old)
If you are having trouble and try to use "Fallback Email Code" and don't get an email, check your Microsoft Defender Quarantine spam inbox as UTS is marking these emails as spam
Still stuck? Email Us!
Once logged in, you will be directed to the WordPress dashboard that will look similar to below:
Folks will find various menu options on the left side based on their Role access, including:
Media: Upload and manage images and files, ensuring ALT tag use
Pages: Edit existing pages or create new ones.
Events: Create and manage events.
Articles: Create and manage articles
Bulletin Posts: Approve and post student bulletin posts
Bulletin Email: Create weekly student bulletin emails
Comments: Review and approve or reject post comments
Profiles: Create and manage DeGroote profiles
Site Kit: Shows a snapshot of the website GA4 analytics
Forms*: Manage forms and submission lists
Users*: Manage user accounts and permissions.
Plugins*: Manage website plugins
* is an Admin only area
Familiarize yourself with these sections to effectively navigate the platform.
The most commonly used areas of the menu are: Media and Pages.
Media allows you to load images and documents to use on the websites.
Pages allows you to navigate to any specific page within the website to edit content.
Some websites have specific or unique posts types, and in those cases the Marketing and Communications Digital team will share unique user guides.
Most people using our WordPress websites will have an Editor Role, which allows them to manipulate content, copy, images, and to use shortcodes.
The design of the DeGroote websites allow a certain amount of flexibility for editors, specifically as it relates to updating copy and images on our websites.
Some high level steps on how to edit the copy and images on a page are as follows:
Go to Pages in the dashboard.
Click on the title of the page you want to edit.
Use the editor to modify text, add images, or change formatting.
To add an image, click on the Add Media button and upload or select an image from the media library.
Ensure when loading images or PDF's to the Media Library that you complete the Alternative Text (see below). This is key for AODA compliance and SEO performance.
Once you’re satisfied with the changes, click Update to save.
Here is a more detailed and visual guide you can follow along to see how to edit/add images and copy.
WordPress | Editing Images and Copy on a websiteBy using hyperlinks for navigation and non-critical actions and reserving buttons for high-priority interactions, you can create a user-friendly website that aligns with best practices.
Use a Hyperlink When:
Navigation to Another Page
Providing Additional Information
Inline Text Links
Secondary Actions
Use a Button When:
Call-to-Action (CTA)
Triggering a Dynamic Interaction
Form Submission
Primary Navigation on Action-Oriented Pages
For instructions on how to add a hyperlink or button please see the detailed guide below:
WordPress: Choosing the Right Click: Hyperlink or Button?While PDFs can be useful for sharing detailed information, they are not fully accessible for all users and devices. For this reason, we aim to limit their use on our website and prioritize providing content directly on the page whenever possible. When the are required, this is how to load and link the files.
To upload a document to link on a website page you’ll first need to add the file to the Media Library in WordPress. Here’s how:
In the WordPress dashboard, go to Media > Add New.
Upload the document from your computer. Ensure you add the 'Caption' text.
Once uploaded, click on the file in the Media Library to open its details.
You’ll see a File URL on the right — copy that link by using 'Copy URL to clipboard'
Go to the webpage where you want the outlines listed, edit the page, and use that copied URL to replace the hyperlink text.
If you need to create a new hyperlink you should ensure you follow the steps to question if this should be a hyperlink or a button!
Here is an image of where you see the URL:
An anchor link is a clickable text or image that directs a user to a specific location on a webpage, document, or email. They are also known as jump links. Anchor links improve the user experience by making it easier to navigate long documents.
They are added into copy blocks using anchor tags in HTML code, and on the website side are represented by using /#anchorname on the URL as a suffix.
For example: www.degroote.mcmaster.ca/#anchorname
View the guide below for steps on how to create an Anchor Link:
WordPress: Add anchor links to a website pageWhat is shortcode?
Shortcode is a specially formatted text tag that opens and closes with square brackets and can be placed directly in a post or a page of your blog. This tag is automatically interpreted by WordPress and allows you to add "code like" features without having to program code.
For our websites we have a shortcode library the Editors can use. The shortcode is placed within WordPress copy blocks, just like text would be. The most commonly used are below:
[degroote_button url="https://www.degroote.mcmaster.ca/" target="_blank"]Connect with us [/degroote_button]
How to use:
Replace the URL (https://www.degroote.mcmaster.ca/) with where you want to button to go, ensure you leave the quotations in place
Replace the Connect with us placeholder with whatever copy you would like
[degroote_accordion_container][degroote_accordion title="Test Accordion"]
This is an accordion shortcode
[/degroote_accordion][/degroote_accordion_container]
How to use:
Replace the Test Accordion placeholder title with whatever copy you would like as the closed view
Replace the This is an accordion shortcode placeholder with whatever copy you would like seen when the accordion is expanded
You can nest several of these in a row to create a group
[degroote_blockquote author="Dan Livingstone" source_title="Test Blockquote"]
This is a blockquote shortcode
[/degroote_blockquote]
How to use:
Replace the Dan Livingstone placeholder name with the real persons name
Replace the Test Blockquote placeholder with either a job title, company, or student program information. Whatever helps furthur illustrate the person giving a quote
Replace the This is a blockquote shortcode placeholder with whatever copy you would like seen when the accordion is expanded
[degroote_video title="DeGroote School of Business" url="https://www.youtube.com/embed/xEUOlaEb3tY?si=DEKlkXXZ43FhIvSI"]
How to use:
Replace DeGroote School of Business placeholder title with a description that matches the video. This is for accessibility purposes, so please ensure something relevant is chosen.
Replace the URL, ensuring you use an embed version.
To ensure you get the correct URL from YouTube for this embed please follow the below guide:
Embedding a YouTube video: Get the embed linkProfiles require a lot of information to be accurate and up to date. To ensure this process is as easy as possible, aspects of the content population flows in from three different areas:
HR's Employee Management System (EMS)
McMaster's MacExperts Profiles
DeGroote WordPress Backend
Some helpful Profile related guides are below:
All About DeGroote Website ProfilesWhat DeGroote profile information can be edited on WordPressUpdate Faculty Profile with YouTube Video LinksWe have specific image sizes for content based on the content block. To help streamline our work we only use 3 size formats.
943 pixels wide by 707 pixels high is used only for page header banner images.
1920 pixels wide by 1080 pixels high is used for article headers, CTA blocks, left/right aligned image/text layouts.
1080 pixels wide by 1080 pixels high is used for all profile images and contact us blocks.
Outlined below you will see an example of images in use, and can find more via our Content Block Library (must be on VPN).
If you are ever unsure of the image size please reach out to us and we can assist.
In the case that you have images, but in the wrong size - below is a video on how to create custom sized images in Canva for free.
The Marketing and Communications team will own many aspects of SEO, but as editors on WordPress you have the ability to help (or harm) SEO too.
The best way for all editors to help is to:
Ensure ALT text is on all images loaded and done in a correct manner
Avoid the use of overly large files (eg. huge PDF’s) that slow load time
Ensure copy is written in 3rd person and keywords are worked in
We have a great article on simple tips for SEO you can read to expand your knowledge!
All DeGroote websites have a error reporting tool which can be used to report code related issues our WordPress Editors cannot fix.
Our tool allows us to collect screen recordings and annotated screenshots to understand user problems. This is done via the custom "Report Web Issue" button anchored to the right side of our websites.
If there is a critical website error that needs to be fixed by the Marketing and Communications team (ie. a broken page, missing file download) please use the error reporting tool.
Please note, this is NOT how to request additional or new work. You can watch a video on how to use the reporting tool below:
To ensure the best work possible, we have a dedicated process for all website builds.
Regardless of project scope, this helps us ensure quality. Work can be things like; an additional content block, adding a single page, or requesting a whole new site etc.
The process starts with understanding the reason behind of your ask. Delving into the goals and scope, answering the why, what, and how behind its objectives. Identifying the purpose of a website or webpage involves:
Clarifying the overarching goals
Asking why the site is being built and who it is for
Strategizing on how to achieve these aims effectively
The process of planning kicks off with our website submission form, which is then evaluated, and a meeting is booked to better dig into the timeline request and SOW design.
The current workload and available team resources will determine project go-ahead.