Add Floating Button-Icon to WordPress without Plugin

Floating icons are the ones that always attract viewers the most and can increase conversions. These buttons can be action buttons, calling buttons, chat buttons, messenger, WhatsApp, etc. Here we are going to add a simple floating icon/ button for WordPress with just some PHP and CSS. Nothing fancy. Below I have shown 3 examples with which you can add.

Floating Icons for WordPress Without Plugins

WhatsApp Icon with Top and Bottom Text.
Call Us Icon with Side Text
Chat Icon without Text

We suggest you go through all the codes first and then later you can decide which would suit your purpose the most with minimum CSS and PHP modifications.

Table of Contents

PHP for Floating WhatsApp Icon

Add this code to the child theme’s ‘functions.php’ or Code Snippet plugin. We recommend adding codes through the plugin.

/* WP Climax Floating Icon-Button Code */
add_action( 'wp_footer', 'wpclimax_floating_button_icon_wa');
function wpclimax_floating_button_icon_wa() { 
?>
<div class="wpc-floating-icon-wa"><a href="http://wpclimax.com" target="_blank">
<p class="wpc-fi-before-wa">Join Our</p>
<p class="dashicons dashicons-whatsapp"></p>
<p class="wpc-fi-after-wa">Group</p>
</a>
</div>
<?php 
}
/* End WP Climax Floating Icon-Button Code */

In the above code, if you want to change the text which appears on the front end, you can edit lines 6 and 8. In line 6, we have added ‘Join Our’ and ‘Group’ in line 8.

Also, add the correct address which when clicked redirects. In line 5 change the URL. By default, the URL opens in a new tab. If you want to open it in the same tab, remove target=”_blank”.

If you just want the icon without any text above and below, you can remove lines 6 and 8. You can also remove its CSS since it will be unused.

CSS for Floating WhatsApp Icon

Now add the below CSS in the front end customizer or theme’s style.css. You should be adding the below ‘Simple Look‘ CSS code in order to show the icon in the front end. Also, for any effects for the icon, add the provided CSS along with ‘Simple Look‘ CSS.

Simple Look

/* WPClimax WA Floating */
.wpc-floating-icon-wa {
    position: fixed;
    bottom: 40%;
    right: 20px;
		text-align: center;
		opacity: 80%;
		z-index: 999;
}
.wpc-floating-icon-wa a {
	text-decoration: none;
}
.dashicons.dashicons-whatsapp {
  font-size: 50px;
  width: 50px;
  height: 50px;
  margin: 0;
  color: #128c7e;
}
.wpc-fi-before-wa {
	color: white;
	background: #25D366;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
	margin-bottom: 2px;
}
.wpc-fi-after-wa {
	color: white;
	background: #25D366;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
	margin-top: 2px;
}
/* End WPClimax WA Floating */

Scaling Effects

We have added a scaling effect on hover to each of the items. In the first CSS Block, the first and third items, downscale whereas, the icon itself upscales on hover. In the second CSS Block, all the items are upscaled.

/* WP Climax WA Hover Effect 1 */
/* 1st & 3rd Downscales, 2nd Upscales */
.wpc-floating-icon-wa .dashicons:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.wpc-fi-before-wa:hover, .wpc-fi-after-wa:hover {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);}
/* End WP Climax WA Hover Effect 1 */

/* WP Climax WA Zoom Effect 2*/
/* All items Upscale */
.wpc-floating-icon-wa .dashicons:hover, .wpc-fi-before-wa:hover, .wpc-fi-after-wa:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
/* End WP Climax WA Zoom Effect 2*/

PHP for Floating Call Us Button

/* WP Climax Floating Icon-Button Call Us*/
add_action( 'wp_footer', 'wpclimax_floating_button_icon_call');
function wpclimax_floating_button_icon_call() { ?>
<div class="wpc-floating-icon-call"><a href="tel:+999999999999" target="_blank">
<p class="dashicons dashicons-phone"></p>
<p class="wpc-fi-after-call">   Call Us</p>
</a>
</div>
<?php 
}
/* End WP Climax Floating Icon-Button Call Us*/

In line 4 we shall add the number for which you need to receive the call. If the visitor is on a desktop PC, if the web browser is connected to a google account, they will get a prompt to select the smartphone device to call that number.

If the visitor is on Android or iOS, when they click on Call Us button, the call dialer of their device opens and they can place the call with just one click.

CSS for Floating Call Us Button

/* WPClimax Call Floating */
.wpc-floating-icon-call {
  position: fixed;
  bottom: 80%;
  right: -10px;
  text-align: center;
  opacity: 80%;
  z-index: 999;
}
.wpc-floating-icon-call a {
	text-decoration: none;
}
.dashicons.dashicons-phone {
 font-size: 50px;
 width: 50px;
 height: 50px;
 color: white;
 margin-right: 80px;
 margin-left: -15px;
 background: #fc6506;
 padding: 5px;
 border-radius: 50%;
}
.wpc-fi-after-call {
 color: white;
 background: #fc8c3c;
 margin-top: -94px;
 margin-left: 30px;
}
/* End WPClimax Call Floating */

PHP for Floating Chat Icon

/* WP Climax Floating Icon-Button Chat */
add_action( 'wp_footer', 'wpclimax_floating_button_icon_chat');
function wpclimax_floating_button_icon_chat() { 
?><a href="http://wpclimax.com" style="text-decoration:none;" target="_blank">
<div class="dashicons dashicons-format-chat"></div>
</a>
<?php 
}
/* End WP Climax Floating Icon-Button Chat */

CSS for Floating Chat Icon

/* WPClimax Chat Floating */
.dashicons.dashicons-format-chat {
  position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 999;
	opacity: 95%;
	font-size: 50px;
  width: 50px;
  height: 50px;
  color: #8fea46;
	background: #2871cc;
	padding: 10px;
	border-radius: 50%;
}

/Some Hover Effects */
.dashicons.dashicons-format-chat:hover {
	color: #2871cc;
	background: #8fea46;
	  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
/* End WPClimax Chat Floating */