Using the Button Shortcode

Using buttons is a great way to highlight an important link or request. For example, you might use a button that reads “Give Today” and link it to your donation form. Or you could use a button that says “Download Our Brochure” and link to a downloadable file.

No matter the reason, you’ll create a button in the same way whenever you’re formatting content on a page or in a blog post. You can even add multiple buttons if you wish, like in this example showing multiple buttons in different columns.

Before we get started, please note that this article will not address how to add or remove the button in your site’s navigation. Learn more about the navigation button.

Helpful Terminology

Buttons are added to your post or page using a shortcode. These small snippets of code are simple shortcuts that add objects or design features. And don’t worry! The codes are generated automatically. You just need to make sure it appears in the correct location within your page.

Find the Button Shortcode

Your Button Options

Every button you make can be customized in different ways. The one option that is pre-set is the color. It’s the same for every button and is determined by your site’s primary color. If you need help changing this color across your site, please reach out to us for support.

Here are the attributes you can set for each button.

Button Options

 

  • URL. This is the full link (including http) where you want the button to direct people, like another page on your site.
  • Size. In addition to the default size, you can choose from mini, small and large. Refer to a size chart below.
  • Type. Choose whether you want the button edges to be round or square.
  • Target. This describes whether or not the link will open in the same window or a new window or tab. We recommend “same window” for other pages on your site and “new window” when linking to places not on your site.
  • Text. Here’s where you’ll determine the text of your button, like Apply Now. Try to keep it short, action-oriented and specific (not “read more”).

A preview of the button will change as you adjust these options, making it easy to see what the final button will look like before you add it to the page. We recommend using a consistent button style throughout the site.

 

Button Sizes

Making a Button

To create a button, you’ll need to add a special button shortcode to your post or page wherever you want the button to show up. Follow the steps below to learn how to find the button options and add the shortcode.

Pro Tip: In a new window, open the page you want the button to link to. This will make it easier to use the correct URL in a future step.

1. Place your cursor in the location where you’d like to add a button.

2. Click the Shortcode button and select “Button.”

3. Add the full URL of the page or file you want to link to using the button. If you opened that page in a new window (see #1), simply copy the URL and paste the link.

4. Adjust the remaining attributes for size, type, target and text. The preview at the bottom of the window will adjust according to your settings.

5. When you’re ready, click “Insert Shortcode.” The shortcode will be added to wherever you placed your cursor in step #2.

Button Shortcode Anatomy

6. If needed, you can center your button by highlighting the entire snippet of code and clicking the center alignment option, just like you would do for normal text.

7. Preview the page or post to see if your button looks correct and is placed where you want it.

Donate Now Button Example

8. To make adjustments, we suggest creating the button again rather than trying to adjust the code itself.

9. For multiple buttons in a single page or post, repeat these steps as needed.

10. When you’re done, be sure to save or publish your changes.

 

Still Have Questions?

Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.