Function: Creates a clickable link to another site or page. Can also be used to link downloadable documents or PDFs.
Number of Options: 16
Step 1: Browse your options and copy and paste the shortcode
Browse all of your button options. After choosing your button, copy the shortcode directly under whichever button you want to use into the WordPress editor where you wish the button to appear.
*Copy all of the code, including the [ ] on either end.
[uw_button style="arrow" size="large" color="purple" target="#"]Button text[/uw_button]
[uw_button style="plus" size="large" color="purple" target="#"]Button text[/uw_button]
[uw_button style="play" size="large" color="purple" target="#"]Button text[/uw_button]
[uw_button style="arrow" size="large" color="white" target="#"]Button text[/uw_button]
[uw_button style="plus" size="large" color="white" target="#"]Button text[/uw_button]
[uw_button style="play" size="large" color="white" target="#"]Button text[/uw_button]
[uw_button style="arrow" size="large" color="gold" target="#"]Button text[/uw_button]
[uw_button style="plus" size="large" color="gold" target="#"]Button text[/uw_button]
[uw_button style="play" size="large" color="gold" target="#"]Button text[/uw_button]
[uw_button style="arrow" size="large" color="light-gold" target="#"]Button text[/uw_button]
[uw_button style="plus" size="large" color="light-gold" target="#"]Button text[/uw_button]
[uw_button style="play" size="large" color="light-gold" target="#"]Button text[/uw_button]
[uw_button style="primary" size="large" target="#"]Button text[/uw_button]
[uw_button style="secondary" size="large" target="#"]Button text[/uw_button]
[uw_button style="primary" size="small" target="#"]Button text[/uw_button]
[uw_button style="secondary" size="small" target="#"]Button text[/uw_button]
Step 2: Link the button to your desired site or page
Within the shortcode you pasted into WordPress, replace # in the target attribute with the link to the page or site the button should link to. Keep the quotation marks. Example: target=”http://www.washington.edu/”
Before
[uw_button style="arrow" size="large" color="purple" target="#"]Button text[/uw_button]
After
[uw_button style="arrow" size="large" color="purple" target="http://www.washington.edu/"]Button text[/uw_button]
Step 3: Change the text on the button
Within the shortcode you pasted into WordPress, replace Button text (which comes directly after the first end bracket) with whatever you want the external user to see on the button. It is best to keep the button text to 25 characters or less. The longer the button text, the longer the button will appear on your final product to accommodate the length.
Before
After
Step 4 (optional): Assign an id to your button
Attributes are the pieces within the shortcode that you modify to customize your shortcode. For buttons, we did this in Step 2 to modify the link that the button will link to. 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.