View 강좌 2 – The Services grid

Acme Inc. wants all its Services to be visible on the homepage. We’re going to add a grid containing all services, displaying just the name and an image for each. Clicking on the grid item will link to the detail record for the service

1. Creating the View

  • Go to Views in the WordPress Dashboard and Add New View.
  • We aren’t going to add pagination or filters to our View so we’ll just use the vanilla Display all results.
  • Give your View a name, we called ours Services grid and hit Create View.
Views tutorials - Add view - Display all results
Views tutorials – Add view – Display all results

2. The Query section – choosing what to display

We’ll be outputting Services from this View. We won’t be filtering our results, we’ll just display all of our Services.
We do want to display Services ordered by Service name.

  • In Content Selection, click on the Services post type
  • Select Order by: post title Descending
Views tutorials – query section
Views tutorials – query section

3. The Loop Output section – Creating the Grid

We are going to add a Grid for your Service items. To do so, click on the Loop Wizard button, select the Table-based grid mode and set 4 as the number of columns.

Views tutorials – Loop Wizard
Views tutorials – Loop Wizard

Then, click Next and select the fields that you want to include: Title with a link and Service image. Edit the attributes for the image, and set its title and alternative text. Give it also a custom size and set its maximum pixel width to something like 178.

Also, be sure that the checkbox to create a Content Template wrapper is checked.

Views tutorials – Loop Wizard – select content
Views tutorials – Loop Wizard – select content

Click on the Finish button. Now, your Loop Ouput should look like this:

Services grid item


Loop parameters and wpv-item

We’ve inserted a lot of code there with just a couple of clicks. You don’t need to understand how this works in detail to display your grid, but if you want to find out more then check out our article about Loop parameters and wpv-item.

4. The Content Template – Styling the Grid item

You will notice that Views has wrapped all your fields into a new Content Template. That Content Template is assigned to this View as the building block of its output. Scroll down to the Templates for this View section to edit it:

Views tutorials – Loop Template
Views tutorials – Loop Template
  • Wrap your title in a header <h5></h5>.
  • Wrap the image shortcode with <a href=””></a>.
Services grid item formatted

<a href="">

5. Adding the Grid to your page

Now you just need to add your Grid to the homepage.

  • Edit the homepage
  • Position the cursor to the right of the slider shortcode you added in the first tutorial.
  • Click on the Fields and Views button to open the shortcode dialog
  • Click on the View name, Services grid, to insert
  • Update the page to save your changes.

The final result

Go to your site and take a look at the home page. Hopefully, you’ll see the following:-

Views tutorials - Services slider and grid
Views tutorials – Services slider and grid

You’ve built the Services grid and added it to your site.

Next: Views Tutorials Part 3 – Service detail page

Click the button below to get started.

Part 3 – Service detail page

Views tutorials - Service detail
Views tutorials – Service detail

댓글 남기기