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:

Custom slider built with Views (click to zoom)

The steps will be as follows:

  1. Create a Content Template to display each project
  2. Create a View that filters to display projects with the same taxonomy term as the current page in a slider
  3. 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

You will also need to create some Custom Post Types, Custom Taxonomies and Custom Fields. You can read about how to create these with Types in the User Guide section.

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:

A diagram showing how the WordPress slider 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.

Views will pick up any available shortcode in your WordPress installation. This means that you can easily integrate it with other plugins such as eCommerce and ratings, for example.

You want to add the following shortcodes:

  • Title
  • Body
  • Testimonial
  • Client
  • URL
  • Company
  • Icon

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 be inserted into a page to display the slider. Here’s how it will work:
  • 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

Do not remove the two default shortcodes

Do not remove these shortcodes. They are needed for the View to work.

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.”

b) Pagination

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:

the layout meta box with the grid layout selected

You need to load some Javascript to make the slider work. You should have already added this to your theme folder.

Where it says “Additional Javascript files to be loaded with this View (comma separated):” add the following:

[theme]/js/projects-slider.js

[theme] refers to the current live theme.
You can also add some HTML to style the slider.

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]

Click “Publish”.


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.