The Divi theme is a popular WordPress theme that includes a variety of built-in modules, including a Call to Action (CTA) button module. This module allows you to create attractive and attention-grabbing buttons on your website.
To create a Divi CTA button, you can use the et_pb_promo_button function. This function accepts an array of parameters that define the button’s appearance and behavior. Here’s an example of how you can use this function to create a CTA button:
<?php
function wpsnippets_divi_cta_button() {
$button_args = array(
'url' => 'https://example.com',
'text' => 'Click me!',
'button_classes' => 'my-custom-button-class',
'attributes' => array(
'target' => '_blank',
'rel' => 'noopener',
),
);
$button_html = et_pb_promo_button( $button_args );
return $button_html;
}
?>
In this example, we define an array called $button_args that contains the parameters for our CTA button. The url parameter specifies the URL that the button should link to, the text parameter defines the text that appears on the button, and the button_classes parameter allows you to add custom CSS classes to the button.
The attributes parameter is an array that allows you to add additional HTML attributes to the button. In this example, we set the target attribute to _blank to open the link in a new tab, and the rel attribute to noopener for security reasons.
Finally, we pass the $button_args array to the et_pb_promo_button function, which generates the HTML markup for the CTA button. The resulting HTML is stored in the $button_html variable, which we can then return or output as needed.
This code snippet can be useful when you want to programmatically generate Divi CTA buttons with custom parameters, such as dynamically generating buttons based on user input or database values.
Examples
Example 1: Creating a Divi call to action button with custom text and link
This example demonstrates how to create a Divi call to action button with custom text and link. The code snippet uses the wpsnippets_divi_cta_button() function to generate the button HTML.
<?php
function wpsnippets_divi_cta_button( $text, $link ) {
return '<a href="' . esc_url( $link ) . '" class="et_pb_promo_button">' . esc_html( $text ) . '</a>';
}
?>
<?php echo wpsnippets_divi_cta_button( 'Learn More', 'https://example.com' ); ?>
The wpsnippets_divi_cta_button() function accepts two parameters: $text for the button text and $link for the button link. It returns the HTML markup for the Divi call to action button, with the provided text and link.
Example 2: Adding custom CSS classes to a Divi call to action button
This example demonstrates how to add custom CSS classes to a Divi call to action button. The code snippet modifies the wpsnippets_divi_cta_button() function to accept an additional parameter for CSS classes.
<?php
function wpsnippets_divi_cta_button( $text, $link, $classes = '' ) {
$button_classes = 'et_pb_promo_button ' . sanitize_html_class( $classes );
return '<a href="' . esc_url( $link ) . '" class="' . esc_attr( $button_classes ) . '">' . esc_html( $text ) . '</a>';
}
?>
<?php echo wpsnippets_divi_cta_button( 'Learn More', 'https://example.com', 'custom-class' ); ?>
The modified wpsnippets_divi_cta_button() function now accepts an additional $classes parameter, which can be used to pass custom CSS classes to the button. The function sanitizes the classes using sanitize_html_class() and adds them to the button’s class attribute.
Example 3: Creating a Divi call to action button with custom attributes
This example demonstrates how to create a Divi call to action button with custom attributes. The code snippet modifies the wpsnippets_divi_cta_button() function to accept an associative array of attributes.
<?php
function wpsnippets_divi_cta_button( $text, $link, $attributes = array() ) {
$button_attributes = '';
foreach ( $attributes as $name => $value ) {
$button_attributes .= ' ' . esc_attr( $name ) . '="' . esc_attr( $value ) . '"';
}
return '<a href="' . esc_url( $link ) . '" class="et_pb_promo_button"' . $button_attributes . '>' . esc_html( $text ) . '</a>';
}
?>
<?php
$button_attributes = array(
'data-custom-attribute' => 'value',
'target' => '_blank',
);
echo wpsnippets_divi_cta_button( 'Learn More', 'https://example.com', $button_attributes );
?>
The modified wpsnippets_divi_cta_button() function now accepts an additional $attributes parameter, which should be an associative array of attribute names and values. The function loops through the array and adds the attributes to the button’s HTML markup.