Client Testimonials Powered by PHP, XML and jQuery

Demo Download

One of the easiest ways to boost up the sales of your products is to show the honest recommendations of people that have already purchased them. This is content that rarely changes, and you do not need a dedicated CMS system just to manage it.

In this tutorial we are going to build a XML backed testimonial viewer, which, along with jQuery, can display the set on your product pages.


The first step is to lay down the HTML markup of the page. We are setting up a simple one-page site so we can get a better feel of the testimonial viewer in action.


<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Client Testimonials Powered by PHP and XML</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />


<div id="page">

    <div id="topBar">
        <div id="logo">

        <ul id="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Buy Now!</a></li>

    <div id="iPhone">
        <p>Our new awesome iPhone App is available on the appstore.</p>

    <div id="testimonials">
        <!-- Generation of the testimonials takes place here -->


<script src=""></script>
<script src="js/script.js"></script>


At the top of the document, we are including styles.css, the stylesheet for the page, and just before the closing body tag, we are including the jQuery library and our script.js file, which is discussed in the last step of the tutorial.

The #testimonials div is where the magic happens. It is going to hold the client testimonials in the form of LI elements. Only the first testimonial is going to be shown on page load, and the rest will be displayed consecutively with a jQuery fade animation.



Before inspecting the generation of the testimonials, lets take a look at the XML file that powers it.


<?xml version="1.0" encoding="utf-8"?>

        <content>This has to be the most awesome app I've ever used!</content>
        <author-name>John Doe</author-name>
        <content>Simply amazing! It solved my problem. I highly recommend it.</content>
        <author-name>John Smith</author-name>
        <content>A tremendous success. It is like walking on sunshine compared to its competitors.</content>
        <author-name>John Smith</author-name>

The schema of this file is simple - the root testimonials element holds a number of items. Each item has content, author-name and author-url items, where the last one is optional, as you can see from the last testimonial. You can include an arbitrary number of testimonials by just adding more items to this xml file.

But how are we going to transform this into valid HTML? We could parse it with PHP and loop through the items, stitching together the markup, but there is an alternative approach with applying a XSLT stylesheet. This is a special XML based language, which allows us to transform a regular XML file into HTML.


<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="">
<xsl:output method="html" encoding="utf-8" indent="no"/>

<!-- Matching the testimonials (root) element -->
<xsl:template match="/testimonials">
    <!-- Using a for-each to loop through all the "item" elements -->
    <xsl:for-each select="item">

    <!-- This markup is going to be printed -->
        <p class="text">
            <!-- Value-of prints the value of the select attribute -->
            <xsl:value-of select="content"/>

        <p class="author">
            <xsl:value-of select="author-name"/>

            <!-- Using an "if" statement to check whether the URL field exists -->
            <xsl:if test="author-url != '' ">
                <xsl:value-of select="', '"/>
                    <!-- Creating an href attribute in the hyperlink -->
                    <xsl:attribute name="href">
                        <!-- Using the concat function -->
                        <xsl:value-of select="concat('http://',author-url)"/>

                    <xsl:value-of select="author-url"/>



All the standard programming constructs are supported. You can use for-each loops, if statements and you can even call built in functions (you can learn more at this XSLT documentation site). What we did here, in effect, is to extract the transformation logic from PHP and put it in a separate, presentation file.

There are two approaches when it comes to applying this XSL stylesheet. You can just include it in the XML file itself and leave it to the web browser to generate the HTML markup (all modern browsers support XSL transformations), or do it on the server side. Luckily, PHP has great support for XSL and it is really easy to use.


$xmlFile = 'xml/testimonials.xml';
$xslFile = 'xml/transform.xml';

$doc = new DOMDocument();
$xsl = new XSLTProcessor();


echo $xsl->transformToXML($doc);

The snippet above resides in the #testimonial div of index.php. It prints a set of LI elements after applying the XSL stylesheet to the XML document with all the testimonials. To the browser (and search spiders) everything looks like a regular HTML page.



Now that our markup is generated, lets style it. As the subject of the tutorial is primarily the back-end, we will only take a brief look at the CSS code.


    margin: 0 auto 120px;


    background:url('../img/logo.jpg') no-repeat;


#navigation li{ display:inline;}

#navigation li a{
    font-size: 17px;

    margin:60px auto 0;
    background:url('../img/iPhone.png') no-repeat;

#iPhone p{ display:none;}

    width: 375px;
    padding: 45px 45px 35px 90px;
    background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2);


#testimonials li{ display:none;}
#testimonials li:first-child{ display:block;}

#testimonials ul{ list-style:none;}
#testimonials p.text{ font-size:24px;}

    color: #878787;
    font-size: 16px;
    font-style: italic;
    text-align: right;

#testimonials a,
#testimonials a:visited{

The code above styles the page, and hides all the testimonials (which are simply LI elements inside of the main UL). After this, by using the first-child selector, we show the first one by default. It will be down to our jQuery code to cycle through the rest and show them consecutively.


In the jQuery part of the tutorial, we will create a simple script that will loop through the testimonials and show them one by one with a fade-in animation.



    // Hiding all the testimonials, except for the first one.
    $('#testimonials li').hide().eq(0).show();

    // A self executing named function that loops through the testimonials:
    (function showNextTestimonial(){

        // Wait for 7.5 seconds and hide the currently visible testimonial:
        $('#testimonials li:visible').delay(7500).fadeOut('slow',function(){

            // Move it to the back:
            $(this).appendTo('#testimonials ul');

            // Show the next testimonial:
            $('#testimonials li:first').fadeIn('slow',function(){

                // Call the function again:


By increasing the value passed to the delay method, you can control the screen time for each testimonial. Moving the active one to the back (instead of keeping an index) simplifies the function implementation and allows us to call showNextTestimonial recursively.

With this our Client Testimonials viewer is complete!


You can use this script as a quick solution to displaying testimonials on your product pages. You can even modify it to include ratings, stars, reviews, and other kinds of custom data. At the end, it is all down to editing an XML file.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles