HTML & Shortcodes

Not everyone is familiar with writing/editing code, which is why we have created this page, with the common HTML code and short codes that can help when you are updating your web-page.

HTML:

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for Web pages
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by <…> tags

Shortcodes: in WordPress are little bits of code that allow you to do various things with little effort. They were introduced in WordPress 2.5, and the reason to introduce them was to allow people to execute code inside WordPress posts, pages, and widgets without writing any code directly. This allows you to embed files or create objects that would normally require a lot of code in just one single line.

When working in the WordPress visual page editor (the “Visual” tab), there are editing icons that enable you to bold and italicize text, create bulleted lists, add hyperlinks and the like. This is a quick way that WordPress injects HTML code into the page content behind the scenes (see “Text” tab).

However, there are some cases—like when creating captions for a Faculty/Resident gallery view—where you will need to apply some basic HTML code to style the text:

• Bold:  <strong>word</strong>
• Line Break:  <br/> (creates lines of spacing in between lines of text)
• Hyperlink:
  • <a href=”http://websiteURL“>text</a>
  • <a href=”mailto:email@address“>text</a>
  • <a href=”tel:123-456-1234“>123-456-1234</a>
• Italics:  <em>text</em>
• Underline: <u>text</u>

Homepage News Section

Pulls in posts from your site’s news section by category. Below is an example of the shortcode before adding your websites specifications. In the first “” block replace category name, with the name of the category you would like to select. Multiple categories can be added by inserting a comma in between the names. In the second “” block, input the number of articles that you’d like to be shown. You can choose a grid or a list view. As an example, here is the code that pulls in the news post on the Web Support site’s homepage:

Jake Headley joins the SoM team: November, 2019

New Resident Photos: Tips and Tricks

Web Editing Made Easier

Homepage Events Section

Pulls in events from your site’s calendar. The number in the first "" block is the number of items you would like to be shown. You can choose a grid or a list view. Here is an example of the code that pulls in the training events listed on the Web Support site's homepage:

[ uvasomevents num_items="6" display="grid" ]

Homepage Health System Calendar Section

Below is an example of the shortcode that pulls in events from the main Health System Calendar. To display your department/division's events, go to the Health System Calendar, and select "Generate RSS" from the upper right side of the page. Select your department, then "Generate RSS Link." Copy this URL and replace the http info within the quotes "". Then select the number of events to display and choose the grid or list display format, as done in the above events shortcode.

For more information, see Introduction to the HS Calendar.

Video Frame Sizing

All videos displayed on SOM sites should be hosted on either YouTube or Vimeo, or another video hosting service. Videos are easily added to a page by selecting "Add Media" and then "Insert from URL." The video is automatically sized to fit the width of the space available.

In the case where you would like the video to be smaller, use the code below. Adjust the width and height percentages to get the size you want:

[uvasom width="50%" height="25%" url="YouTube/Vimeo link" overflow="hidden"]

To learn more about using HTML and Shortcodes, please sign up, and join us for one of our Thursday Word Press work sessions.

Alternatively, if you cannot attend on Thursdays, let us know and we can arrange to meet you personally at another time.