About this tutorial
You’ll learn how to use Types and Views to create a slider with custom content. The slider loads pages from the server using AJAX, for fast load time.
You can use Types and Views to make powerful displays that will show off your content in stylish and unique ways. We’ve been implementing this at ICanLocalize to show off our services – we’ve got a main service page and then are using Views to create a slider that shows off projects that we have completed. This tutorial will show you how to integrate this type of slider on your own site.
Here’s how it will look:
The steps will be as follows:
- Create a Content Template to display each project
- Create a View that filters to display projects with the same taxonomy term as the current page in a slider
- Insert the slider into a page.
What You Will Need
Before you get started you will need to do the following with the tutorial files:
- Add the images to your theme folder in a folder called “images”
- Add the JS to a folder in your theme folder called “js”
- Add the CSS to your style.css or us @import to import it
Here’s what you will need:
Custom Post Type:Projects (Project(s))
Display Sections: Title, Editor
Custom Taxonomy: Service Types (Service Type(s))
Attached to: Post, Page, Projects
Custom Field Group: Projects
- Project Icon – image
- Testimonial – multiple lines
- Testimonial extract – multiple lines
- Company – single line
- Client name – single line
- URL – URL field
Once you have created your content types, you need to decide how to display them. The project slider works by displaying projects that are the same service type as the current page. So, if I go to the iPhone localization page, the slider will display all of the projects that come under that service type.
Here’s a diagram that explains how it works:
1. Create a Content Template
You can use a Content Template to display content types. You can read more about Content Templates here. You’re going to create a Content Template for your Projects. This will determine what information is displayed on a single project page, and how it is displayed. You can insert your custom fields into the main body of the Template and then add styles to them.
a) Give it a Name
Navigate to Content Templates > Add New
Give your Content Template a name – I’m going to call mine “Project Slider Item”
b) Insert Shortcodes
Views uses shortcodes to insert custom fields. Click on the “V” icon to bring up a list of the available shortcodes.
You want to add the following shortcodes:
Use the V icon to insert these shortcodes. In a minute, you’ll wrap them in HTML to style them.
c) Style Your Content
At the minute, this Content Template will just pull out the correct information without any additional styling. In order to make it display in an attractive manner, you need to put your HTML and CSS skills to use. You can wrap each of these shortcodes in a <div> and then style them using CSS.
Here is the HTML:
<div class="icl-theme-project-slider-more"> <div class="project-slider-title">[wpv-post-title]</div> <img class="project-slider-thumb-more" alt="" src="[wpv-post-field name='project_icon']" height="50" /> <div class="project-slider-body">[wpv-post-body view_template='None']</div> <div class="project-slider-testimonial">[wpv-post-field name='testimonial']</div> <div class="project-slider-testimonial-author">[wpv-post-field name='testimonial_name']</div> <div class="project-slider-testimonial-author-role"> <a href="[wpv-post-field name='testimonial_url']" target="_blank">[wpv-post-field name='testimonial_company']</a> </div> </div> <img class="project-slider-thumb" alt="" src="[wpv-post-field name='project_icon']" /> <div class="project-slider-title">[wpv-post-title]</div> <div class="project-slider-excerpt">[wpv-post-field name='testimonial_short']</div>
2. Create a View
- The View will display items as the same term as the current page
- A page will be created with the iPhone Localization term in the Service Type taxonomy
- Insert the shortcode for the View
- The slider will display all items with the iPhone localization term
This lets us create individual project pages, each of which have a dynamic slider showing all services of that type. This method of displaying content really takes advantage of the power of Views, letting you filter and display information in complex ways without the need for any PHP coding.
Let’s create a View. Go to Views > Add New
Give your View a name – I’m going to call this “Project Slider”
You’ll see two shortcodes in the text editing area:
- [wpv-filter-meta-html] – this shortcode is used to filter the database
- [wpv-layout-meta-html] – this shortcode is used to generate your display
a) Query the Database
Scroll down to View Query. This is where you determine how to query the database. You need to add two filters here. The first will be to filter the Projects post type, by post date, in descending order.
This means the View will display Projects by post date in a descending order.
When you have done this click “Add another filter term”
A popup will appear. From the first dropdown choose “Service Types” and from the second choose “Value Set by the Current Page.”
Next you need to set the pagination. This will determine how many of the projects will display at once. Click “Edit” beside Pagination. Use the following settings:
- Pagination: Paged
- Check “Limit the Number of Results (use pagination)”
- Set the number of items to 3
- Check “include next page and previous page controls”
- Select Pagination updates only the View (use AJAX)
- Select the “Slide horizontally” transition effect
- Check “Preload images before transition”
Your settings should look like this:
c) Create your Layout
Scroll down to “View Layout”. This will determine the layout of your View. For this you need a three column grid. Like so:
Click “Edit/View HTML” Add the following code:
[wpv-posts-found]<div class="icl-theme-project-slider">[/wpv-posts-found] [wpv-layout-start] <!-- wpv-loop-start --> <table width="100%"> <wpv-loop wrap="3" pad="true"> [wpv-item index=1] <tr><td>[wpv-post-body view_template='project-slider-item']</td> [wpv-item index=other] <td>[wpv-post-body view_template='project-slider-item']</td> [wpv-item index=3] <td>[wpv-post-body view_template='project-slider-item']</td></tr> </wpv-loop> </table> <!-- wpv-loop-end --> [wpv-layout-end] [wpv-posts-found]</div>[/wpv-posts-found]
3. Add the View to a Page
The final step is to create a page, apply the “iPhone Localization” term in the “Service Types” taxonomy, and insert the View shortcode.
Navigate to Pages > Add New
Give your page a title. I’m going to call this one “iPhone Translation” as it will display information about the iPhone localization service that iCanlocalize provides.
You can add any introductory text and images that you want. As you can see from our page at iCanLocalize, we’ve added a lot of information about this service, prices and call to action buttons. You should add relevant information for whatever service you are providing.
There are two important steps here that you need to complete to get your page displaying correctly.
a) Insert the View Shortcode
If you click on the “View” icon you’ll see a number shortcodes you can insert. Click on “project-slider”
The View is now inserted into the page. You can also added some HTML to style the View:
<div style="margin: 2em 0; border: 1pt solid #C0C0C0; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;"> <h2 style="font-size: 200%; text-align: center;">iPhone apps we translated recently</h2> [wpv-view name='project-slider'] <em>Click on the program icons for client testimonials!</em></div>
b) Add a Service type term
By adding a Service type term to the page, any piece of content with the same term will be displayed in the slider. This lets us show off all of the projects that we have carried out as part of this Service.
When you are happy with the page click “Publish.”
Your View Slider will now be displayed like the one we have on ICanLocalize.