In the past, we have shown you how to add rotating testimonials in WordPress. While creating the new landing page for WPBeginner WordPress Videos, we took inspiration from something that we have seen StudioPress doing for some time. That is displaying testimonials in a tooltip when the user brings their mouse over on a photo. This technique is becoming an industry standard because we have seen other folks using it as well. In this article, we will show you how to add tooltip testimonials popup in WordPress.
Final Result
This is what the end product will look like. If you bring your mouse over on a person’s photo, it will show a tooltip testimonial. You can see the live demo here. However, this article will likely outlive the live demo, so attaching a screenshot below:
Background:
From what we have heard from industry experts, showing prominent human faces tends to add a personal feeling to the page. This is the reason why we wanted to go this route. We did a simple google search to come across Loren Nason’s article. In which he essentially highlighted the code that StudioPress was using. The best part about StudioPress is their support. As Loren described, when he asked Brian Gardner about how he created the testimonials on his site, Brian simply sent over an example file.
The biggest issue was that they simply hard coded the feature into their template. While this would work fine for us developers, it is not an ideal solution if you are handing the website to a client? We wanted to have a solution where we give the client an ability to add/remove testimonials at will. This is why, we decided to utilize Custom Post Types, and meta fields to accomplish this along with the jQuery.
Custom Post Types and Meta Boxes
We need the client to have the ability to do the following:
- Add User’s Photo (Thumbnails)
- Add User’s name (Post Title)
- Add Testimonial Text (Post Body)
- Client’s Position in Company (Custom Field or Meta Box)
First thing we did was add a custom post type called Testimonials which got us everything except for one field (client position/company). It’s up to you if you want to add a custom meta box, or make your client use custom fields. We say lets not be lazy, and give our clients a great backend experience even if it requires adding a few extra lines of code.
All you have to do is take the code below and save it in a blank php file called tooltip-testimonials.php or any other name for that sake.
<?php /* Plugin Name: Tooltip Testimonial Plugin URI: / Description: Tooltip Testimonial in WordPress Version: 0.1 Author: Syed Balkhi Author URI: / License: GPL v2 or higher License URI: License URI: http://www.gnu.org/licenses/gpl-2.0.html */ //Add Image Size add_image_size( 'testimonial-thumb', 96, 96, true ); // Hard Crop Mode //Register Custom Post Types add_action( 'init', 'register_cpt_testimonial' ); function register_cpt_testimonial() { $labels = array( 'name' => _x( 'Testimonials', 'testimonial' ), 'singular_name' => _x( 'testimonial', 'testimonial' ), 'add_new' => _x( 'Add New', 'testimonial' ), 'add_new_item' => _x( 'Add New testimonial', 'testimonial' ), 'edit_item' => _x( 'Edit testimonial', 'testimonial' ), 'new_item' => _x( 'New testimonial', 'testimonial' ), 'view_item' => _x( 'View testimonial', 'testimonial' ), 'search_items' => _x( 'Search Testimonials', 'testimonial' ), 'not_found' => _x( 'No testimonials found', 'testimonial' ), 'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ), 'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ), 'menu_name' => _x( 'Testimonials', 'testimonial' ), ); $args = array( 'labels' => $labels, 'hierarchical' => false, 'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post' ); register_post_type( 'testimonial', $args ); } //Custom Meta Box $key = "testimonial"; $meta_boxes = array( "position" => array( "name" => "position", "title" => "Position and Company", "description" => "Enter their position and their company name.") ); function create_meta_box() { global $key; if( function_exists( 'add_meta_box' ) ) { add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' ); } } function display_meta_box() { global $post, $meta_boxes, $key; ?> <div class="form-wrap"> <?php wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true ); foreach($meta_boxes as $meta_box) { $data = get_post_meta($post->ID, $key, true); ?> <div class="form-field form-required"> <label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label> <input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" /> <p><?php echo $meta_box[ 'description' ]; ?></p> </div> <?php } ?> </div> <?php } function save_meta_box( $post_id ) { global $post, $meta_boxes, $key; foreach( $meta_boxes as $meta_box ) { $data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ]; } if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) ) return $post_id; if ( !current_user_can( 'edit_post', $post_id )) return $post_id; update_post_meta( $post_id, $key, $data ); } add_action( 'admin_menu', 'create_meta_box' ); add_action( 'save_post', 'save_meta_box' );
This will get us the basic WordPress setup that we need to start with. Now, you need to start adding some testimonials, so you can display it. Let’s recap where each element is going.
- Add User’s Photo (Thumbnails / Featured image). We have it set to resize it by 96 x 96px. It’s always best to follow that ratio.
- Add User’s name (Post Title)
- Add Testimonial Text (Post Body)
- Client’s Position in Company (in a Testimonial Information Meta Box)
Displaying in Theme
Tooltip testimonials is mostly intended for custom themes, so yes it will require getting your hands dirty with some theme editing. Because each theme have different dimensions, color schemes, and styles, we decided to release this as a tutorial rather than a plugin. Here is what we will be doing to display tooltip testimonials in your WordPress theme:
- Add a custom jQuery code in the theme.
- Create a custom loop that will display the testimonials in a structure we want.
- Add some basic CSS to make it look pretty
First thing you need to do is copy and paste the following jQuery code and save it in a blank file called tooltip-testimonials.js:
jQuery(document).ready(function(){ jQuery("#testimonials img[title]").tooltip({ // tweak the position offset: [0, 0], // use the "slide" effect effect: 'slide' // add dynamic plugin with optional configuration for bottom edge }).dynamic({ bottom: { direction: 'down', bounce: true } }); });
Once you have done that, we need to load this file into your theme’s header. You can either choose to do this manually by editing your header.php file and pasting a script code in your head area, or follow WP best practice and use wp_enqueue_script function. Let’s go ahead and upload our tooltip-testimonials.js file in our theme’s scripts folder. If it doesn’t exist, then just create a folder called scripts.
Add the following code to your theme’s functions.php file:
add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts'); function tooltip_enqueue_scripts() { if (!is_admin()) { wp_register_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true); wp_enqueue_script('jquery_tools'); wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true); wp_enqueue_script('tooltip'); } }
Now we have that in place, lets create a custom loop that will let us display these tooltip testimonials with user’s pictures in a grid based format. Open the file where you want this testimonials to show up. Whether it is your sidebar, homepage, or wherever you like. Then paste the following loop:
<div id="testimonials"> <div class="wrap"> <?php $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 6 ); $loop = new WP_Query( $args ); if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); $data = get_post_meta( $loop->post->ID, 'testimonial', true ); $user_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($loop->post->ID), 'testimonial-thumb'); ?> <div class="testimonials"> <p class="center"><img class="frame" src="<?php echo $user_image_url[0] ?>" title="<?php echo get_the_content(); ?>" alt="<?php echo get_the_title(); ?>" /></p> <p class="testimonials-title"><?php echo get_the_title(); ?></p> <p class="company"><?php echo $data[ 'position' ]; ?></p> </div> <?php endwhile; endif; ?> </div> </div>
The loop code above will display 6 items on the page. You can style them however you choose. You can even add orderby = rand if you have like 20 or so testimonials. You can have 6 at random being displayed.
Now let’s add some CSS styles to make it look pretty. Below is some sample CSS that we used. You would probably need to adjust it based on your theme styles, color schemes etc.
#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;} #testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;} #testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;} #testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;} #testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;} #testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}
Wrapping Up:
We hope that this article helps you add tooltip testimonials in your WordPress themes. This is a very basic example. As we mentioned above that you can always adjust wp_query arguments to have random testimonials order. You can also use the plugin Post Types Order to allow your clients to determine the order with an easy drag-drop interface.
If you have any questions or suggestions, feel free to leave a comment below.
