WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Add Tooltip Testimonials in WordPress Themes

How to Add Tooltip Testimonials in WordPress Themes

Last updated on October 17th, 2012 by Editorial Staff
61 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Tooltip Testimonials in WordPress Themes

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:

Tooltip Testimonials in WordPress

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: https://www.wpbeginner.com/
Description: Tooltip Testimonial in WordPress
Version: 0.1
Author: Syed Balkhi
Author URI: https://www.wpbeginner.com/
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.

61 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

6 Comments

Leave a Reply
  1. petra says:
    Jan 29, 2014 at 12:44 pm

    Thanks. I haven’t got it working but i will..
    I read a path /scripts/tooltip-testimonials.js.. does this mean I have to create a -scripts- folder to put the js in .. ?!

    Reply
    • WPBeginner Support says:
      Jan 29, 2014 at 8:45 pm

      yes your theme may already have a js folder so you can replace scripts with js if you want.

      Reply
  2. Shuvo says:
    Aug 1, 2013 at 9:27 am

    Wow it’s amazing tutorial. Thanks

    Reply
  3. Loren Nason says:
    Oct 19, 2012 at 10:17 am

    Wow Thanks for the link.

    And the CPT goodness you have hear is even more awesome.

    :-D

    Reply
    • Editorial Staff says:
      Oct 19, 2012 at 11:40 am

      Anytime Loren. Your article really got the ball rolling because I was going to ask Brian myself. It saved me a lot of time.

      Reply
  4. Scott Wyden Kivowitz says:
    Oct 17, 2012 at 1:01 pm

    Really cool technique Syed. Thanks for sharing that because now you have me thinking on other ways to utilize it.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
Smash Balloon
Smash Balloon
Add Custom Social Media Feeds in WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
DreamPress
DreamPress Coupon
Get up to 16% OFF on DreamPress's powerful WordPress Hosting.
Nextiva
Nextiva Coupon
Get the lowest possible price on the best VoIP and business phone service.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.