Relative links

A relative link is a partial URL that points to a page in relation to the current one. The WMS recognizes that the relative link belongs to the same site, so the “mcgill.ca/sitename” part of the URL is not required. We recommend using relative links when pointing to pages that are located within your own WMS site. This will be useful if you use a staging site or change the site URL.

For example, if you are editing the home page of your website https://www.mcgill.ca/sitename and you want to link to another page within your site, such as the Contact page, you can enter the URL as: 
<a href="/contact">Contact</a> 

If you are linking to the French version of a WMS page, you must include /fr/ in the URL.

Always test the link to ensure it works as expected.

Examples of relative links:

• Home page: <a href="/"> (including a / takes you to the English home page of your site)
• French Home page: <a href="/fr"> (including a /fr takes you to the French home page of your site, e.g., mcgill.ca/sitename/fr)
• First-level page: <a href="/about-mcgill"> (e.g. mcgill.ca/about-mcgill)
• French first-level page: <a href="/fr/about-mcgill"> (e.g., mcgill.ca/sitename/fr/about-mcgill)
• Second-level page: <a href="/about-mcgill/history"> (e.g., mcgill.ca/sitename/about-mcgill/history)
• French second-level page: <a href="/fr/about-mcgill/history"> (e.g. mcgill.ca/sitename/fr/about-mcgill/history)

Note: Relative links in the URL field of blocks and the path field of menu items must not include a slash at the beginning, or else you will see an error that the link is invalid. (The WMS has a built-in filter that adds the slash for these fields.)  

---

Absolute links

An absolute link includes the whole web address (URL). Absolute links should point to another McGill website or an external site outside of McGill.

Example:
For more information, visit the <a href="https://www.gg.ca/">Governor General's website</a>.

---

On This Page block and anchors in the WMS

You can use the On This Page block to create a set of links to any anchors you have defined within the page. In smart mode, it links any H2 or H3 headings on your page. You can place the block in any of the block regions (right sidebar, top of page, top of content, bottom of page, bottom of content). 

---

Linking to content in tabs or accordions

It is possible to link to content in a specific tab or accordion that is not open by default.

Linking to a tab

1. Click on New Draft
2. Click on the Source button in the WYSIWYG toolbar to see the HTML
3. Look for the following code that provides the tab navigation:
   <ul class="tab-nav">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
</ul>

4. Add an anchor to the link corresponding to the tab you want to link to. In the example below, the word mylink was added to the third tab-nav link:
   <ul class="tab-nav">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#mylink">Third</a></li>
    <li><a href="#">Fourth</a></li>
</ul> 

5. Find the <div> that contains the tab content you wish to link to. In this case, you would find the <div> above the third <h2> heading:
    <div>
   <h2>Third</h2>

   <p>Aenean sapien massa, consectetur nec pretium sed, blandit in orci. Cras imperdiet egestas urna, sagittis euismod leo accumsan nec. Nullam vitae quam sit amet enim feugiat dictum. Ut gravida nisi at metus luctus condimentum elementum elit lobortis.
6. Now add an id to the <div> using the same text you used for the anchor:
   <div id="mylink">
   <h2>Third</h2>

   <p>Aenean sapien massa, consectetur nec pretium sed, blandit in orci. Cras imperdiet egestas urna, sagittis euismod leo accumsan nec. Nullam vitae quam sit amet enim feugiat dictum. Ut gravida nisi at metus luctus condimentum elementum elit lobortis.
7. Save and publish your draft
8. You may now link to the specific tab by specifying the page URL and just adding #mylink (e.g., www.mcgill.ca/sitename/tabbed-content-page#mylink)

Linking to an accordion

1. Click on the New Draft tab
2. Click on the Source in the WYSIWYG toolbar to see the HTML
3. Look for the following code that provides the accordion:
      <div class="accordion">
       <h3><a href="#">Title A</a></h3>
           <div>
               <p>Content A</p>
           </div>
       <h3><a href="#">Title B</a></h3>
           <div>
               <p>Content B</p>
           </div>
       <h3><a href="#">Title C</a></h3>
           <div>
               <p>Content C</p>
           </div>
       <h3><a href="#">Title D</a></h3>
           <div>
               <p>Content D</p>
           </div>
   </div>
4. Add an anchor to the link corresponding to the accordion div you want to link to. In the example below, the word mylink was added to the Title A <h3> link:
      <div class="accordion">
       <h3><a href="#mylink">Title A</a></h3>
           <div>
               <p>Content A</p>
           </div>
       <h3><a href="#">Title B</a></h3>
           <div>
               <p>Content B</p>
           </div>
       <h3><a href="#">Title C</a></h3>
           <div>
               <p>Content C</p>
           </div>
       <h3><a href="#">Title D</a></h3>
           <div>
               <p>Content D</p>
           </div>
   </div>
5. Save and publish your draft
6. You may now link to the specific accordion by specifying the page URL and just adding #mylink, e.g., www.mcgill.ca/sitename/accordion-content-page#mylink

Related articles

• Use Accordions to style content in the WMS
• Vertical and horizontal tabs in the WMS

---

SMS and telephone links

You can apply a link to a telephone number so that when clicked, it either opens the text messaging application or the telephone application on a user’s mobile device, depending on which protocol you specify. The user will then be able to type a text message to the number or be prompted to call the number.

In the WYSIWYG editor:

1. Either:
   
   1. Place your cursor where you would like to insert a link and click the link button in the WYSIWYG editor’s toolbar, 
      or
   2. Type the text to be displayed as the link, highlight it using your mouse, and then click the link button in the WYSIWYG editor’s toolbar
2. In the Link dialog box that appears, the fields in the Link Info tab should be populated as follows:
   
   • Display Text: This is the text that will display as the link
   • Link Type: Choose URL
   • Protocol: Choose <other>
   • URL: Depending on whether the link should be used for an SMS text message or a telephone call, enter the following:
     
     • sms:+15143983398, or
     • tel:+15143983398
3. Click OK.

In the HTML source view:

Type the HTML with the following syntax:

• SMS link:
  <a href="sms:+15143983398">Text us at 514-398-3398</a>
• Telephone link:
  <a href="tel:+15143983398">Call us at 514-398-3398</a>

---

Aliases

We recommend setting custom aliases for each page in your site so the URL and URLs of all sub-pages will not dynamically change if you decide to change the title of your page. You can use the alias in a relative link or absolute link. When creating an alias, avoid using the underscore character (_) because it often looks like a space when a URL link is underlined. We recommend using a hyphen rather than an underscore when creating the alias.

If you move a page within your site's menu structure, the URL (and any sub-pages) will change to reflect the new path.

---

Node IDs

In the WMS, there is a unique identifier for each piece of content on a site called a "node ID."

It is possible to create absolute or relative links using the node ID. However, node IDs are not recommended for linking to pages because the URL is not user-friendly or accessible. A link to a node number (e.g., www.mcgill.ca/sitename/node/123 ) doesn’t inform visitors of what to expect, whereas a link that contains a descriptive alias (e.g., www.mcgill.ca/sitename/about ) does. Furthermore, when a page’s URL alias is changed, a redirect is automatically created so that no broken links will occur.

Blocks, however, will not be automatically placed on the same page when a URL alias changes, so using node IDs is recommended for placing structural elements such as blocks. By referencing the node ID, they stay associated with the node even if the alias changes. Otherwise, the page visibility settings of blocks need to be manually updated if the page where they were set to display was referencing an alias.

If you reference the node ID, you need to keep that node published; do not attempt to create a new page in the future to replace the old one, or else the reference will be lost.

To find out the node ID of any page:

1. Navigate to the page
2. Hover your mouse over the Edit tab, and the node ID will appear in the status bar of your browser

The node is also listed in My Workbench.

The node ID is different for the English and French versions of a page; you must repeat the instructions above for both versions and ensure you include /fr/ in the link so that the rest of the page (navigation, title, footer, blocks, etc.) also appears in French (providing you have already created a French version of that content).

---