“Testimonials Wordpress Plugin v.1.0” Documentation by “husamrayan” v1.2

“Testimonials Wordpress Plugin v.1.2”


By: husamrayan

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Plugin Descriptions
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScript
  5. PHP Code Explanation

A) Plugin Descriptions - top

Testimonials plugin for WordPress is responsive, the main propose of the plugin is to display testimonials, but it can be used for other proposes.

You can display the entries in 3 different Ways

1. Slider

In this slider you can display testimonials with 3 different style with a number of options you set such as ( Image Size,Image Radius,Number of items, Order By, Order, Auto Play, Pause On Hover, Buttons Visibility, Buttons Radius, Buttons Position, Scroll Duration, Pause Duration, Font Style).

2. Grid

The testimonials will also display it in a responsive grid with a number of column and with 3 different syles, depending on your settings.

3. List A simple responsive list to display your testimonials in a simple way. depending on your settings.

You can customize the layout, with several layout options.

1. Items Style

You can display slider, grids, list with 3 different layout style with the information to the right, or below the image or above the image, depending on the settings.

2. Image Size

You can display slider, grids, list with 4 different image size, depending on the settings.

3. Image Radius

You can display slider, grids, list with 4 different image radius size, depending on the settings.

4. Number of Columns

In the grid layouts you can choose how many columns you want to display. It responsive and adept in different screen sizes.

5. Border Style

You can display testimonials with 3 different options. depending on your settings.

- Border Color

You can change border color by select color from color piker in the settings.

6. Font Style

You can choose text font, font size, font color depending on the settings.

Shortcode Generator

The shortcode generator will make a preview of how the layout looks with the selected settings.

B) HTML Structure - top

1.Slider


<div class="tmls items_style(style1,style2,style3) image_size(small_image,medium_image,large_image)" >
	<div class="tmls_next_prev next_prev_visibility(tmls_visible,tmls_show_on_hover,tmls_hiden) next_prev_position(tmls_top,tmls_bottom)">
		<a href="#" class="tmls_prev next_prev_radius(large_radius,medium_radius,small_radius,no_radius)"></a>
		<a href="#" class="tmls_next next_prev_radius"></a>
	</div>

	<div class="tmls_container tmls_slider data-autoplay="true or false" data-pauseonhover="true or false" data-scrollduration="num" data-pauseduration="num">

		testimonials items ....

	</div>
</div>

2.grid


<div class="tmls items_style(style1,style2,style3) image_size(small_image,medium_image,large_image)" >
	<div class="tmls_container tmls_grid >

		testimonials items ....

	</div>
</div>

3.list


<div class="tmls items_style(style1,style2,style3) image_size(small_image,medium_image,large_image)" >
	<div class="tmls_container tmls_list >

		testimonials items ....

	</div>
</div>

4.testimonial item style1


<div class="tmls_item" style="border-color:#color;">


	<div class="tmls_image image_radius(large_radius,medium_radius,small_radius,no_radius)" style="background-image:url(url)"></div>

	<div class="tmls_text" style="font-family:font family; color:#color; font-size:size;"> testimonial text </div>

	<div class="tmls_name" style="font-family:font family; color:#color; font-size:size; font-weight:font weight;"> name </div>
	<div class="tmls_position" style="font-family:font family; color:#color; font-size:size;"> position / <a href="" target="">company name</a> </div>



</div>

5.testimonial item style2


<div class="tmls_item" style="border-color:#color;">


	<div class="tmls_image image_radius(large_radius,medium_radius,small_radius,no_radius)" style="background-image:url(url)"></div>

	<div class="tmls_text" style="font-family:font family; color:#color; font-size:size;"> testimonial text </div>

	<div class="tmls_name" style="font-family:font family; color:#color; font-size:size; font-weight:font weight;"> name </div>
	<div class="tmls_position" style="font-family:font family; color:#color; font-size:size;"> position / <a href="" target="">company name</a> </div>



</div>

6.testimonial item style3


<div class="tmls_item" style="border-color:#color;">

	<div class="tmls_text" style="font-family:font family; color:#color; font-size:size;"> testimonial text </div>
	
	<div class="tmls_image_position">
	
		<div class="tmls_image image_radius(large_radius,medium_radius,small_radius,no_radius)" style="background-image:url(url)"></div>
		
		<div class="tmls_name" style="font-family:font family; color:#color; font-size:size; font-weight:font weight;"> name </div>
		<div class="tmls_position" style="font-family:font family; color:#color; font-size:size;"> position / <a href="" target="">company name</a> </div>
	
	</div>


</div>

7.Generate shortcode page


<h2 id="tmls_gene_short_title">Generate Shortcode</h2>


<div id="tmls_gene_short_leftSidebar">

    <div class="row" >
    	<label for="tmls_category">Category Name</label>
        <?php
        
            wp_dropdown_categories(array('taxonomy' =>'tmlscategory',
                'show_count' => 1,
                'pad_counts' => 1,
                'id' => 'tmls_category',
                'name' => 'tmls_category',
                'hide_empty' => 0,
                'show_option_none' => 'All Categories',
                'hierarchical'=>1));
        
        ?>
    </div>

	<div class="row">
		<label for="tmls_layout">Layout</label>
		<select id="tmls_layout" name="tmls_layout">
			<option value="tmls_slider">slider</option>
			<option value="tmls_grid">grid</option>
			<option value="tmls_list">list</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_style">Items Style</label>
		<select id="tmls_style" name="tmls_style">
			<option value="style1">style 1</option>
			<option value="style2">style 2</option>
			<option value="style3">style 3</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_image_size">Image Size</label>
		<select id="tmls_image_size" name="tmls_image_size">
			<option value="large_image">large</option>
			<option value="medium_image">medium</option>
			<option value="small_image">small</option>
			<option value="no_image">without image</option>
		</select>
	</div>

	<div class="row image_options">
		<label for="tmls_image_radius">Image Radius</label>
		<select id="tmls_image_radius" name="tmls_image_radius">
			<option value="large_radius">large radius</option>
			<option value="medium_radius" >medium radius</option>
			<option value="small_radius">small radius</option>
			<option value="no_radius">without radius</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_orderByList">Order By</label>
		<select id="tmls_orderByList" name="tmls_orderByList">
			<option value="date" selected >Publish Date</option>
			<option value="menu_order">Order</option>
			<option value="rand">Random </option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_orderList">Order</label>
		<select id="tmls_orderList" name="tmls_orderList">
			<option value="DESC" selected >Descending</option>
			<option value="ASC">Ascending</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_numberInput">Number of items</label>
		<input type="text" id="tmls_numberInput" name="tmls_numberInput" value="" placeholder="All" />
	</div>

	<div class="row slider_options">
		<label for="tmls_auto_play">Auto Play</label>
		<select id="tmls_auto_play" name="tmls_auto_play">
			<option value="true" selected >true</option>
			<option value="false">false</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_pause_on_hover">Pause On Hover</label>
		<select id="tmls_pause_on_hover" name="tmls_pause_on_hover">
			<option value="false">false</option>
			<option value="true" >true</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_next_prev_visibility">Slider Buttons Visibility</label>
		<select id="tmls_next_prev_visibility" name="tmls_next_prev_visibility">
			<option value="tmls_visible">visible</option>
			<option value="tmls_show_on_hover" >show on hover</option>
			<option value="tmls_hiden" >hiden</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_next_prev_radius">Slider Buttons Radius</label>
		<select id="tmls_next_prev_radius" name="tmls_next_prev_radius">
			<option value="large_radius">large radius</option>
			<option value="medium_radius" >medium radius</option>
			<option value="small_radius">small radius</option>
			<option value="no_radius">without radius</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_next_prev_position">Slider Buttons Position</label>
		<select id="tmls_next_prev_position" name="tmls_next_prev_position">
			<option value="">default</option>
			<option value="tmls_top" >top</option>
			<option value="tmls_bottom" >bottom</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_scroll_duration">Scroll Duration</label>
		<input type="text" id="tmls_scroll_duration" name="tmls_scroll_duration" value="500" />
	</div>

	<div class="row slider_options">
		<label for="tmls_pause_duration">Pause Duration</label>
		<input type="text" id="tmls_pause_duration" name="tmls_pause_duration" value="9000" />
	</div>

	<div class="row grid_options">
		<label for="tmls_columns_number">Columns Number</label>
		<select id="tmls_columns_number" name="tmls_columns_number">
			<option value="2">2 columns</option>
			<option value="3" >3 columns</option>
			<option value="4" >4 columns</option>
		</select>
	</div>

	<div class="row border_options">
		<label for="tmls_border_style">Border Style</label>
		<select id="tmls_border_style" name="tmls_border_style">
			<option value="tmls_border tmls_dashed_border">dashed</option>
			<option value="tmls_border tmls_solid_border" >solid</option>
			<option value="no_border" >without border</option>
		</select>
	</div>

	<div class="row border_options border_color">
		<label for="tmls_border_color">Border Color</label>
		<input type="text" id="tmls_border_color" name="tmls_border_color" class="tmls_farbtastic_input" value="#DDDDDD" />
		<div id="tmls_border_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_border_color_btn" name="tmls_border_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row">
		<label for="tmls_font_style">Font Style</label>
		<select id="tmls_font_style" name="tmls_font_style">
			<option value="custom" >custom style</option>
			<option value="default" >current theme style</option>
		</select>
	</div>

	<div class="row font_options">
		<label for="tmls_text_font_family">Text Font Family</label>
		<select id="tmls_text_font_family" name="tmls_text_font_family">
			<option value="" >current theme font</option>
			<option value="Georgia, serif" >Georgia</option>
			<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif" >Palatino Linotype</option>
			<option value="'Times New Roman', Times, serif" >Times New Roman</option>
			<option value="Arial, Helvetica, sans-serif" >Arial</option>
			<option value="'Arial Black', Gadget, sans-serif" >Arial Black</option>
			<option value="'Comic Sans MS', cursive, sans-serif" >Comic Sans MS</option>
			<option value="Impact, Charcoal, sans-serif" >Impact</option>
			<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif" >Lucida Sans Unicode</option>
			<option value="Tahoma, Geneva, sans-serif" >Tahoma</option>
			<option value="'Trebuchet MS', Helvetica, sans-serif" >Trebuchet MS</option>
			<option value="Verdana, Geneva, sans-serif" >Verdana</option>
			<option value="'Courier New', Courier, monospace" >Courier New</option>
			<option value="'Lucida Console', Monaco, monospace" >Lucida Console</option>
		</select>
	</div>

	<div class="row font_options">
		<label for="tmls_text_font_color">Text Font Color</label>
		<input type="text" id="tmls_text_font_color" name="tmls_text_font_color" value="#777777" placeholder="#777777" />
		<div id="tmls_text_font_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_text_font_color_btn" name="tmls_text_font_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row font_options">
		<label for="tmls_text_font_size">Text Font Size (px)</label>
		<select id="tmls_text_font_size" name="tmls_text_font_size">
			<option value="9px" >9</option>
			<option value="10px" >10</option>
			<option value="11px" >11</option>
			<option value="12px" >12</option>
			<option value="13px" >13</option>
			<option value="14px" selected >14</option>
			<option value="15px" >15</option>
			<option value="16px" >16</option>
			<option value="17px" >17</option>
			<option value="18px" >18</option>
			<option value="19px" >19</option>
			<option value="20px" >20</option>
			<option value="21px" >21</option>
			<option value="22px" >22</option>
			<option value="23px" >23</option>
			<option value="24px" >24</option>
			<option value="25px" >25</option>
			<option value="26px" >26</option>
			<option value="27px" >27</option>
			<option value="28px" >28</option>
			<option value="29px" >29</option>
			<option value="30px" >30</option>
			<option value="31px" >31</option>
			<option value="32px" >32</option>
			<option value="33px" >33</option>
			<option value="34px" >34</option>
			<option value="35px" >35</option>
			<option value="36px" >36</option>
		</select>

	</div>


	<div class="row font_options">
		<label for="tmls_name_font_family">Name Font Family</label>
		<select id="tmls_name_font_family" name="tmls_name_font_family">
			<option value="" >current theme font</option>
			<option value="Georgia, serif" >Georgia</option>
			<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif" >Palatino Linotype</option>
			<option value="'Times New Roman', Times, serif" >Times New Roman</option>
			<option value="Arial, Helvetica, sans-serif" >Arial</option>
			<option value="'Arial Black', Gadget, sans-serif" >Arial Black</option>
			<option value="'Comic Sans MS', cursive, sans-serif" >Comic Sans MS</option>
			<option value="Impact, Charcoal, sans-serif" >Impact</option>
			<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif" >Lucida Sans Unicode</option>
			<option value="Tahoma, Geneva, sans-serif" >Tahoma</option>
			<option value="'Trebuchet MS', Helvetica, sans-serif" >Trebuchet MS</option>
			<option value="Verdana, Geneva, sans-serif" >Verdana</option>
			<option value="'Courier New', Courier, monospace" >Courier New</option>
			<option value="'Lucida Console', Monaco, monospace" >Lucida Console</option>
		</select>
	</div>


	<div class="row font_options">
		<label for="tmls_name_font_color">Name Font Color</label>
		<input type="text" id="tmls_name_font_color" name="tmls_name_font_color" value="#777777" placeholder="#777777" />
		<div id="tmls_name_font_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_name_font_color_btn" name="tmls_name_font_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row font_options">
		<label for="tmls_neme_font_size">Name Font Size (px)</label>
		<select id="tmls_neme_font_size" name="tmls_neme_font_size">
			<option value="9px" >9</option>
			<option value="10px" >10</option>
			<option value="11px" >11</option>
			<option value="12px" >12</option>
			<option value="13px" >13</option>
			<option value="14px" >14</option>
			<option value="15px" selected >15</option>
			<option value="16px" >16</option>
			<option value="17px" >17</option>
			<option value="18px" >18</option>
			<option value="19px" >19</option>
			<option value="20px" >20</option>
			<option value="21px" >21</option>
			<option value="22px" >22</option>
			<option value="23px" >23</option>
			<option value="24px" >24</option>
			<option value="25px" >25</option>
			<option value="26px" >26</option>
			<option value="27px" >27</option>
			<option value="28px" >28</option>
			<option value="29px" >29</option>
			<option value="30px" >30</option>
			<option value="31px" >31</option>
			<option value="32px" >32</option>
			<option value="33px" >33</option>
			<option value="34px" >34</option>
			<option value="35px" >35</option>
			<option value="36px" >36</option>
		</select>
	</div>

	<div class="row font_options">
		<label for="tmls_neme_font_weight">Neme Font Weight</label>
		<select id="tmls_neme_font_weight" name="tmls_neme_font_weight">
			<option value="bold" >bold</option>
			<option value="normal" >normal</option>
		</select>
	</div>


	<div class="row font_options">
		<label for="tmls_position_font_family">Position Font Family</label>
		<select id="tmls_position_font_family" name="tmls_position_font_family">
			<option value="" >current theme font</option>
			<option value="Georgia, serif" >Georgia</option>
			<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif" >Palatino Linotype</option>
			<option value="'Times New Roman', Times, serif" >Times New Roman</option>
			<option value="Arial, Helvetica, sans-serif" >Arial</option>
			<option value="'Arial Black', Gadget, sans-serif" >Arial Black</option>
			<option value="'Comic Sans MS', cursive, sans-serif" >Comic Sans MS</option>
			<option value="Impact, Charcoal, sans-serif" >Impact</option>
			<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif" >Lucida Sans Unicode</option>
			<option value="Tahoma, Geneva, sans-serif" >Tahoma</option>
			<option value="'Trebuchet MS', Helvetica, sans-serif" >Trebuchet MS</option>
			<option value="Verdana, Geneva, sans-serif" >Verdana</option>
			<option value="'Courier New', Courier, monospace" >Courier New</option>
			<option value="'Lucida Console', Monaco, monospace" >Lucida Console</option>
		</select>
	</div>


	<div class="row font_options">
		<label for="tmls_position_font_color">Position Font Color</label>
		<input type="text" id="tmls_position_font_color" name="tmls_position_font_color" value="#777777" placeholder="#777777" />
		<div id="tmls_position_font_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_position_font_color_btn" name="tmls_position_font_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row font_options">
		<label for="tmls_position_font_size">Position Font Size (px)</label>
		<select id="tmls_position_font_size" name="tmls_position_font_size">
			<option value="9px" >9</option>
			<option value="10px" >10</option>
			<option value="11px" >11</option>
			<option value="12px" selected >12</option>
			<option value="13px" >13</option>
			<option value="14px" >14</option>
			<option value="15px" >15</option>
			<option value="16px" >16</option>
			<option value="17px" >17</option>
			<option value="18px" >18</option>
			<option value="19px" >19</option>
			<option value="20px" >20</option>
			<option value="21px" >21</option>
			<option value="22px" >22</option>
			<option value="23px" >23</option>
			<option value="24px" >24</option>
			<option value="25px" >25</option>
			<option value="26px" >26</option>
			<option value="27px" >27</option>
			<option value="28px" >28</option>
			<option value="29px" >29</option>
			<option value="30px" >30</option>
			<option value="31px" >31</option>
			<option value="32px" >32</option>
			<option value="33px" >33</option>
			<option value="34px" >34</option>
			<option value="35px" >35</option>
			<option value="36px" >36</option>
		</select>
</div>




</div>

<p id="noteParagraph">
	<strong>Note: </strong>copy the following shortcode in the yellow box to the page editor or post editor or testimonials widget to display the testimonials in the website.
</p>

<div id="tmls_div_shortcode">[tmls]</div>

<div id="tmls_gene_short_preview"></div>

C) CSS Files and Structure - top

1.Testimonials items style (testimonials.css)

/* ============ general  ============ */

.tmls  {
	direction:ltr;
	position:relative;
}

.tmls  a{
	text-decoration:none;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}
.tmls  a:hover{
	text-decoration:underline;
}

.tmls_clearfix { 
   clear: both;
}

/* ============ Slider  ============ */

.tmls .tmls_container.tmls_slider {
	overflow:hidden;
}
.tmls .tmls_container.tmls_slider .tmls_item {
	float:left;
}


/* ============ slider next & prev buttons  ============ */

.tmls .tmls_next_prev {
	text-align:right;
	z-index:10;
	
}
.tmls .tmls_next_prev.tmls_visible,
.tmls .tmls_next_prev.tmls_show_on_hover,
.tmls .tmls_next_prev.tmls_hiden {
	display:none;
}
.tmls .tmls_next_prev .tmls_next,
.tmls .tmls_next_prev .tmls_prev {
	display:inline-block;
	background-color:#F5F5F5;
	width:27px;
	height:27px;
	outline:none;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}

.tmls .tmls_next_prev .tmls_next {
	background-image: url(../images/next.png);
	background-position:right center;
	background-repeat:no-repeat;
}

.tmls .tmls_next_prev .tmls_prev {
	background-image: url(../images/prev.png);
	background-position:left center;
	background-repeat:no-repeat;
}

/* ---- slider next & prev hover effect  ---- */

.tmls .tmls_next_prev .tmls_next:hover {
	background-position:left center;
}
.tmls .tmls_next_prev .tmls_prev:hover {
	background-position:right center;
}

/* ---- slider next & prev radius  ---- */

.tmls .tmls_next_prev .tmls_next.no_radius,
.tmls .tmls_next_prev .tmls_prev.no_radius {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.tmls .tmls_next_prev .tmls_next.small_radius,
.tmls .tmls_next_prev .tmls_prev.small_radius {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.tmls .tmls_next_prev .tmls_next.medium_radius,
.tmls .tmls_next_prev .tmls_prev.medium_radius  {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.tmls .tmls_next_prev .tmls_next.large_radius,
.tmls .tmls_next_prev .tmls_prev.large_radius {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

/* ============ Image  ============ */

.tmls .tmls_container .tmls_item .tmls_image {
	background-image: url(../images/people_icon.png);
	background-position:center center;
	background-repeat:no-repeat;
    background-position: center top;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
	background-color:#DDDDDD;
	width:100px;
	height:100px;
}

.tmls .tmls_container.tmls_grid .tmls_item .tmls_image,
.tmls .tmls_container.tmls_list .tmls_item .tmls_image {

	-webkit-animation: tmls_image_show 0.6s;
	-moz-animation: tmls_image_show 0.6s;
	-ms-animation: tmls_image_show 0.6s;
	-o-animation: tmls_image_show 0.6s;
	animation: tmls_image_show 0.6s;

	
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	
}

@keyframes tmls_image_show
{
	0% {
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		
		-webkit-transform: rotate(30deg) scale(0);
		-moz-transform: rotate(30deg) scale(0);
		-o-transform: rotate(30deg) scale(0);
		-ms-transform: rotate(30deg) scale(0);
		transform: rotate(30deg) scale(0);
	}
	
	100% {
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
		
		-webkit-transform: rotate(0deg) scale(1);
		-moz-transform: rotate(0deg) scale(1);
		-o-transform: rotate(0deg) scale(1);
		-ms-transform: rotate(0deg) scale(1);
		transform: rotate(0deg) scale(1);
		
	}
}

@-webkit-keyframes tmls_image_show {
	0% {
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		
		-webkit-transform: rotate(30deg) scale(0);
		-moz-transform: rotate(30deg) scale(0);
		-o-transform: rotate(30deg) scale(0);
		-ms-transform: rotate(30deg) scale(0);
		transform: rotate(30deg) scale(0);
	}
	
	100% {
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
		
		-webkit-transform: rotate(0deg) scale(1);
		-moz-transform: rotate(0deg) scale(1);
		-o-transform: rotate(0deg) scale(1);
		-ms-transform: rotate(0deg) scale(1);
		transform: rotate(0deg) scale(1);
		
	}
}


/* ---- image size  ---- */
.tmls.no_image .tmls_container .tmls_item .tmls_image {
	display:none;
}
.tmls.small_image .tmls_container .tmls_item .tmls_image {
	width:50px;
	height:50px;
}

.tmls.medium_image .tmls_container .tmls_item .tmls_image {
	width:80px;
	height:80px;
}

.tmls.large_image .tmls_container .tmls_item .tmls_image {
	width:100px;
	height:100px;
}

/* ---- image radius  ---- */

.tmls .tmls_container .tmls_item .tmls_image.no_radius {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.tmls .tmls_container .tmls_item .tmls_image.small_radius {
	-webkit-border-radius: 16%;
	-moz-border-radius: 16%;
	border-radius: 16%;
}
.tmls .tmls_container .tmls_item .tmls_image.medium_radius {
	-webkit-border-radius: 33.2%;
	-moz-border-radius: 33.2%;
	border-radius: 33.2%;
}
.tmls .tmls_container .tmls_item .tmls_image.large_radius {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

/* ============ Text  ============ */

.tmls .tmls_container .tmls_item .tmls_text {
	font-size:14px;
	line-height: 1.8;
	margin-bottom:15px;
	position:relative;
}

/* ---- dialog box  ---- */

.tmls .tmls_container .tmls_item .tmls_text.dialog_box {
	background-color:#F5F5F5;
	padding:15px;
	border:1px solid #DDDDDD;
	margin-bottom: 25px;
}

.tmls .tmls_container .tmls_item .tmls_text.dialog_box span.tmls_arrow {
	width:20px;
	height:11px;
	background-image: url(../images/arrow.png);
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	top:100%;
	left:30px;
	display:block;
}

/* ---- dialog box radius  ---- */

.tmls .tmls_container .tmls_item .tmls_text.dialog_box.no_radius {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.tmls .tmls_container .tmls_item .tmls_text.dialog_box.small_radius {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.tmls .tmls_container .tmls_item .tmls_text.dialog_box.medium_radius {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.tmls .tmls_container .tmls_item .tmls_text.dialog_box.large_radius {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

/* ============ Name ============ */

.tmls .tmls_container .tmls_item .tmls_name {
	font-size:15px;
	font-weight:bold;
	margin-bottom:5px;
	line-height:1.8;
}

/* ============ Position ============ */

.tmls .tmls_container .tmls_item .tmls_position {
	font-size:12px;
}


/* ============ Style 1  ============ */
.tmls.style1 .tmls_container  .tmls_item{
	text-align:center;
}

.tmls.style1 .tmls_container .tmls_image {
	margin-left:auto;
	margin-right:auto;
}

.tmls.style1 .tmls_next_prev {
	position:absolute;
	right:0px;
	top:0px;
}
.tmls.style1.no_image .tmls_next_prev {
	position:absolute;
	top:auto;
	bottom:0px;
	right:0px;
}
.tmls.style1 .tmls_next_prev.tmls_top {
	position:absolute;
	right:0px;
	top:0px;
}
.tmls.style1.no_image .tmls_next_prev.tmls_top {
	position:static;
	margin-bottom:10px;
}
.tmls.style1 .tmls_next_prev.tmls_bottom{
	position:absolute;
	top:auto;
	bottom:0px;
	right:0px;
}
.tmls.style1 .tmls_image {
	margin-bottom:20px;
}


/* ============ Style 2  ============ */

.tmls.style2 .tmls_next_prev {
	position:absolute;
	bottom:0px;
	right:0px;
}
.tmls.style2 .tmls_next_prev.tmls_top {
	position:static !important;
	margin-bottom:10px;
}
.tmls.style2 .tmls_next_prev.tmls_bottom {
	position:absolute;
	bottom:0px;
	right:0px;
}
.tmls.style2 .tmls_image {
	float:left;
}

.tmls.style2.small_image .tmls_text,
.tmls.style2.small_image .tmls_name ,
.tmls.style2.small_image .tmls_position {
	margin-left:75px;
}
.tmls.style2.small_image .tmls_item {
	min-height:50px;
}

.tmls.style2.medium_image .tmls_text,
.tmls.style2.medium_image .tmls_name ,
.tmls.style2.medium_image .tmls_position {
	margin-left:105px;
}
.tmls.style2.medium_image .tmls_item {
	min-height:80px;
}

.tmls.style2.large_image .tmls_text,
.tmls.style2.large_image .tmls_name ,
.tmls.style2.large_image .tmls_position {
	margin-left:125px;
}
.tmls.style2.large_image .tmls_item {
	min-height:100px;
}


/* ============ Style 3  ============ */

.tmls.style3 .tmls_next_prev {
	position:absolute;
	bottom:0px;
	right:0px;
}
.tmls.style3 .tmls_next_prev.tmls_top {
	position:static !important;
	margin-bottom:10px;
}
.tmls.style3 .tmls_next_prev.tmls_bottom {
	position:absolute;
	bottom:0px;
	right:0px;
}
.tmls.style3 .tmls_image {
	float:left;
}


.tmls.style3.small_image .tmls_image {
	margin-left:15px;
}
.tmls.style3.small_image .tmls_name {
	padding-left:85px;
	padding-top:2px;
}
.tmls.style3.small_image .tmls_position {
	margin-left:85px;
}
.tmls.style3.small_image .tmls_container .tmls_item .tmls_text.dialog_box span.tmls_arrow {
	left:30px;
}
.tmls.style3.small_image .tmls_image_position {
	min-height:50px;
}


.tmls.style3.medium_image .tmls_name {
	padding-left:105px;
	padding-top:20px;
}
.tmls.style3.medium_image .tmls_position {
	padding-left:105px;
}
.tmls.style3.medium_image .tmls_container .tmls_item .tmls_text.dialog_box span.tmls_arrow {
	left:30px;
}
.tmls.style3.medium_image .tmls_image_position {
	min-height:80px;
}

.tmls.style3.large_image .tmls_name {
	padding-left:125px;
	padding-top:30px;
}
.tmls.style3.large_image .tmls_position {
	padding-left:125px;
}
.tmls.style3.large_image .tmls_container .tmls_item .tmls_text.dialog_box span.tmls_arrow {
	left:40px;
}
.tmls.style3.large_image .tmls_image_position {
	min-height:100px;
}

/* ============ grid  ============ */

.tmls .tmls_container.tmls_grid {
	display:table;
}

/* --------- Rows  --------- */

.tmls .tmls_container.tmls_grid .tmls_row {
	display:table-row;
}

/* --------- columns  --------- */

.tmls .tmls_container.tmls_grid .tmls_row .tmls_column {
	display:table-cell;
}
.tmls .tmls_container.tmls_grid .tmls_row .tmls_column .tmls_item {
	margin:25px;
}
.tmls .tmls_container.tmls_grid .tmls_row .tmls_column:first-child .tmls_item {
	margin:25px 25px 25px 0px;
}
.tmls .tmls_container.tmls_grid .tmls_row .tmls_column:last-child .tmls_item {
	margin:25px 0px 25px 25px;
}
.tmls .tmls_container.tmls_grid .tmls_row:first-child .tmls_column .tmls_item {
	margin-top:0px;
}
.tmls .tmls_container.tmls_grid .tmls_row:last-child .tmls_column .tmls_item {
	margin-bottom:0px;
}

/* ----  border  ---- */

.tmls .tmls_container.tmls_grid.tmls_border .tmls_row .tmls_column {
	border-left:1px solid #DDDDDD;
	border-top:1px solid #DDDDDD;
}
.tmls .tmls_container.tmls_grid.tmls_border.tmls_solid_border .tmls_row .tmls_column {
	border-left:1px solid #DDDDDD;
	border-top:1px solid #DDDDDD;
}
.tmls .tmls_container.tmls_grid.tmls_border.tmls_dashed_border .tmls_row .tmls_column {
	border-left:1px dashed #DDDDDD;
	border-top:1px dashed #DDDDDD;
}
.tmls .tmls_container.tmls_grid.tmls_border .tmls_row .tmls_column:first-child {
	border-left:none;
}
.tmls .tmls_container.tmls_grid.tmls_border .tmls_row .tmls_column.no_left_border {
	border-left:none;
}
.tmls .tmls_container.tmls_grid.tmls_border .tmls_row:first-child .tmls_column {
	border-top:none;
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px),
(min-width: 481px) and (max-width: 1024px) and (orientation:portrait), (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	
	.tmls .tmls_container.tmls_grid .tmls_row {
		display:block;
	}
	.tmls .tmls_container.tmls_grid .tmls_row .tmls_column {
		display:block;
		width:100% !important;
	}
	.tmls .tmls_container.tmls_grid .tmls_row .tmls_column {
		display:block;
		width:100% !important;
	}
	.tmls .tmls_container.tmls_grid .tmls_row .tmls_column .tmls_item {
		margin:0px 0px 25px 0px !important;
		padding-top:25px;
	}
	
	
	/* -------- Border ---------- */
	
	.tmls .tmls_container.tmls_grid.tmls_border .tmls_row .tmls_column,
	.tmls .tmls_container.tmls_grid.tmls_border.tmls_solid_border .tmls_row .tmls_column,
	.tmls .tmls_container.tmls_grid.tmls_border.tmls_dashed_border .tmls_row .tmls_column {
		border-left: none;
	}
	
	.tmls .tmls_container.tmls_grid.tmls_border .tmls_row .tmls_column:empty {
		border-top: none !important;
	}
	
	.tmls .tmls_container.tmls_grid.tmls_border .tmls_row:first-child .tmls_column {
		border-top: 1px solid #DDDDDD;
	}
	
	.tmls .tmls_container.tmls_grid.tmls_border.tmls_solid_border .tmls_row:first-child .tmls_column {
		border-top: 1px solid #DDDDDD;
	}
	
	.tmls .tmls_container.tmls_grid.tmls_border.tmls_dashed_border .tmls_row:first-child .tmls_column {
		border-top: 1px dashed #DDDDDD;
	}
	
	.tmls .tmls_container.tmls_grid.tmls_border .tmls_row:first-child .tmls_column:first-child {
		border-top: none;
	}

}





/* ============ List  ============ */


.tmls .tmls_container.tmls_list .tmls_item {
	padding-top:25px;
	margin-top:25px;
}
.tmls .tmls_container.tmls_list .tmls_item:first-child {
	padding-top:0px;
	margin-top:0px;
}

/* ------- border -------- */
.tmls .tmls_container.tmls_list.tmls_border .tmls_item{
	border-top:1px solid #DDDDDD;
}
.tmls .tmls_container.tmls_list.tmls_border.tmls_solid_border .tmls_item{
	border-top:1px solid #DDDDDD;
}
.tmls .tmls_container.tmls_list.tmls_border.tmls_dashed_border .tmls_item{
	border-top:1px dashed #DDDDDD;
}
.tmls .tmls_container.tmls_list.tmls_border .tmls_item{
	border-top:1px solid #DDDDDD;
}
.tmls .tmls_container.tmls_list.tmls_border .tmls_item:first-child {
	border-top:none;
}

2.Generate shortcode page style (generate_shortcode.css)

/* ======================= Generate Shortcode ======================= */


#tmls_gene_short_title {
	font-weight:normal;
	color:#777777;
	height:60px;
	line-height:60px;
	border-bottom:1px solid #DDDDDD;
	margin:0px 20px 20px 0px;
}

#tmls_gene_short_leftSidebar {
	width:220px;
	float:left;
	border:1px solid #DDDDDD;
	background-color:#F5F5F5;
	padding:10px;
}
#tmls_gene_short_leftSidebar .row {
	display:block;
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid #DDDDDD;
}
#tmls_gene_short_leftSidebar .row:first-child {
	margin-top:0px;
	padding-top:0px;
	border-top:none;
}
#tmls_gene_short_leftSidebar .row label {
	display:block;
	margin-bottom:5px;
	font-weight:bold;
}
#tmls_gene_short_leftSidebar .row select,
#tmls_gene_short_leftSidebar .row input[type="text"] {
	width:218px;
	margin:0px;
}

#tmls_gene_short_leftSidebar .row .button-primary {
	height: 26px;
	display: inline-block;
	vertical-align: top;
}

#tmls_gene_short_leftSidebar .row.border_options,
#tmls_gene_short_leftSidebar .row.grid_options {
	display:none;
}

#noteParagraph {
	margin:0px 20px 20px 262px;
	color:#777777;
}

#tmls_div_shortcode {
	background-color: #fffbcc;
	border:1px solid #e6db55;
	padding:10px;
	margin:0px 20px 20px 262px;
	color:#777777;
}

#tmls_gene_short_preview {
	padding:25px;
	margin:0px 20px 0px 262px;
	border:1px solid #DDDDDD;
}

.tmls_farbtastic {
	display:none;
}

.horizontalRuler {
	border: 0;
	color: #DCDCDC;
	background-color: #DCDCDC;
	height: 1px;
	width: 100%;
	text-align: left;
	margin-top:20px;
	margin-bottom:20px;
}

D) JavaScript - top

This plugin imports three Javascript files.

  1. ( js/jquery.carouFredSel-6.2.1.js ) carouFredSel jQuery Slider Plugin
  2. ( js/generate_shortcode.js ) This is js for generate shortcode page.
  3. ( js/testimonials.js ) This is js to run testimonials carousel.
  1. carouFredSel jQuery Slider Plugin
  2. This is js for generate shortcode page. 
    (function($){
$(window).load(function(){
	
	// inputs
	
    tmls_category = $('#tmls_category');
	tmls_layout = $('#tmls_layout');
	tmls_style = $('#tmls_style');
	tmls_image_size = $('#tmls_image_size');
	tmls_image_radius = $('#tmls_image_radius');
	tmls_font_style = $('#tmls_font_style');
	tmls_text_font_family = $('#tmls_text_font_family');
	tmls_text_font_color = $('#tmls_text_font_color');
	tmls_text_font_size = $('#tmls_text_font_size');
	tmls_name_font_family = $('#tmls_name_font_family');
	tmls_name_font_color = $('#tmls_name_font_color');
	tmls_neme_font_size = $('#tmls_neme_font_size');
	tmls_neme_font_weight = $('#tmls_neme_font_weight');
	tmls_position_font_family = $('#tmls_position_font_family');
	tmls_position_font_color = $('#tmls_position_font_color');
	tmls_position_font_size = $('#tmls_position_font_size');
	tmls_orderByList = $('#tmls_orderByList');
	tmls_orderList = $('#tmls_orderList');
	tmls_numberInput = $('#tmls_numberInput');
	tmls_auto_play = $('#tmls_auto_play');
	tmls_pause_on_hover = $('#tmls_pause_on_hover');
	tmls_next_prev_visibility = $('#tmls_next_prev_visibility');
	tmls_next_prev_radius = $('#tmls_next_prev_radius');
	tmls_next_prev_position = $('#tmls_next_prev_position');
	tmls_scroll_duration = $('#tmls_scroll_duration');
	tmls_pause_duration = $('#tmls_pause_duration');
	tmls_border_style = $('#tmls_border_style');
	tmls_border_color = $('#tmls_border_color');
	tmls_columns_number = $('#tmls_columns_number');
	
	
	tmls_controls = $('input,select');
	tmls_buttons = $('.button-primary');
	
	// containers
	
	tmls_div_shortcode = $('#tmls_div_shortcode');
	
	tmls_gene_short_preview = $('#tmls_gene_short_preview');
	
	// options rows
	slider_options = $('.slider_options');
	border_options = $('.border_options');
	grid_options = $('.grid_options');
	image_options = $('.image_options');
	font_options = $('.font_options');
	border_color = $('.border_color');

	
	generate_shortcode();
	
	
	tmls_controls.change(function(){
		generate_shortcode();
	});
	
	tmls_buttons.click(function(){
		generate_shortcode();
	});
	
	
	// Layout
	tmls_layout.change(function(){
		
		if( tmls_layout.val() == 'tmls_slider' ) {
			slider_options.slideDown('slow');
			border_options.slideUp('slow');
			grid_options.slideUp('slow');
			
		}
		else if( tmls_layout.val() == 'tmls_grid' ) {
			slider_options.slideUp('slow');
			border_options.slideDown('slow');
			grid_options.slideDown('slow');
			
			if( tmls_border_style.val() == 'no_border' ) {
				border_color.slideUp('slow');
			}
			else {
				border_color.slideDown('slow');
			}
		}
		else if( tmls_layout.val() == 'tmls_list' ) {
			slider_options.slideUp('slow');
			border_options.slideDown('slow');
			grid_options.slideUp('slow');
			
			if( tmls_border_style.val() == 'no_border' ) {
				border_color.slideUp('slow');
			}
			else {
				border_color.slideDown('slow');
			}
		}
		
	});
	
	// Image Size
	tmls_image_size.change(function(){
	
		if( tmls_image_size.val() == 'no_image' ) {
			image_options.slideUp('slow');
		}
		else {
			image_options.slideDown('slow');
		}
		
	});
	
	// Font Style
	tmls_font_style.change(function(){
	
		if( tmls_font_style.val() == 'default' ) {
			font_options.slideUp('slow');
		}
		else {
			font_options.slideDown('slow');
		}
		
	});
	
	// Border Style
	tmls_border_style.change(function(){
	
		if( tmls_border_style.val() == 'no_border' ) {
			border_color.slideUp('slow');
		}
		else {
			border_color.slideDown('slow');
		}
		
	});
	
	

});

function generate_shortcode() {
	
	var postarray = {};
	var shortcode='[tmls ';
    
    postarray['category'] = tmls_category.val();
	shortcode+='category="'+tmls_category.val()+'" ';

	postarray['layout'] = tmls_layout.val();
	shortcode+='layout="'+tmls_layout.val()+'" ';
	
	postarray['style'] = tmls_style.val();
	shortcode+='style="'+tmls_style.val()+'" ';
	
	postarray['image_size'] = tmls_image_size.val();
	shortcode+='image_size="'+tmls_image_size.val()+'" ';
	
	if( tmls_image_size.val()!='no_image' ) {
		postarray['image_radius'] = tmls_image_radius.val();
		shortcode+='image_radius="'+tmls_image_radius.val()+'" ';
	}
	
	if( tmls_font_style.val()!='default' ) {
		postarray['text_font_family'] = tmls_text_font_family.val();
		shortcode+='text_font_family="'+tmls_text_font_family.val()+'" ';
		
		postarray['text_font_color'] = tmls_text_font_color.val();
		shortcode+='text_font_color="'+tmls_text_font_color.val()+'" ';
		
		postarray['text_font_size'] = tmls_text_font_size.val();
		shortcode+='text_font_size="'+tmls_text_font_size.val()+'" ';
		
		postarray['name_font_family'] = tmls_name_font_family.val();
		shortcode+='name_font_family="'+tmls_name_font_family.val()+'" ';
		
		postarray['name_font_color'] = tmls_name_font_color.val();
		shortcode+='name_font_color="'+tmls_name_font_color.val()+'" ';
		
		postarray['neme_font_size'] = tmls_neme_font_size.val();
		shortcode+='neme_font_size="'+tmls_neme_font_size.val()+'" ';
		
		postarray['neme_font_weight'] = tmls_neme_font_weight.val();
		shortcode+='neme_font_weight="'+tmls_neme_font_weight.val()+'" ';
		
		postarray['position_font_family'] = tmls_position_font_family.val();
		shortcode+='position_font_family="'+tmls_position_font_family.val()+'" ';
		
		postarray['position_font_color'] = tmls_position_font_color.val();
		shortcode+='position_font_color="'+tmls_position_font_color.val()+'" ';
		
		postarray['position_font_size'] = tmls_position_font_size.val();
		shortcode+='position_font_size="'+tmls_position_font_size.val()+'" ';
	}
	
	postarray['order_by'] = tmls_orderByList.val();
	shortcode+='order_by="'+tmls_orderByList.val()+'" ';
	
	postarray['order'] = tmls_orderList.val();
	shortcode+='order="'+tmls_orderList.val()+'" ';
	
	if( tmls_numberInput.val()!='' ) {
    		postarray['number'] = tmls_numberInput.val();
    		shortcode+='number="'+tmls_numberInput.val()+'" ';
    	}
	
	if( tmls_layout.val()=='tmls_slider' ) {
		postarray['auto_play'] = tmls_auto_play.val();
		shortcode+='auto_play="'+tmls_auto_play.val()+'" ';
		
		postarray['pause_on_hover'] = tmls_pause_on_hover.val();
		shortcode+='pause_on_hover="'+tmls_pause_on_hover.val()+'" ';
		
		postarray['next_prev_visibility'] = tmls_next_prev_visibility.val();
		shortcode+='next_prev_visibility="'+tmls_next_prev_visibility.val()+'" ';
		
		postarray['next_prev_radius'] = tmls_next_prev_radius.val();
		shortcode+='next_prev_radius="'+tmls_next_prev_radius.val()+'" ';
		
		postarray['next_prev_position'] = tmls_next_prev_position.val();
		shortcode+='next_prev_position="'+tmls_next_prev_position.val()+'" ';
		
		postarray['scroll_duration'] = tmls_scroll_duration.val();
		shortcode+='scroll_duration="'+tmls_scroll_duration.val()+'" ';
		
		postarray['pause_duration'] = tmls_pause_duration.val();
		shortcode+='pause_duration="'+tmls_pause_duration.val()+'" ';
	}
	
	if( tmls_layout.val()!='tmls_slider' ) {
		postarray['border_style'] = tmls_border_style.val();
		shortcode+='border_style="'+tmls_border_style.val()+'" ';
		
		postarray['border_color'] = tmls_border_color.val();
		shortcode+='border_color="'+tmls_border_color.val()+'" ';
	}
	
	if( tmls_layout.val()=='tmls_grid' ) {
		postarray['columns_number'] = tmls_columns_number.val();
		shortcode+='columns_number="'+tmls_columns_number.val()+'" ';
	}
	
	shortcode+=']';
	
	tmls_div_shortcode.html(shortcode);
	
	tmls_gene_short_preview.html('
    Loading ...
    ');
	
	tmls_gene_short_preview.load('../wp-content/plugins/tmls_testimonials/inc/generate_shortcode/do_shortcode.php', postarray , function(){
		
		tmls_sliders = $('.tmls_slider');
		tmls_style3_names = $('.style3 .tmls_name');
		tmls_visible_slider_buttons = $('.tmls_next_prev.tmls_visible');
		
		if (tmls_sliders.length )
		{
			tmls_sliders.each(function(){
				
				tmls_slider_play($(this));
				
				$(this).parent().parent().mouseenter(function(){
					$(this).children('.tmls_show_on_hover').slideToggle();
				});
				
				$(this).parent().parent().mouseleave(function(){
					$(this).children('.tmls_show_on_hover').slideToggle();
				});
			});
			
			tmls_visible_slider_buttons.fadeIn();
			
			$(window).resize(function() {
				tmls_sliders.each(function(){
					tmls_slider_play($(this));
				});
			});
			
		}
		
		
		
		if(tmls_style3_names.length) {
			tmls_style3_names.each(function(){
				$(this).css('padding-top', ($(this).parent().height()/2) - (($(this).height()+ 2.5 + $(this).parent().children('.tmls_position').height())/2));
			});
		}
		
		if( typeof jQuery.wp === 'object' && typeof jQuery.wp.wpColorPicker === 'function' ){

			jQuery( '#tmls_text_font_color' ).wpColorPicker();
			jQuery( '#tmls_name_font_color' ).wpColorPicker();
			jQuery( '#tmls_position_font_color' ).wpColorPicker();
			jQuery( '#tmls_border_color' ).wpColorPicker();

		}
		else {
			//We use farbtastic if the WordPress color picker widget doesn't exist
			jQuery('#tmls_text_font_colorpicker').farbtastic('#tmls_text_font_color');
			jQuery('#tmls_name_font_colorpicker').farbtastic('#tmls_name_font_color');
			jQuery('#tmls_position_font_colorpicker').farbtastic('#tmls_position_font_color');
			jQuery('#tmls_border_colorpicker').farbtastic('#tmls_border_color');
			
			tmls_farbtastic_inputs = $('#tmls_text_font_color,#tmls_name_font_color,#tmls_position_font_color,#tmls_border_color');
			
			tmls_farbtastic_inputs.focus(function(){
				$(this).parent().children('.tmls_farbtastic').slideDown();
			});
			
			tmls_farbtastic_inputs.focusout(function(){
				$(this).parent().children('.tmls_farbtastic').slideUp();
			});
		}		
				
	
	});
	
	
}


function tmls_slider_play(tmls_slider) {
	
	
	tmls_slider.carouFredSel({
		responsive: true,
		width:'variable',
		height:'variable',
		prev: {
			button: function() {
				return $(this).parents().children(".tmls_next_prev").children(".tmls_prev");
			}
		},
		next: {
			button: function() {
				return $(this).parents().children(".tmls_next_prev").children(".tmls_next");
			}
		},
		scroll: {
			items:1,          
			duration: tmls_slider.data('scrollduration'),
			fx:'crossfade'
		},
		auto: {
			play: tmls_slider.data('autoplay'),
			pauseDuration:tmls_slider.data('pauseduration'),
			pauseOnHover:tmls_slider.data('pauseonhover')
		},
		items: {
			width:700
		}
				
	});
			
}


})(jQuery);
  3. This is js to run testimonials carousel. 
    (function($){
$(window).load(function(){
	
	/*======================== Slider ========================*/
	
	tmls_sliders = $('.tmls_slider');
	tmls_style3_names = $('.style3 .tmls_name');
	tmls_visible_slider_buttons = $('.tmls_next_prev.tmls_visible');
	
	if (tmls_sliders.length )
	{
		tmls_sliders.each(function(){
			
			tmls_slider_play($(this));
			
			$(this).parent().parent().mouseenter(function(){
				$(this).children('.tmls_show_on_hover').slideToggle();
			});
			
			$(this).parent().parent().mouseleave(function(){
				$(this).children('.tmls_show_on_hover').slideToggle();
			});
			
		});
		
		tmls_visible_slider_buttons.fadeIn();
		
		$(window).resize(function() {
			tmls_sliders.each(function(){
				tmls_slider_play($(this));
			});
		});

		
	}
	
	if(tmls_style3_names.length) {
		tmls_style3_names.each(function(){
			$(this).css('padding-top', ($(this).parent().height()/2) - (($(this).height()+ 2.5 + $(this).parent().children('.tmls_position').height())/2));
		});
	}
		
});

$(window).load(function(){
	tmls_sliders.each(function(){
		tmls_slider_play($(this));
	});
});


function tmls_slider_play(tmls_slider) {
	
	tmls_slider.carouFredSel({
		responsive: true,
		width:'variable',
		height:'variable',
		prev: {
			button: function() {
				return $(this).parents().children(".tmls_next_prev").children(".tmls_prev");
			}
		},
		next: {
			button: function() {
				return $(this).parents().children(".tmls_next_prev").children(".tmls_next");
			}
		},
		scroll: {
			items:1,          
			duration: tmls_slider.data('scrollduration'),
			fx:'crossfade'
		},
		auto: {
			play: tmls_slider.data('autoplay'),
			pauseDuration:tmls_slider.data('pauseduration'),
			pauseOnHover:tmls_slider.data('pauseonhover')
		},
		items: {
			width:700
		}
				
	});
			
}

}) (jQuery);

F) PHP - top

  1. ( testimonials.php )
  2. ( inc/testimonial_custom_post.php )
  3. ( inc/shortcode.php )
  4. ( inc/widget.php )
  5. ( inc/generate_shortcode/generate_shortcode.php )
  6. ( inc/generate_shortcode/do_shortcode.php )
  7. ( inc/layouts/slider.php )
  8. ( inc/layouts/grid.php )
  9. ( inc/layouts/list.php )
  10. ( inc/layouts/styles/style1.php )
  11. ( inc/layouts/styles/style2.php )
  12. ( inc/layouts/styles/style3.php )
  1. <?php
/*
Plugin Name: Testimonials Wordpress plugin
Plugin URI: http://codecanyon.net/user/husamrayan
Description: Testimonials Wordpress plugin.
Version: 1.0
Author: husamrayan
*/

/*==========================================================================
	enqueue
==========================================================================*/

function tmls_theme_enqueue() {
	wp_register_style( 'tmls-testimonials', plugins_url('css/testimonials.css', __FILE__) );
	wp_enqueue_style( 'tmls-testimonials' );

	wp_enqueue_script('jquery');

	wp_register_script( 'tmls-carouFredSel', plugins_url('js/jquery.carouFredSel-6.2.1.js', __FILE__) );
	wp_enqueue_script( 'tmls-carouFredSel' );

	wp_register_script( 'tmls-testimonials-js', plugins_url('js/testimonials.js', __FILE__) );
	wp_enqueue_script( 'tmls-testimonials-js' );
}

add_action( 'wp_enqueue_scripts', 'tmls_theme_enqueue' );

function tmls_admin_enqueue() {

	wp_register_style( 'tmls-testimonials', plugins_url('css/testimonials.css', __FILE__) );
	wp_enqueue_style( 'tmls-testimonials' );

	wp_register_style( 'tmls-generate-shortcode-style', plugins_url('css/generate_shortcode.css', __FILE__) );
	wp_enqueue_style( 'tmls-generate-shortcode-style' );

	wp_register_script( 'tmls-carouFredSel', plugins_url('js/jquery.carouFredSel-6.2.1.js', __FILE__) );
	wp_enqueue_script( 'tmls-carouFredSel' );

	wp_register_script( 'tmls-generate-shortcode', plugins_url('js/generate_shortcode.js', __FILE__) );
	wp_enqueue_script( 'tmls-generate-shortcode' );

	global $wp_version;

	//If the WordPress version is greater than or equal to 3.5, then load the new WordPress color picker.
	if ($wp_version >= 3.5){
		//Both the necessary css and javascript have been registered already by WordPress, so all we have to do is load them with their handle.
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );

	}
	//If the WordPress version is less than 3.5 load the older farbtasic color picker.
	else {
		//As with wp-color-picker the necessary css and javascript have been registered already by WordPress, so all we have to do is load them with their handle.
		wp_enqueue_style( 'farbtastic' );
		wp_enqueue_script( 'farbtastic' );
	}


}

add_action( 'admin_enqueue_scripts', 'tmls_admin_enqueue' );


/*==========================================================================
	Testimonial custom post type
============================================================================*/

include('inc/testimonial_custom_post.php');


/*==========================================================================
	Shortcode
============================================================================*/

include('inc/shortcode.php');

/*==========================================================================
	Generate Shortcode Page
============================================================================*/

add_action('admin_menu', 'register_my_custom_submenu_page');

function register_my_custom_submenu_page() {
	add_submenu_page( 'edit.php?post_type=tmls', 'Generate shortcode', 'Generate shortcode', 'manage_options', 'tmls_generate_shortcode', 'tmls_generate_shortcode_callback' );
}

function tmls_generate_shortcode_callback() {

include('inc/generate_shortcode/generate_shortcode.php');

}

/*==========================================================================
	Shortcode Widget
============================================================================*/

include('inc/widget.php');

?>
			
  2. <?php

/*========================================================================================================================================================================
	Register Testimonial Post Type
========================================================================================================================================================================*/

add_action('init', 'tmls_init');
function tmls_init()
{
	/*----------------------------------------------------------------------
		testimonial Post Type Labels
	----------------------------------------------------------------------*/

	$labels = array(
		'name' => _x('Testimonials', 'Post type general name'),
		'singular_name' => _x('Testimonials', 'Post type singular name'),
		'add_new' => _x('Add new testimonial', 'Testimonial Item'),
		'add_new_item' => __('Add new testimonial'),
		'edit_item' => __('Edit testimonial'),
		'new_item' => __('New testimonial'),
		'all_items' => __('All testimonials'),
		'view_item' => __('View'),
		'search_items' => __('Search'),
		'not_found' => __('No testimonials found.'),
		'not_found_in_trash' => __('No testimonials found.'),
		'parent_item_colon' => '',
		'menu_name' => 'Testimonials'
);

/*----------------------------------------------------------------------
testimonial Post Type Properties
----------------------------------------------------------------------*/

$args = array(
	'labels' => $labels,
	'public' => false,
	'publicly_queryable' => false,
	'show_ui' => true,
	'show_in_menu' => true,
	'query_var' => true,
	'rewrite' => true,
	'capability_type' => 'post',
	'has_archive' => true,
	'hierarchical' => false,
	'menu_position' => null,
	'supports' => array('thumbnail','page-attributes')
);

/*----------------------------------------------------------------------
	testimonial Post Type Categories Register
----------------------------------------------------------------------*/
		
register_taxonomy(
	'tmlscategory',
	array('tmls'),
	array(
		'hierarchical' => true,
		'labels' => array( 'name'=>'Categories', 'add_new_item' => 'Add New Category', 'parent_item' => 'Parent Category'),
		'query_var' => true,
		'rewrite' => array( 'slug' => 'tmlscategory' )
	)
);

/*----------------------------------------------------------------------
	Register testimonial Post Type Function
----------------------------------------------------------------------*/

register_post_type('tmls',$args);

//Enabling Support for Post Thumbnails
	add_theme_support( 'post-thumbnails');
}


/*========================================================================================================================================================================
	testimonial Post Type All Themes Table Columns
========================================================================================================================================================================*/

/*----------------------------------------------------------------------
	Columns Declaration Function
----------------------------------------------------------------------*/
function tmls_columns($tmls_columns){

	$order='asc';

	if($_GET['order']=='asc') {
		$order='desc';
	}

	$tmls_columns = array(

	"cb" => "<input type=\"checkbox\" />",

	"order" => "<a href='?post_type=tmls&orderby=menu_order&order=".$order."'>
	<span>Order</span>
	<span class='sorting-indicator'></span>
	</a>",

	"thumbnail" => "Image",

	"title" => "Name",

	"position" => "Position",

	"company" => "Company",

	"testimonial_text" => "Testimonial Text",

	"author" => "Author",

	"date" => "Date",

	);

	return $tmls_columns;

}

/*----------------------------------------------------------------------
testimonial Value Function
----------------------------------------------------------------------*/
function tmls_columns_display($tmls_columns, $post_id){

	global $post;

	$width = (int) 80;
	$height = (int) 80;
		
	if ( 'thumbnail' == $tmls_columns ) {
			
		if ( has_post_thumbnail($post_id)) {
			$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
			$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
			echo $thumb;
		}
		else 
		{
			echo __('None');
		}

	}

	if ( 'order' == $tmls_columns ) {
		echo $post->menu_order;
	}

	if ( 'position' == $tmls_columns ) {
		echo get_post_meta($post_id, 'position', true);
	}

	if ( 'company' == $tmls_columns ) {
		echo '<a href="http://'.get_post_meta($post_id, 'company_website', true).'" target="'.get_post_meta($post_id, 'company_link_target', true).'">'.get_post_meta($post_id, 'company', true).'</a>';
	}

	if ( 'testimonial_text' == $tmls_columns ) {
		echo get_post_meta($post_id, 'testimonial_text', true);
	}

}

/*----------------------------------------------------------------------
	Add manage_tmls_posts_columns Filter
----------------------------------------------------------------------*/
add_filter("manage_tmls_posts_columns", "tmls_columns");

/*----------------------------------------------------------------------
	Add manage_tmls_posts_custom_column Action
----------------------------------------------------------------------*/
add_action("manage_tmls_posts_custom_column", "tmls_columns_display", 10, 2 );

/*========================================================================================================================================================================
	Add Meta Box For testimonial Post Type
========================================================================================================================================================================*/

/*----------------------------------------------------------------------
	add_meta_boxes Action For testimonial Post Type
----------------------------------------------------------------------*/

add_action( 'add_meta_boxes', 'tmls_add_custom_box' );

/*----------------------------------------------------------------------
	Properties Of testimonial Options Meta Box
----------------------------------------------------------------------*/

function tmls_add_custom_box() {
	add_meta_box(
		'tmls_sectionid',
		__( 'Options', 'tmls_textdomain' ),
		'tmls_inner_custom_box',
		'tmls'
	);
}

/*----------------------------------------------------------------------
	Content Of Testimonials Options Meta Box
----------------------------------------------------------------------*/

function tmls_inner_custom_box( $post ) {

	// Use nonce for verification
	wp_nonce_field( plugin_basename( __FILE__ ), 'tmls_noncename' );

	?>

	<!-- Styles -->
	<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/admin.css'; ?>">
	<!-- Name -->

	<p><label for="title"><strong>Name</strong></label></p>

	<input type="text" name="post_title" id="title" class="regular-text code" value="<?php echo get_post_meta($post->ID, 'name', true); ?>" />

	<hr class="horizontalRuler"/>


	<!-- Position -->

	<p><label for="position_input"><strong>Position</strong></label></p>

	<input type="text" name="position_input" id="position_input" class="regular-text code" value="<?php echo get_post_meta($post->ID, 'position', true); ?>" />

	<hr class="horizontalRuler"/>

	<!-- Company Name -->

	<p><label for="company_input"><strong>Company Name</strong></label></p>

	<input type="text" name="company_input" id="company_input" class="regular-text code" value="<?php echo get_post_meta($post->ID, 'company', true); ?>" />

	<hr class="horizontalRuler"/>

	<!-- Company Website -->

	<p><label for="company_website_input"><strong>Company Website</strong></label></p>

	<input type="text" name="company_website_input" id="company_website_input" class="regular-text code" value="<?php echo get_post_meta($post->ID, 'company_website', true); ?>" />

	<p><span class="description">Example: (www.example.com)</span></p>

	<hr class="horizontalRuler"/>

	<!-- Company Link Target -->

	<p><label for="company_link_target_list"><strong>Company Link Target</strong></label></p>

	<select id="company_link_target_list" name="company_link_target_list">
	<option value="_blank" <?php if(get_post_meta($post->ID, 'company_link_target', true)=='_blank') { echo 'selected'; } ?> >blank</option>
	<option value="_self" <?php if(get_post_meta($post->ID, 'company_link_target', true)=='_self') { echo 'selected'; } ?> >self</option>
	</select>

	<hr class="horizontalRuler"/>

	<!-- Testimonial Text -->

	<p><label for="testimonial_text_input"><strong>Testimonial Text</strong></label></p>

	<textarea type="text" name="testimonial_text_input" id="testimonial_text_input" class="regular-text code" rows="5" cols="40" ><?php echo get_post_meta($post->ID, 'testimonial_text', true); ?></textarea>

	<?php
	}

/*========================================================================================================================================================================
	Save testimonial Options Meta Box Function
========================================================================================================================================================================*/

function tmls_save_meta_box($post_id)
{
	/*----------------------------------------------------------------------
		Name
	----------------------------------------------------------------------*/
	if(isset($_POST['post_title'])) {
		update_post_meta($post_id, 'name', $_POST['post_title']);
	}

	/*----------------------------------------------------------------------
		Position
	----------------------------------------------------------------------*/
	if(isset($_POST['position_input'])) {
		update_post_meta($post_id, 'position', $_POST['position_input']);
	}

	/*----------------------------------------------------------------------
		Company
	----------------------------------------------------------------------*/
	if(isset($_POST['company_input'])) {
		update_post_meta($post_id, 'company', $_POST['company_input']);
	}

	/*----------------------------------------------------------------------
		company website
	----------------------------------------------------------------------*/
	if(isset($_POST['company_website_input'])) {
		update_post_meta($post_id, 'company_website', $_POST['company_website_input']);
	}

	/*----------------------------------------------------------------------
		company link target
	----------------------------------------------------------------------*/
	if(isset($_POST['company_link_target_list'])) {
		update_post_meta($post_id, 'company_link_target', $_POST['company_link_target_list']);
	}

	/*----------------------------------------------------------------------
		testimonial text
	----------------------------------------------------------------------*/
	if(isset($_POST['testimonial_text_input'])) {
		update_post_meta($post_id, 'testimonial_text', $_POST['testimonial_text_input']);
	}

}

/*----------------------------------------------------------------------
Save testimonial Options Meta Box Action
----------------------------------------------------------------------*/
add_action('save_post', 'tmls_save_meta_box');

?>
			
  3. <?php

/*========================================================================================================================================================================
	Shortcode
========================================================================================================================================================================*/

function tmls_shortcode($atts, $content=null) {
	extract(shortcode_atts( array(
    'category' => '-1',
	'layout' => 'tmls_slider',
	'style' => 'style1',
	'dialog_radius' => 'small_radius',
	'image_size' => 'large_image',
	'image_radius' => 'large_radius',
	'text_font_family' => '',
	'text_font_color' => '',
	'text_font_size' => '14',
	'name_font_family' => '',
	'name_font_color' => '',
	'neme_font_size' => '15',
	'neme_font_weight' => 'bold',
	'position_font_family' => '',
	'position_font_color' => '',
	'position_font_size' => '12',
	'order_by' => 'date',
	'order' => 'DESC',
	'number' => '-1',
	'auto_play' => 'true',
	'pause_on_hover' => 'false',
	'next_prev_visibility' => 'tmls_visible',
	'next_prev_radius' => 'small_radius',
	'next_prev_position' => '',
	'scroll_duration' => '500',
	'pause_duration' => '9000',
	'border_style' => 'tmls_border tmls_dashed_border',
	'border_color' => '#DDDDDD',
	'columns_number' => '2'
	), $atts));


	// query posts

	$args = array ( 'post_type' => 'tmls',
	'posts_per_page' => $number,
	'orderby' => $order_by,
	'order' => $order );
    
    if($category > -1) {
		$args['tax_query'] = array(array('taxonomy' => 'tmlscategory','field' => 'id','terms' => $category ));
	}

	$testimonials_query = new WP_Query( $args );

	$html='';

		if ($testimonials_query->have_posts()) {

		if($text_font_family!=''){
			$text_font_family='font-family:'.$text_font_family.';';
		}

		if($name_font_family!=''){
			$name_font_family='font-family:'.$name_font_family.';';
		}

		if($position_font_family!=''){
			$position_font_family='font-family:'.$position_font_family.';';
		}

		if($text_font_color!=''){
			$text_font_color='color:'.$text_font_color.';';
		}

		if($name_font_color!=''){
			$name_font_color='color:'.$name_font_color.';';
		}

		if($position_font_color!=''){
			$position_font_color='color:'.$position_font_color.';';
		}

		$html='<div class="tmls '.$style.' '.$image_size.'" >';

		if($layout=='tmls_slider') {

			$html.='<div class="tmls_next_prev '.$next_prev_visibility.' '.$next_prev_position.'">
			<a href="#" class="tmls_prev '.$next_prev_radius.'"></a>
			<a href="#" class="tmls_next '.$next_prev_radius.'"></a>
			</div>

			<div class="tmls_container '.$layout.'" data-autoplay="'.$auto_play.'" data-pauseonhover="'.$pause_on_hover.'" data-scrollduration="'.$scroll_duration.'" data-pauseduration="'.$pause_duration.'">';
		}
		else {

			$html.=' <div class="tmls_container '.$layout.' '.$border_style.'" >';

		}

		$i = 0;
		$current_column=0;

		while ($i < $testimonials_query->post_count) {

			$post = $testimonials_query->posts;

			$thumbnailsrc='';
			$bg_img='';
			$company='';
			$position='';


			// if has post thumbnail
			if ( has_post_thumbnail($post[$i]->ID)) {
				$thumbnailsrc = wp_get_attachment_url(get_post_meta($post[$i]->ID, '_thumbnail_id', true));
				$bg_img='background-image:url('.$thumbnailsrc.');';
			}

			if(get_post_meta($post[$i]->ID, 'company', true)!='') {

				if(get_post_meta($post[$i]->ID, 'company_website', true)!='') {
					$company='<a style="'.$position_font_color.'" href="http://'.get_post_meta($post[$i]->ID, 'company_website', true).'" target="'.get_post_meta($post[$i]->ID, 'company_link_target', true).'">'.get_post_meta($post[$i]->ID, 'company', true).'</a>';
				}
				else {
					$company=get_post_meta($post[$i]->ID, 'company', true);
				}

			}

			if(get_post_meta($post[$i]->ID, 'position', true)!='') {

				if(get_post_meta($post[$i]->ID, 'company', true)!='') {
					$position=get_post_meta($post[$i]->ID, 'position', true).' / ';
				}
				else {
					$position=get_post_meta($post[$i]->ID, 'position', true);
				}

			}



			if($layout=='tmls_slider') {
				include('layouts/slider.php');
			}
			elseif($layout=='tmls_grid') {
				include('layouts/grid.php');
			}
			else {
				include('layouts/list.php');
			}

			$i++;

			}

		$grid_column_class='';

		if($layout=='tmls_grid' && $current_column!=0) {

			while($current_column < $columns_number) {

				$html.='<div class="tmls_column '.$grid_column_class.'" style="width:'.(100/$columns_number).'%; border-color:'.$border_color.';"></div>';

				$grid_column_class='no_left_border';

				$current_column+=1;
			}
		}

		$html.='</div></div>';

	}

	return $html;

}
add_shortcode('tmls', 'tmls_shortcode');

?>
			
  4. <?php

// Testimonials Widget
class tmls_widget extends WP_Widget
{
	function tmls_widget() {
		$widget_options = array(
			'classname' => 'tmls-widget',
			'description' => 'Testimonials Widget'
		);

		parent::WP_Widget('tmls-widget', 'Testimonials', $widget_options);
	}

	function widget( $args, $instance ) {
		extract ( $args, EXTR_SKIP );
		$title = ( $instance['title'] ) ? $instance['title'] : '';
		$shortcode = ( $instance['shortcode'] ) ? $instance['shortcode'] : '[tmls]';
		echo $before_widget;

		if($title!='')
		{
			echo $before_title . $title . $after_title;
		}

		echo do_shortcode( $shortcode );

		echo $after_widget;

	}

	function form( $instance ) {
		?>
		<p>
		<label for="<?php echo $this->get_field_id('title'); ?>" >Title:</label>
		<input id="<?php echo $this->get_field_id('title'); ?>"
		class="widefat"
		name="<?php echo $this->get_field_name('title'); ?>"
		value="<?php echo esc_attr( $instance['title'] ); ?>" type="text" />
		</p>

		<p>
		<label for="<?php echo $this->get_field_id('shortcode'); ?>" >Shortcode:</label>
		<input id="<?php echo $this->get_field_id('shortcode'); ?>"
		class="widefat"
		name="<?php echo $this->get_field_name('shortcode'); ?>"
		value="<?php echo esc_attr( $instance['shortcode'] ); ?>" type="text" />

		</p>

		<?php
	}

}

function tmls_widget_init() {
	register_widget("tmls_widget");
}
add_action('widgets_init','tmls_widget_init');

?>
			
  5. 				<?php

?>

<h2 id="tmls_gene_short_title">Generate Shortcode</h2>


<div id="tmls_gene_short_leftSidebar">

	<div class="row">
		<label for="tmls_layout">Layout</label>
		<select id="tmls_layout" name="tmls_layout">
			<option value="tmls_slider">slider</option>
			<option value="tmls_grid">grid</option>
			<option value="tmls_list">list</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_style">Items Style</label>
		<select id="tmls_style" name="tmls_style">
			<option value="style1">style 1</option>
			<option value="style2">style 2</option>
			<option value="style3">style 3</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_image_size">Image Size</label>
		<select id="tmls_image_size" name="tmls_image_size">
			<option value="large_image">large</option>
			<option value="medium_image">medium</option>
			<option value="small_image">small</option>
			<option value="no_image">without image</option>
		</select>
	</div>

	<div class="row image_options">
		<label for="tmls_image_radius">Image Radius</label>
		<select id="tmls_image_radius" name="tmls_image_radius">
			<option value="large_radius">large radius</option>
			<option value="medium_radius" >medium radius</option>
			<option value="small_radius">small radius</option>
			<option value="no_radius">without radius</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_orderByList">Order By</label>
		<select id="tmls_orderByList" name="tmls_orderByList">
			<option value="date" selected >Publish Date</option>
			<option value="menu_order">Order</option>
			<option value="rand">Random </option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_orderList">Order</label>
		<select id="tmls_orderList" name="tmls_orderList">
			<option value="DESC" selected >Descending</option>
			<option value="ASC">Ascending</option>
		</select>
	</div>

	<div class="row">
		<label for="tmls_numberInput">Number of items</label>
		<input type="text" id="tmls_numberInput" name="tmls_numberInput" value="" placeholder="All" />
	</div>

	<div class="row slider_options">
		<label for="tmls_auto_play">Auto Play</label>
		<select id="tmls_auto_play" name="tmls_auto_play">
			<option value="true" selected >true</option>
			<option value="false">false</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_pause_on_hover">Pause On Hover</label>
		<select id="tmls_pause_on_hover" name="tmls_pause_on_hover">
			<option value="false">false</option>
			<option value="true" >true</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_next_prev_visibility">Slider Buttons Visibility</label>
		<select id="tmls_next_prev_visibility" name="tmls_next_prev_visibility">
			<option value="tmls_visible">visible</option>
			<option value="tmls_show_on_hover" >show on hover</option>
			<option value="tmls_hiden" >hiden</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_next_prev_radius">Slider Buttons Radius</label>
		<select id="tmls_next_prev_radius" name="tmls_next_prev_radius">
			<option value="large_radius">large radius</option>
			<option value="medium_radius" >medium radius</option>
			<option value="small_radius">small radius</option>
			<option value="no_radius">without radius</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_next_prev_position">Slider Buttons Position</label>
		<select id="tmls_next_prev_position" name="tmls_next_prev_position">
			<option value="">default</option>
			<option value="tmls_top" >top</option>
			<option value="tmls_bottom" >bottom</option>
		</select>
	</div>

	<div class="row slider_options">
		<label for="tmls_scroll_duration">Scroll Duration</label>
		<input type="text" id="tmls_scroll_duration" name="tmls_scroll_duration" value="500" />
	</div>

	<div class="row slider_options">
		<label for="tmls_pause_duration">Pause Duration</label>
		<input type="text" id="tmls_pause_duration" name="tmls_pause_duration" value="9000" />
	</div>

	<div class="row grid_options">
		<label for="tmls_columns_number">Columns Number</label>
		<select id="tmls_columns_number" name="tmls_columns_number">
			<option value="2">2 columns</option>
			<option value="3" >3 columns</option>
			<option value="4" >4 columns</option>
		</select>
	</div>

	<div class="row border_options">
		<label for="tmls_border_style">Border Style</label>
		<select id="tmls_border_style" name="tmls_border_style">
			<option value="tmls_border tmls_dashed_border">dashed</option>
			<option value="tmls_border tmls_solid_border" >solid</option>
			<option value="no_border" >without border</option>
		</select>
	</div>

	<div class="row border_options border_color">
		<label for="tmls_border_color">Border Color</label>
		<input type="text" id="tmls_border_color" name="tmls_border_color" class="tmls_farbtastic_input" value="#DDDDDD" />
		<div id="tmls_border_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_border_color_btn" name="tmls_border_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row">
		<label for="tmls_font_style">Font Style</label>
		<select id="tmls_font_style" name="tmls_font_style">
			<option value="custom" >custom style</option>
			<option value="default" >current theme style</option>
		</select>
	</div>

	<div class="row font_options">
		<label for="tmls_text_font_family">Text Font Family</label>
		<select id="tmls_text_font_family" name="tmls_text_font_family">
			<option value="" >current theme font</option>
			<option value="Georgia, serif" >Georgia</option>
			<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif" >Palatino Linotype</option>
			<option value="'Times New Roman', Times, serif" >Times New Roman</option>
			<option value="Arial, Helvetica, sans-serif" >Arial</option>
			<option value="'Arial Black', Gadget, sans-serif" >Arial Black</option>
			<option value="'Comic Sans MS', cursive, sans-serif" >Comic Sans MS</option>
			<option value="Impact, Charcoal, sans-serif" >Impact</option>
			<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif" >Lucida Sans Unicode</option>
			<option value="Tahoma, Geneva, sans-serif" >Tahoma</option>
			<option value="'Trebuchet MS', Helvetica, sans-serif" >Trebuchet MS</option>
			<option value="Verdana, Geneva, sans-serif" >Verdana</option>
			<option value="'Courier New', Courier, monospace" >Courier New</option>
			<option value="'Lucida Console', Monaco, monospace" >Lucida Console</option>
		</select>
	</div>

	<div class="row font_options">
		<label for="tmls_text_font_color">Text Font Color</label>
		<input type="text" id="tmls_text_font_color" name="tmls_text_font_color" value="#777777" placeholder="#777777" />
		<div id="tmls_text_font_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_text_font_color_btn" name="tmls_text_font_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row font_options">
		<label for="tmls_text_font_size">Text Font Size (px)</label>
		<select id="tmls_text_font_size" name="tmls_text_font_size">
			<option value="9px" >9</option>
			<option value="10px" >10</option>
			<option value="11px" >11</option>
			<option value="12px" >12</option>
			<option value="13px" >13</option>
			<option value="14px" selected >14</option>
			<option value="15px" >15</option>
			<option value="16px" >16</option>
			<option value="17px" >17</option>
			<option value="18px" >18</option>
			<option value="19px" >19</option>
			<option value="20px" >20</option>
			<option value="21px" >21</option>
			<option value="22px" >22</option>
			<option value="23px" >23</option>
			<option value="24px" >24</option>
			<option value="25px" >25</option>
			<option value="26px" >26</option>
			<option value="27px" >27</option>
			<option value="28px" >28</option>
			<option value="29px" >29</option>
			<option value="30px" >30</option>
			<option value="31px" >31</option>
			<option value="32px" >32</option>
			<option value="33px" >33</option>
			<option value="34px" >34</option>
			<option value="35px" >35</option>
			<option value="36px" >36</option>
		</select>

	</div>


	<div class="row font_options">
		<label for="tmls_name_font_family">Name Font Family</label>
		<select id="tmls_name_font_family" name="tmls_name_font_family">
			<option value="" >current theme font</option>
			<option value="Georgia, serif" >Georgia</option>
			<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif" >Palatino Linotype</option>
			<option value="'Times New Roman', Times, serif" >Times New Roman</option>
			<option value="Arial, Helvetica, sans-serif" >Arial</option>
			<option value="'Arial Black', Gadget, sans-serif" >Arial Black</option>
			<option value="'Comic Sans MS', cursive, sans-serif" >Comic Sans MS</option>
			<option value="Impact, Charcoal, sans-serif" >Impact</option>
			<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif" >Lucida Sans Unicode</option>
			<option value="Tahoma, Geneva, sans-serif" >Tahoma</option>
			<option value="'Trebuchet MS', Helvetica, sans-serif" >Trebuchet MS</option>
			<option value="Verdana, Geneva, sans-serif" >Verdana</option>
			<option value="'Courier New', Courier, monospace" >Courier New</option>
			<option value="'Lucida Console', Monaco, monospace" >Lucida Console</option>
		</select>
	</div>


	<div class="row font_options">
		<label for="tmls_name_font_color">Name Font Color</label>
		<input type="text" id="tmls_name_font_color" name="tmls_name_font_color" value="#777777" placeholder="#777777" />
		<div id="tmls_name_font_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_name_font_color_btn" name="tmls_name_font_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row font_options">
		<label for="tmls_neme_font_size">Name Font Size (px)</label>
		<select id="tmls_neme_font_size" name="tmls_neme_font_size">
			<option value="9px" >9</option>
			<option value="10px" >10</option>
			<option value="11px" >11</option>
			<option value="12px" >12</option>
			<option value="13px" >13</option>
			<option value="14px" >14</option>
			<option value="15px" selected >15</option>
			<option value="16px" >16</option>
			<option value="17px" >17</option>
			<option value="18px" >18</option>
			<option value="19px" >19</option>
			<option value="20px" >20</option>
			<option value="21px" >21</option>
			<option value="22px" >22</option>
			<option value="23px" >23</option>
			<option value="24px" >24</option>
			<option value="25px" >25</option>
			<option value="26px" >26</option>
			<option value="27px" >27</option>
			<option value="28px" >28</option>
			<option value="29px" >29</option>
			<option value="30px" >30</option>
			<option value="31px" >31</option>
			<option value="32px" >32</option>
			<option value="33px" >33</option>
			<option value="34px" >34</option>
			<option value="35px" >35</option>
			<option value="36px" >36</option>
		</select>
	</div>

	<div class="row font_options">
		<label for="tmls_neme_font_weight">Neme Font Weight</label>
		<select id="tmls_neme_font_weight" name="tmls_neme_font_weight">
			<option value="bold" >bold</option>
			<option value="normal" >normal</option>
		</select>
	</div>


	<div class="row font_options">
		<label for="tmls_position_font_family">Position Font Family</label>
		<select id="tmls_position_font_family" name="tmls_position_font_family">
			<option value="" >current theme font</option>
			<option value="Georgia, serif" >Georgia</option>
			<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif" >Palatino Linotype</option>
			<option value="'Times New Roman', Times, serif" >Times New Roman</option>
			<option value="Arial, Helvetica, sans-serif" >Arial</option>
			<option value="'Arial Black', Gadget, sans-serif" >Arial Black</option>
			<option value="'Comic Sans MS', cursive, sans-serif" >Comic Sans MS</option>
			<option value="Impact, Charcoal, sans-serif" >Impact</option>
			<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif" >Lucida Sans Unicode</option>
			<option value="Tahoma, Geneva, sans-serif" >Tahoma</option>
			<option value="'Trebuchet MS', Helvetica, sans-serif" >Trebuchet MS</option>
			<option value="Verdana, Geneva, sans-serif" >Verdana</option>
			<option value="'Courier New', Courier, monospace" >Courier New</option>
			<option value="'Lucida Console', Monaco, monospace" >Lucida Console</option>
		</select>
	</div>


	<div class="row font_options">
		<label for="tmls_position_font_color">Position Font Color</label>
		<input type="text" id="tmls_position_font_color" name="tmls_position_font_color" value="#777777" placeholder="#777777" />
		<div id="tmls_position_font_colorpicker" class="tmls_farbtastic"></div>
		<input type="button" id="tmls_position_font_color_btn" name="tmls_position_font_color_btn" value="View Color" class="button-primary" />
	</div>

	<div class="row font_options">
		<label for="tmls_position_font_size">Position Font Size (px)</label>
		<select id="tmls_position_font_size" name="tmls_position_font_size">
			<option value="9px" >9</option>
			<option value="10px" >10</option>
			<option value="11px" >11</option>
			<option value="12px" selected >12</option>
			<option value="13px" >13</option>
			<option value="14px" >14</option>
			<option value="15px" >15</option>
			<option value="16px" >16</option>
			<option value="17px" >17</option>
			<option value="18px" >18</option>
			<option value="19px" >19</option>
			<option value="20px" >20</option>
			<option value="21px" >21</option>
			<option value="22px" >22</option>
			<option value="23px" >23</option>
			<option value="24px" >24</option>
			<option value="25px" >25</option>
			<option value="26px" >26</option>
			<option value="27px" >27</option>
			<option value="28px" >28</option>
			<option value="29px" >29</option>
			<option value="30px" >30</option>
			<option value="31px" >31</option>
			<option value="32px" >32</option>
			<option value="33px" >33</option>
			<option value="34px" >34</option>
			<option value="35px" >35</option>
			<option value="36px" >36</option>
		</select>
</div>




</div>

<p id="noteParagraph">
	<strong>Note: </strong>copy the following shortcode in the yellow box to the page editor or post editor or testimonials widget to display the testimonials in the website.
</p>

<div id="tmls_div_shortcode">[tmls]</div>

<div id="tmls_gene_short_preview"></div>
			
  6. 			<?php
require('../../../../../wp-load.php');

$shortcode="[tmls ";

if($_POST['category']!=null) {
	$shortcode.='category="'.$_POST['category'].'" ';
}

if($_POST['layout']!=null) {
	$shortcode.='layout="'.$_POST['layout'].'" ';
}

if($_POST['style']!=null) {
	$shortcode.='style="'.$_POST['style'].'" ';
}

if($_POST['image_size']!=null) {
	$shortcode.='image_size="'.$_POST['image_size'].'" ';
}

if($_POST['image_radius']!=null) {
	$shortcode.='image_radius="'.$_POST['image_radius'].'" ';
}

if($_POST['text_font_family']!=null) {
	$shortcode.='text_font_family="'.$_POST['text_font_family'].'" ';
}

if($_POST['text_font_color']!=null) {
	$shortcode.='text_font_color="'.$_POST['text_font_color'].'" ';
}

if($_POST['text_font_size']!=null) {
	$shortcode.='text_font_size="'.$_POST['text_font_size'].'" ';
}

if($_POST['name_font_family']!=null) {
	$shortcode.='name_font_family="'.$_POST['name_font_family'].'" ';
}

if($_POST['name_font_color']!=null) {
	$shortcode.='name_font_color="'.$_POST['name_font_color'].'" ';
}

if($_POST['neme_font_size']!=null) {
	$shortcode.='neme_font_size="'.$_POST['neme_font_size'].'" ';
}

if($_POST['neme_font_weight']!=null) {
	$shortcode.='neme_font_weight="'.$_POST['neme_font_weight'].'" ';
}

if($_POST['position_font_family']!=null) {
	$shortcode.='position_font_family="'.$_POST['position_font_family'].'" ';
}

if($_POST['position_font_color']!=null) {
	$shortcode.='position_font_color="'.$_POST['position_font_color'].'" ';
}

if($_POST['position_font_size']!=null) {
	$shortcode.='position_font_size="'.$_POST['position_font_size'].'" ';
}

if($_POST['order_by']!=null) {
	$shortcode.='order_by="'.$_POST['order_by'].'" ';
}

if($_POST['order']!=null) {
	$shortcode.='order="'.$_POST['order'].'" ';
}

if($_POST['number']!=null) {
	$shortcode.='number="'.$_POST['number'].'" ';
}

if($_POST['auto_play']!=null) {
	$shortcode.='auto_play="'.$_POST['auto_play'].'" ';
}

if($_POST['pause_on_hover']!=null) {
	$shortcode.='pause_on_hover="'.$_POST['pause_on_hover'].'" ';
}

if($_POST['next_prev_visibility']!=null) {
	$shortcode.='next_prev_visibility="'.$_POST['next_prev_visibility'].'" ';
}

if($_POST['next_prev_radius']!=null) {
	$shortcode.='next_prev_radius="'.$_POST['next_prev_radius'].'" ';
}

if($_POST['next_prev_position']!=null) {
	$shortcode.='next_prev_position="'.$_POST['next_prev_position'].'" ';
}

if($_POST['scroll_duration']!=null) {
	$shortcode.='scroll_duration="'.$_POST['scroll_duration'].'" ';
}

if($_POST['pause_duration']!=null) {
	$shortcode.='pause_duration="'.$_POST['pause_duration'].'" ';
}

if($_POST['border_style']!=null) {
	$shortcode.='border_style="'.$_POST['border_style'].'" ';
}

if($_POST['border_color']!=null) {
	$shortcode.='border_color="'.$_POST['border_color'].'" ';
}

if($_POST['columns_number']!=null) {
	$shortcode.='columns_number="'.$_POST['columns_number'].'" ';
}


$shortcode.="]";

echo do_shortcode( $shortcode );
?>
			
  7. <?php

if($style=='style1') {
	include('styles/style1.php');
}
elseif($style=='style2') {
	include('styles/style2.php');
}
else {
	include('styles/style3.php');
}

?>
			
  8. <?php

$current_column+=1;

if($current_column==1) {
	$html.='<div class="tmls_row">';
}

if($style=='style1') {
	$html.='<div class="tmls_column" style="width:'.(100/$columns_number).'%; border-color:'.$border_color.';">';
	include('styles/style1.php');
	$html.='</div>';
}
elseif($style=='style2') {
	$html.='<div class="tmls_column" style="width:'.(100/$columns_number).'%; border-color:'.$border_color.';">';
	include('styles/style2.php');
	$html.='</div>';
}
else {
	$html.='<div class="tmls_column" style="width:'.(100/$columns_number).'%; border-color:'.$border_color.';">';
	include('styles/style3.php');
	$html.='</div>';
}

if($current_column==$columns_number) {
	$html.='</div>';
	$current_column=0;
}



?>
			
  9. <?php

if($style=='style1') {
	include('styles/style1.php');
}
elseif($style=='style2') {
	include('styles/style2.php');
}
else {
	include('styles/style3.php');
}

?>
			
  10. <?php



$html.='<div class="tmls_item" style="border-color:'.$border_color.';">


			<div class="tmls_image '.$image_radius.'" style="'.$bg_img.'"></div>

			<div class="tmls_text" style="'.$text_font_family.' '.$text_font_color.' font-size:'.$text_font_size.';">'.get_post_meta($post[$i]->ID, 'testimonial_text', true).'</div>

			<div class="tmls_name" style="'.$name_font_family.' '.$name_font_color.' font-size:'.$neme_font_size.'; font-weight:'.$neme_font_weight.';">'.get_post_meta($post[$i]->ID, 'name', true).'</div>
			<div class="tmls_position" style="'.$position_font_family.' '.$position_font_color.' font-size:'.$position_font_size.';">'.$position.$company.'</div>



		</div>';
?>
			
  11. <?php

$html.='<div class="tmls_item" style="border-color:'.$border_color.';">

			<div class="tmls_image '.$image_radius.'" style="'.$bg_img.'"></div>

			<div class="tmls_text" style="'.$text_font_family.' '.$text_font_color.' font-size:'.$text_font_size.';">'.get_post_meta($post[$i]->ID, 'testimonial_text', true).'</div>
			<div class="tmls_name" style="'.$name_font_family.' '.$name_font_color.' font-size:'.$neme_font_size.'; font-weight:'.$neme_font_weight.';">'.get_post_meta($post[$i]->ID, 'name', true).'</div>
			<div class="tmls_position" style="'.$position_font_family.' '.$position_font_color.' font-size:'.$position_font_size.';">'.$position.$company.'</div>

		</div>';
?>
			
  12. <?php
$html.='<div class="tmls_item" style="border-color:'.$border_color.';">

			<div class="tmls_text dialog_box '.$dialog_radius.'" style="'.$text_font_family.' '.$text_font_color.' font-size:'.$text_font_size.';">'.get_post_meta($post[$i]->ID, 'testimonial_text', true).'<span class="tmls_arrow"></span></div>

			<div class="tmls_image_position">
			<div class="tmls_image '.$image_radius.'" style="'.$bg_img.'"></div>

			<div class="tmls_name" style="'.$name_font_family.' '.$name_font_color.' font-size:'.$neme_font_size.'; font-weight:'.$neme_font_weight.';">'.get_post_meta($post[$i]->ID, 'name', true).'</div>
			<div class="tmls_position" style="'.$position_font_family.' '.$position_font_color.' font-size:'.$position_font_size.';">'.$position.$company.'</div>
			</div>

		</div>';
?>

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugins on codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

husamrayan

Go To Table of Contents