> ## Documentation Index
> Fetch the complete documentation index at: https://kb.hosting.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding CTA button shortcode on WordPress

> Discover how to easily create a CTA button shortcode in WordPress using a simple PHP snippet, and add it to your content pages effortlessly.

[WordPress](https://hosting.com/hosting/platforms/wordpress-hosting/managed-wordpress-hosting/) shortcodes allow users to add functions on a page or a blog post using square bracket strings (\[]) without knowing the underlying PHP function codes. This article shows how to create a customized CTA button shortcode for WordPress and display them on [WordPress](https://hosting.com/hosting/platforms/wordpress-hosting/managed-wordpress-hosting/) pages or blogs.

## Adding an CTA button shortcode on wordpress

<Warning>
  **Important**

  Always perform a backup before you make any changes to the theme files. If you break any codes, it will be easier to revert your site to its last good known state. Alternatively, you could also create a child theme. Read this link on how to create a child theme: [https://www.hosting.com/blog/wordpress-child-theme/](https://www.hosting.com/blog/wordpress-child-theme/)
</Warning>

Follow the steps below to edit your Theme setting file to add a customised CTA button using shortcode:

1. Log in to your WordPress site with an administrator account.

2. On the **Dashboard** in the left sidebar, click **Appearance**, and then click **Theme Editor**:
   > 🚧 Important
   >
   > You will not be able to roll back to your earlier Theme configuration after any edits. Save the Theme files before proceeding with the modifications.![](https://static.hosting.com/kb/kb-wp-CTAwordpress-3.png)

3. On the **Theme Editor**, select the **Theme** you want to edit from the dropdown:\
   ![](https://static.hosting.com/kb/kb-wp-CTAwordpress-2.png)

4. The files for this selected theme are listed on the right column under **Theme Files**. Click on the file named "*functions.php*":\
   ![](https://static.hosting.com/kb/kb-wp-CTAwordpress-4.png)

5. Insert the following code to the end of*functions.php* file.

```javascript theme={null}
add_shortcode( 'cta_button', 'wordpress_cta' );
function wordpress_cta( $atts ) {
$a = shortcode_atts( array(
'link' = 'https://hosting.com/hosting/platforms/wordpress-hosting',
'id' = 'wpcodes',
'color' = 'blue',
'size' = '',
'label' = 'Button',
'target' = '_self'
), $atts );

$output = '<p><a href="'. esc_url( $a['link'] ). '" id="'. esc_attr( $a['id'] ). '" class="button '. esc_attr( $a['color'] ). ' '. esc_attr( $a['size'] ). '" target="'. esc_attr($a['target']). '">'. esc_attr( $a['label'] ). '</a></p>';

 return $output;

}
```

Attributes and variables in the code:

* link: default link to redirect users to once the button is clicked

* label: label of the button

* target: Where the page should be displayed

* \$output stores the HTML code of the button element

6. Open the blog post or page and add the CTA button shortcode **\[cta\_button]:**

***

7. The CTA button displayed on the bottom of a page:\
   ![](https://static.hosting.com/kb/kb-wp-CTAwordpress-6.png)

8. Right click on the CTA button to inspect the HTML code for the button:\
   ![](https://static.hosting.com/kb/kb-wp-CTAwordpress-5.png)

## Related articles

* [Creating custom shortcodes in WordPress](/docs/creating-custom-shortcodes-in-wordpress)