Call Button in the Divi Header
Adds a tap-to-call phone button next to the menu in Divi's default header, which is especially handy for local businesses on mobile.
Opens WPIDE on
Code
// Phone number to dial and the button text.
$wpide_divi_phone = '+1 555 010 0199';
$wpide_divi_phone_label = 'Call us';
add_action( 'et_header_top', function () use ( $wpide_divi_phone, $wpide_divi_phone_label ) {
$tel = preg_replace( '/[^0-9+]/', '', $wpide_divi_phone );
if ( '' === $tel ) {
return;
}
printf(
'<a class="wpide-divi-call" href="tel:%1$s" style="float:right;margin:0 0 0 18px;padding:8px 16px;border-radius:999px;background:#2ea3f2;color:#fff;font-weight:600;line-height:1.2;position:relative;top:50%%;transform:translateY(25%%);">%2$s</a>',
esc_attr( $tel ),
esc_html( $wpide_divi_phone_label )
);
} );Notes
Uses Divi's et_header_top hook, so it appears in the default header, not in Theme Builder headers.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.