Dynamic testimonial slider

This tutorial will help you create an amazing dynamic testimonial slider like you can see in these demos.

1

Creating a new custom post type

Locate the CPT UI menu in your WordPress menu, and select the Add/Edit Post types option.

The CPT UI plugin in the WordPress menu

Fill the basic settings to your liking. For example, I'm going to create the Nextend Testimonials custom post type, so I'll write the following information to the available fields.

Post Type Slug	nextend-testimony
Plural Label	Nextend testimonials
Singular Label	Nextend testimonials

Like this

Then scroll to the very bottom of the page and find the Supports setting. Be sure that the Custom fields is checked.

Check the Custom fields option.

Scroll back to the top of the page and hit the blue Add Post type button. Your new custom post type is created, and you will be able to find it at the WordPress menu.

The newly created custom post type's menu.

2

Creating custom fields

Locate the Custom fields menu in your WordPress menu and click on it. From the appearing window, click on the Add new button.

Name your group as you would like to. We're going to create a custom field to store the following information:

• Submitter name
• Submitter avatar
• Submitter occupation
• Company name
• Company logo
• Link to company website
• Link to company's Facebook page

So, find the + Add field button at the right side of the box, and click on it.

A panel with lots of options will load. Here are the details for the "Submitter name" field:

Field Label	Submitter name
Field Name	submitter_name will be added automatically. Leave it.
Field Type	Text
Field Instructions	Write the name of the submitter here.

Click here to view the screenshot.

It's up to you whether this field is required or not. When you are done, click on the Close field button. Now let's add another custom field, this time, for the submitter avatar. Use these values:

Field Label	Submitter avatar
Field Name	submitter_avatar is added automatically.
Field type	Image
Return Value	Image Object
Preview Size	Thumbnail
Library	All

Click here to check the screenshot of the settings.

Now you have noticed that the plugin fills the Field name automatically with the correct value, so you don't have to worry about that. Create a new text type field for the Submitter occupation, Company name, Link to company website, and Link to company's Facebook page fields. Then create an image field for the Company logo just like the Submitter avatar.

When you have all seven fields done, scroll below and find the Location panel. Change the rule to read this: Post type - is equal to - nextend_testimony where nextend_testimony is the custom post type you created in step 1.

Then click on the Publish button on the right sidebar.

3

Create your testimonials

Go to the Nextend testimonials menu, select the Add new option and add a couple of testimonials. This is how a sample testimonial will look like:

4

Saving and loading a slide layout

Layouts are deprecated in Smart Slider 3.2. If you are using this version use copy slide method instead

Select a sample slider from our site and import it. Then go to a slide, and find the layout menu, and click on the Save as new layout button.

Name your layout to something you feel fit.

Create a new dynamic slide. You might stay in this slider or create a new one, but be sure to match the slider and slide sizes. You can select it from the "..." menu at the New slide.

Find the WordPress dynamic slide category, and from the dropdown, select the newly created testimonial post type.

If you are using 3.3.0 or above click the Posts button and select your Custom post type on the next page.

Set up your generator to your liking. Then click on save.

You will be redirected to a new page with the default dynamic slide layout. Go to the Layouts again, and load the previously saved layout.

If you are using version 3.2 or above just paste the slide you copied.

5

Now that you have the desired layout, all you have left is to change the content to your dynamic variables. Select for example the layer that has the company logo, hover over the Image field. You will see a blue Variable button appearing.

Click on it, and select the company_logo variable. You will probably need to scroll a lot to find it. (The one you need will contain a URL, not a number.) Hit the green Insert button to load the variable to the layer.

Change the other layers to use a dynamic variable. Now your generator is done.

When you are done, you should remove the other sliders from the sample slider.

Find the WordPress dynamic