WordPress Guide

The 2U theme consists of multiple customized blocks. There are several Gutenberg blocks that we can use such as image, button, columns. It is recommended that we only use 2U theme blocks as those are more customizable and are being constantly improved. For example, we use: button group (not button), column builder (not columns), 2U image (not image).  

You can add blocks by:

To check which block you have selected, you can look at the bottom left corner of the window. This is especially helpful when adding new blocks to already existing blocks or deleting blocks embedded in other blocks.

For an easy block navigation, you can also select block navigation (the three lines button on top of the edited page.)

To delete unnecessary blocks, in top navigation, click block navigation + delete on keyboard.

To manage reusable blocks, click on the setting icon on the top right corner and select manage reusable blocks. Keep in mind that once you make a change to a reusable block it will change this block in all pages it exists. If you want to use the reusable block as a template block, transform it to a regular block.

Global theme settings ae pre-configured, however, if we sometimes make adjustments such as adding a missing theme color, section width. We may also change Header and footer settings from here.

IMPORTANT: Clicking “New” in the top admin bar creates a new post. To create a new page, make sure you select “New Page” from the dropdown or go to the dashboard sidebar and under pages – add new.

First thing you will add to a new page is a page title. Note that the page title you insert into a new page is NOT an H1 but it is a title documented in the WordPress backend (all pages.) You will need to add H1 manually.  

Once you added the Page Title and saved clicked “Save Draft” in the upper right corner next to the “preview” and “Publish” buttons the Permalinks section will appear in the right panel, so you can adjust the page slug. Remember: only include page slug in Permalinks section, not full URL.

Further down the right panel, you will see Page Attributes. Here is where you will set the Parent Page. Setting this here will also automatically update the Page URL. To QA, once you’ve set the parent page, review “View Page” URL in the Permalinks section to make sure full URL is correct

Clicking “New” in the top admin bar creates a new post. To create a new page, make sure you select “New Post” from the dropdown

There are two page types:

Depending on a site you are working on and section settings in the theme settings we have an option of : normal, wide, narrow, and extra narrow.

There are two ways of copying a page.

Once we receive a Jira ticket with all the details (including copy docs, images, xd file, URL and instructions) we can start the staging process. The page/post cannot go live until the staging version is approved by the ticket stakeholder. When staging a page/post ALWAYS save one as a draft and allow public preview. The link for the preview is valid for 7 days. If the link expires and the stakeholder cannot access the stages page you created, please uncheck the public preview and generate a new preview link.

When a page or post are live and you change the permalinks in the right sidebar settings, a redirect will be automatically generated by YOAST. NOTE: If you are working on a new page/post and you realize you made an error in the permalink settings, and you published the page, you can make that page/post a draft, then change the permalink settings and publish again with the correct URL.

If you are being asked to delete a page/post and create a redirect, go to the dashboard->Yoast SEO-> redirects.

You can create and modify menus through a dashboard under appearance -> menus. Menu structure on WordPress is set up as drag and drop. You can also add custom links to the menu.

Sidebar menu is automatically generated. Depending on what order you set up for the page to be, it will reflect on the sidebar menu. In this case order is set up to be 1, therefore this page will show as first under the parent page. NOTE: all pages belonging to the same parent page must be numbered in order to show up properly in the sidebar. If you are adding a new page with order 2 for example, you would need to change the order of the remaining pages under that parent page.

Generally, all pages (not posts!) should be on the top and side navigation. Please always ask in the ticket if the page you are working on is ready to be placed on the nav and what level page should be placed at.  If a page is set as No index, No follow it should never be in the mav.

Pages not included in the nav include faculty pages, courses, students, alumni and No index, No follow pages (eg. thank you pages).

Add the following ‘tags’ to hide from navigation

In order for you to create a permalink, you need to first set a new page as a draft. Permalinks consist only of words/numbers and dashes.

For accessibility reasons, breadcrumbs are compulsory on our sites. There are however some exceptions. These might include thank you pages or PLPs. There should be information about breadcrumbs in the Jira ticket.

If you are asked to hide breadcrumbs (or navigation-very rarely), change page settings (right settings sidebar).  

Links that are internal should open in the same widow. We use relative links inside our sites. (eg. /admissions/). Always preview changes and make sure the link works.

External links should always open in a new window.

We often use anchor tags on our sites. In order to tag a word or a sentence select it as if you would be creating a link and input #anchor-title. Then select a word or a sentence it should link to on the page and click on it. You will then need to go to that particular block settings and on the very bottom add HTML anchor.  In this case it would be anchor-title (no #).

NOTE: an anchor tag for back to the top is just a single #.

We use a code to generate footnotes. Click the three dots and “edit as HTML”. After making the changes you can click the dots again and “edit visually”

Footnote:

^{<a href=”#fn1b” id=”fn1″>1</a>}

Footnote reference:

<li id=”fn1b”>your footnote content.<a href=”#fn1″><i class=”material-icons”>arrow_upward</i><span class=”u-srText”>Return to footnote reference</span></a></li>

In place of the <li> you could also have <sup id=”fn1b”>1</sup>

All images are located in the media library. You can open it through the dashboard or simply by trying to add an image. You can upload several images at once. Make sure you don’t delete any images as that might result as “image not found “ somewhere on the site.

Web Prod team uses Yoast for several purposes:

Posts differ from pages in a way that they are dynamic and feed the blog roll. Posts are organized by date therefore it is crucial to check the publish settings. Here are a few differences between blog posts and pages: