Skip to content

Modals

Function: A web page element that displays in front of and deactivates all other page content. Essentially acting like a pop up that you can fill with additional information. Users simply click on it like a button to open it up.

Number of options: 2

Step 1: Browse your modal options and copy and paste the shortcode

Look through all the options and choose the one that works best. The corresponding shortcode is directly under the modal that it creates. Copy and paste your chosen shortcode into the WordPress Editor you wish it to appear.

*Copy all of the code, including the [ ] on either end.

[uw_modal title="Enter a title" width="narrow" color="purple" button="Button Text" position="center"]Insert Content Here[/uw_modal]

 

[uw_modal title="Enter a title" width="narrow" color="gold" button="Button Text" position="center"]Insert Content Here[/uw_modal]

 

Step 2: Customize your modal

To change the title that appears at the top of your modal window, replace Enter a title with your desired title. If you don’t want a title, delete the entire title attribute, title=”Enter a title”. Edit the button text that appears on your modal by replacing Button Text with your desired button text.

To change the width of the modal, change the modal attribute to narrow, wide, or default (medium-width). So if you want your modal to appear with a wide window, change width=”narrow” to width=”wide”.

Examples of differing window widths:

narrow

wide

default (medium-width)

 

*Remember, when changing an attribute to keep the quotation marks. For instance, if you are wanting to change the title to Go Huskies, make sure the code appears as follows: title=”Go Huskies”

You can fill a modal with a variety of content, simply by replacing Insert Content Here with your desired content, including copy, pictures, and videos. Be sure to not delete the end bracket and start bracket of the modal shortcode. Modals can support a variety of shortcodes too, including buttons, block quotes, and cards.

*Just because you can, doesn’t mean you should. Be wary of overloading a modal window and ask yourself if the content would serve better on its own separate page. These are not meant to replace entire pages, just add additional information that doesn’t quite fit on your page or site.

Example of a customized modal:

*This is an overloaded modal to show you some of the things you CAN put in a modal. Do not consider this a best practice. Wikipedia actually does an excellent job of modals, just hover some of their hyperlinked things on a wikipedia page to see them.

 

Step 3 (optional): Assign an id to your modal

Attributes are the pieces within the shortcode that you modify to customize your shortcode. For modals, we did this in Step 2 to change the title and width. An optional attribute that you can add is an id. IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.