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
Post Type Slug nextend-testimony Plural Label Nextend testimonials Singular Label Nextend testimonials 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.
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