SOM Onboarding Tutorial
- Scroll to the bottom of the page.
- Click login in the bottom right corner.
- Enter your credentials and confirm the net badge two-factor authentication.
- Once you’ve logged in, if you’ve encountered a “Access Denied” screen, please email somweb@virginia.edu
- Once you’ve logged in, you will see the WordPress Dashboard.
On the left side of the page, you will see a variety of sections and tools. During this tutorial series we will be primarily focusing on the following sections:
- Pages
- Posts
- Table Press
- Gravity Forms
- Media Library
- Users
From the Dashboard
- Hover over the website title at the top of the page with the single home icon.
- From the home page, navigate to the page you would like to edit.
- Once you’re at the correct page, select “Edit Page” from the word press tool bar at the bottom of the page.
- If the tool bar does not appear at the top or bottom of the page, please check and see if you are currently logged in.
Navigate to pages set to “Draft”
- If the page you are editing is not yet published or set to draft, navigate to the Dashboard.
- Hover over the “Pages” tab on the left side of the dashboard.
- From the “All Pages” section, Navigate to the page by:
- Using the search bar
- Sorting by recently published, title, or author.
- Selecting the page type (Published, Draft, ect.).
While viewing the “All Pages” section, it is possible to edit a page’s parent, status, title, and order number from the quick edit menu.
To access the quick edit menu:
- Hover over a page while in the “All Pages” section.
- While hovering, 4 items will appear. Edit, Quick Edit, Preview, and Trash.
- Select Quick edit to access the “Quick Edit” Menu.
- Adjust the desired parameters and select “Update”.
- Select the check box next to the pages you want to edit.
- Once the pages have been checked, Select the “Bulk Actions” Drop down from the top of the screen.
- Select Edit from the drop-down menu and then click “Apply”.
- Adjust the parameters and click the “Update” Button.
There are multiple ways to create new pages in WordPress. In this lesson we will go over how to add new pages from the dashboard as well as how to add a new page from the tool bar.
From The Dashboard
- Hover over the pages section and select “Add New”.
From the Tool bar
- Hover over the “+ New” tab and select “Page”
Once you’ve created a new page, you will see a variety of available input fields including the Page Title, URL, and a page building block set to “WYSIWIG”. WYSIWIG stands for “What You See Is What You Get” and is a popular term in web development. Page builders are turned on by default and allow for increased functionality when using WordPress. Once you’ve entered a name into the page title field, it will automatically assign this title as the new page’s URL.
- You can edit a page’s URL by selecting the “Edit” box below the Page’s Title.
- Once you’ve adjusted the URL, click the “Publish” Button to confirm your changes.
If you’ve encountered a page where you’ve selected “Edit Page” but the content is not available in the page building block, please do the following:
- Turn off the page building blocks by selecting “No” From the Page builder drop down menu.
- Once this has been selected, you should now see the pages content in one large text editor.
- Cut or Copy this content and turn the Page Builder “On” again.
- Paste the content into a “WYSIWIG” Page Building Block.
- Select the Publish Button to confirm your changes.
To begin, let’s create a new page and titled “Sandbox”. The term sandbox tells editors that this page is being used as a tester and can be deleted in the future.
There are multiple different page building blocks that allow for different content layouts. The current available page building blocks are WYSIWIG, Two – Column Text, Accordion, Slide Show, & Facts & Figures.
The WYSIWIG is the default page building block and is the most like Microsoft Word. WYSIWIG stands for “What you see is what you get” and is a common term in web development. This Page Building block also features a 1 column layout and a “Call to Action” section.
Let’s fill out the blank fields in the WYSIWIG. The WYSIWIG also features a Call-to-Action Section. If this section is not filled out, it will not display anything. The “Call to Action” section is used to grab the attention of a user. It can be used for multiple purposes but is most used for linking to more information. In the Call-to-Action section there is also an option for “Open link in a new tab?”. Whenever a link it is sending a user to a website that is not a part of the med.virginia.edu network, the link should open in a new tab.
Once you’ve completed filling out the WYSIWIG Page building block, select “Save Draft” and then select “Preview”. Both buttons are located in the “Publish” section on the right side of the page.
Once you’ve selected preview, a new window will open showing you a temporary example of the content you’ve added to the WYSIWIG page building block. The content added in the WYSIWIG above should appear similar to the image featured below. The “Call to Action” section appears to the right of the body of text shown below. If you choose to leave the “Call to Action” section blank, it will not appear.
Each page building block has a Visual and a Text view. The Visual view will show content similar to Microsoft Word. The Text View will show the HTML & CSS that is being rendered on the back end. This is useful to know if you are familiar with HTML & CSS code and if you are trying to format content that is not cooperating in the “Visual” view.
There are multiple ways to add a new page building block. The most common option is to scroll to bottom of the last page building block and select the “Add Row” button.
You can also add a page building block in between blocks by hovering over the middle right side of a block. This will reveal a “+” sign. Clicking this + sign will add a new page building block between the two.
Alternatively, If you hover to the right of any page building block, a “ – “ sign will appear. Selecting this – sign will remove the page building block.
The next available page building block is called “Two Column Text” and features two separate columns each with their own Header and Body. This content type is useful for adding small bodies of text and can be used to easily format content into two columns. This block does not feature a call-to-action section.
Let’s go ahead and add content into the two heading fields and a few sentences to each of the content fields. Once you are finished filling out the heading and content fields, let’s go ahead and select “Save Draft” followed by the “Preview” button under the “Publish” box on the right side of the screen. The preview should now show the WYSIWIG and the Two Column Text page building blocks like the image below.
The third page building block we will cover is the Accordion. The accordion is like the WYSIWIG since it has a single header and a body, but it also allows for drop down menus. These drop-down menus are useful for consolidating information that may not be required for a user to understand the content.
A common use for this page building block would be for a frequently asked question page. By adding the questions to the drop-down menu’s, it makes it easier for a user to find the question that is most relevant to the answer they are seeking.
Let’s go ahead and fill out the heading and the Content sections. Once you’ve completed filling out these fields, let’s add a Drop-down menu by selecting the “Add Row” inside of the page building block. See the example in the image below for reference.
Once you’ve selected the add row button inside of the page building block, you should now see two new fields. The field titled “Label” will be the title of the drop-down menu.
Once you’ve filled out the new fields for the accordion section, select save draft and preview. You should now see the accordion with one drop down menu in the preview. See the image below for reference.
The other two options in the page building block menu are “Slideshow” and “Facts and Figures”. Both options are for more advanced editors and should be avoided for the time being.
Now that we’ve learned how to add new page building blocks and covered the three main options, let’s learn how to add photos. The media library contains all photos and documents that have been uploaded to the site. In your sandbox, let’s return to the first page building block we added called “WYSIWIG”. Let’s click at the beginning of the text you’ve added to the content section of the “WYSIWYG” and click on the “Add Media” Button.
Once you’ve selected this button you will either see the “Media Library” tab that contains all the images on the site or the “Upload Files” window which is used for uploading new images or documents. Please view the images below for reference.
Let’s navigate to the “Media Library” section by selecting the “Media Library” tab at the top of the window. Once you are at the “Media Library” section, click on an image in the library. Once you’ve selected an image, a window will appear on the right-hand side of the window with details regarding the Image under “Attachment Details”.
The first field is the “Alt Text” field. It is very important that this field contains a brief description of the image to accessible to users who are visually impaired. Visually impaired users rely on a screen reader to access the content on web pages. The “Alt Text” field will be read out loud to the user when they are using a screen reader. When adding “alt text” using the word Photo is not required. adding alt text to images, refer to the web accessibility initiative.
Note: Scientific Diagrams require special treatment when it comes to accessibility. To learn more about how to properly meet accessibility requirements for complex images click here
Below the “Alt Text” field you’ll see the title of the image which is pulled from the file name followed by the “Captions” field. The Captions field can be formatted by using html tags. For more information about html tags please refer to the Tutorials and Guidelines section.
Let’s select a photo to add to our WYSIWIG and select “Insert into page”. Your photo should appear at the beginning of the content text.
Click on the photo to reveal the alignment tool bar. This will allow you to align the photo to left, center, or right positions.
Let’s select the “Align Right” option to nest the photo into the text.
If your photo is too large, select the pencil icon from the image toolbar. From here you can adjust the size of the photo from the drop-down menu titled “Size” under the “Display Settings”
The media library also allows you to create an image gallery. This is commonly used when creating faculty pages where multiple headshot images are used. At the bottom of your sandbox, Add a new row. The WYSIWYG content type should be selected by default.
Select the “Add media” button again. From the media library window select “Create Gallery” from the menu on the left side.
Once you’ve selected “Create Gallery” the media library will appear again except now you can select multiple images.
Once you’ve selected the images you want to feature, Select the “Create a New Gallery” button at the bottom right of the window.
Once you’ve selected “Create a new gallery” you should see the “Edit Gallery” menu. This menu allows you to resize the photos in the image gallery and select how many columns in the gallery.
From this menu you can re-arrange the order of the images, adjust the captions, and remove pictures from the gallery by clicking the X icon at the top right of the images. Once you’ve assigned your desired column amount for your gallery, select “Insert Gallery” at the bottom of right of the window.”
Once you selected “Insert Gallery” you should now see the photos you’ve selected inside the content section of the WYSIWIG. I you need to adjust the Image gallery, click on one of the images in the content section and select the pencil icon from the toolbar. Select “Save Draft” and “Preview” to view the gallery.
If you need to separate content into more than two columns, you will need to use e-z columns. Navigate to the bottom of the Sandbox and add a new row. The new row should be set to WYSIWYG. At the top of the editing options for the content section you should see a button with two brackets.
Once you’ve clicked this button, you should see a menu showing various options for columns as seen below. For this example, we will select the option for “one third”.
Once you’ve selected “one third”, it will insert two sets of short codes into the WYSIWIG’s content section. We will begin by clicking in between these two sets of short codes and clicking the enter / return key twice. The sets of short codes should now look like the image below.
Let’s add the rest of the short codes to complete the formatting. Set your cursor to the end of the [/one_third] short code and repeat the previous steps. See the image below for reference. Once you’ve completed this step, we will repeat it once again but this time we will select the “One Third Last” option. See the image below for reference. It’s important that the last set of short codes is the “Last” option, otherwise the columns will not format correctly.
Let’s begin adding content to these newly added columns. In between the first set of short codes, we are going to add a phone number. The phone number you’ve added should look like the picture below.
Now that we’ve added a phone number, let’s highlight the phone number and select the hyper link icon from the tool bar above. A field will appear to add a link. To create a link for a phone number, we will add the word “tel:” before adding the country code and the phone number. It’s important that you add the word “tel:” otherwise the link will not function correctly and will send the user to a 404 page. Once you’ve added the link in this format, select the blue button.
In the next column, we’ll add an email. Similar to creating a link for a phone number, emails use a specific word to create a link. Add an email in between the second set of short codes, highlight the email, and then select the link button. If the email is in lower case letters, once you click the link button it will automatically add the words “mailto:” before the email. Without these words, this link will not function correctly and will send the user to a 404 page.
For the last set of short codes, we will add a URL. Once you’ve added a URL between the last set of short codes, highlight the URL and select the link button.
If the link you are adding is an external website (this refers to any website that is not a part of the med.virginia.edu network) select the gear icon next to the check mark. This will allow you to select the option to have the link open in a new tab. It’s web best practice to have any link that is not a part of the sites network open in a new tab. Once you’ve selected the option to “Open link in a new tab” select the “Update” button.
Now that we’ve added the three links in between the three different sets of short codes, let’s select save draft and preview. See the image below for reference.
Now that we’ve covered how to properly add hyperlinks and format content into columns, let’s cover some of the tools WordPress has to offer. UVA SOM WordPress utilizes two common plugins to handle a variety of tasks.
The first plugin is called TablePress. TablePress allows the user to upload excel documents or make their own tables. This plugin is the only formatting option that has an integrated search feature and is useful for applications such as creating faculty directories. To navigate to this tool, select the TablePress option from the menu on the left side of the screen.
Once you’ve selected TablePress from the left side menu, you’ll notice new options in the TablePress menu. Let’s go ahead and add a new table by selecting the “Add New Table” option.
You should now see an option screen for creating a new table. You will see an option to select how many rows and columns the table should have. By default, the table will be set to 5 for both columns and rows. Add the name “Sandbox” to the title of the table to let others know that this table can be deleted in the future and then select “Add Table”.
Similar to adding captions to photos, the cells in TablePress also rely on html tags to format the content (bold, italic, line breaks, etc.). Let’s add content into the 5 x 5 cells. This content can be whatever you choose as it is just being used as an example. Once you’ve added the content to the cells, select the “Save Table” button.
Navigate back to your sand box by clicking on “Pages” from the menu on the left. If you are having difficulty finding your sandbox page, try selecting the “Date” option from the “All Pages” section.
Hover over the “Sandbox” page and select the “edit” button. Now that you are back on the editing page for your “Sandbox” scroll to the bottom of the page and add a new row with WYSIWYG content type selected. Add title to the header. From the editing toolbar in the WYSIWYG, select the table press icon and select the “Sandbox” table you created.
Select the “Insert Shortcode” button that correlates with your table. Once you select this button, a short code will be added to the body of the WYSIWYG. Navigate to the publish section, select “Save Draft” button followed by the “Preview Changes” button.
The table you’ve added should look like the picture below. You can only see the edit button if you are currently logged in. The search bar and show entries option can be turned off by adjusting the setting of the table.
Gravity forms is a plugin used for creating submission forms. Just like TablePress, it has its own menu item. Select the “Forms” item from the main menu on the left above “Pages”.
Once you’ve reached the Gravity Forms landing page, create a new form either by clicking the “Add New” button on the page or “New Form” from the side menu. Select “Blank Form” from the template options.
Add the name “Sandbox” to the form title field and select “Create Blank Form”.
You should now see a blank Gravity Form. Creating a form in gravity forms is easy and works on a drag and drop system. You can add new fields to the form by dragging the items from either the “Standard Fields” or “Advanced Fields” menu on the right.
To create a basic contact form, navigate to the “Advanced Fields” section below the “Standard Fields” section. Drag and drop the Name and Email options into the form followed by the paragraph option from the standard fields section. The contact form should look like the example below.
Once you’re done adding fields to the form, select the “Save Form” button at the top right. Now that the form has been saved, navigate back to the sandbox page and create a new row at the bottom of the page with the WYSIWYG content type selected. At the “Add Form” button below the WYSIWIG heading
Select the form you created in the previous steps and then click the “Insert Form” button. This will insert a short code similar to TablePress. Repeat the “Save Draft” and “Preview” steps to view your form.
When adding content to the SOM site it’s important to use approved imagery. Please do not use images found on google as it could lead to copyright infringement and other legal repercussions. UVA has a image database that provides images for editors to use on the SOM network. Visit the link below to access the UVA SOM approved imagery.