Below, you’ll find a detailed guide on how to add the Wp Call Button Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Wp Call Button Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Wp Call Button Plugin and the shortcodes it provides:
"WP Call Button is a user-friendly WordPress plugin that enables easy creation and integration of click-to-call buttons, enhancing your website's communication functionality."
- [wp_call_button]
Wp Call Button [wp_call_button] Shortcode
The wp_call_button shortcode is a function of the WP Call Button plugin that displays a call button on your WordPress site. The shortcode reads plugin settings and attributes, sets defaults, and generates the call button. It also includes Google Analytics click tracking and allows for customization of the button’s text, color, and visibility of the phone icon.
Shortcode: [wp_call_button]
Parameters
Here is a list of all possible wp_call_button shortcode parameters and attributes:
btn_text– defines the text displayed on the call buttonbtn_color– specifies the background color of the call buttonhide_phone_icon– controls whether to hide or show the phone icon
Examples and Usage
Basic example – A simple shortcode usage to display a call button with default settings.
[wp_call_button /]Advanced examples
Display the call button with a custom button text, using the ‘btn_text’ attribute.
[wp_call_button btn_text="Call us now!" /]Customize the button text and color, using both ‘btn_text’ and ‘btn_color’ attributes.
[wp_call_button btn_text="Contact us!" btn_color="#FF0000" /]Display the call button without a phone icon, by setting the ‘hide_phone_icon’ attribute to ‘true’.
[wp_call_button hide_phone_icon="true" /]Combine all three attributes for a fully customized call button.
[wp_call_button btn_text="Get in touch!" btn_color="#00FF00" hide_phone_icon="true" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wp_call_button] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wp_call_button', [ $this, 'wp_call_button_shortcode_func' ] );Shortcode PHP function:
function wp_call_button_shortcode_func( $atts ) {
// Read the plugin settings.
$settings = $this->plugin_settings;
// Read the attributes and set defaults.
$attrs = shortcode_atts(
[
'btn_text' => $settings['wpcallbtn_button_text'],
'btn_color' => $settings['wpcallbtn_button_color'],
'hide_phone_icon' => 'false',
],
$atts
);
// Set defaults from settings.
if ( empty( $attrs['btn_text'] ) ) {
$attrs['btn_text'] = $settings['wpcallbtn_button_text'];
}
if ( empty( $attrs['btn_color'] ) ) {
$attrs['btn_color'] = $settings['wpcallbtn_button_color'];
}
if ( empty( $attrs['hide_phone_icon'] ) ) {
$attrs['hide_phone_icon'] = 'no';
}
// Get the call button.
$call_button = WpCallButtonHelpers::get_call_button( $settings );
// Get the call button text.
$call_button_text = '<span>' . ( $attrs['hide_phone_icon'] === 'no' ? '<img style="width: 70px; height: 30px; vertical-align: middle; border: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important;" src="' . WpCallButtonHelpers::get_phone_image() . '" />' : '' ) . esc_html( $attrs['btn_text'] ) . '</span>';
// Get the google analytics click tracking.
$click_tracking = $call_button['tracking'];
// Build the styles for the call button.
$call_button_markup = 'display: inline-block; box-sizing: border-box; border-radius: 5px;' .
'color: white !important; width: auto; text-align: center !important; font-size: 24px !important; ' .
'font-weight: bold !important; ' .
( $attrs['hide_phone_icon'] === 'no' ? 'padding: 15px 20px 15px 0 !important; ' : 'padding: 15px 20px !important;' ) .
'text-decoration: none !important;' .
'background: ' . esc_attr( $attrs['btn_color'] ) . ' !important;';
// Return the call button.
return ( $settings['wpcallbtn_button_enabled'] === 'yes' && ! empty( $settings['wpcallbtn_phone_num'] ) ) ? '<a style="' . $call_button_markup . '" class="' . $this->plugin_slug . '-in-btn" href="tel:' . esc_attr( $settings['wpcallbtn_phone_num'] ) . '"' . $click_tracking . '>' . $call_button_text . '</a>' : '';
}
Code file location:
wp-call-button/wp-call-button/src/Plugin/WpCallButtonPlugin.phpConclusion
Now that you’ve learned how to embed the Wp Call Button Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply