Adding CTA button shortcode on WordPress

​

Adding an CTA button shortcode on wordpress

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.

3. On the Theme Editor, select the Theme you want to edit from the dropdown:
   
4. The files for this selected theme are listed on the right column under Theme Files. Click on the file named “functions.php”:
   
5. Insert the following code to the end offunctions.php file.

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;

}

• 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:
   
8. Right click on the CTA button to inspect the HTML code for the button:
   

​

Related articles

• Creating custom shortcodes in WordPress