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.
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
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.
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.
Click on the Finish button. Now, your Loop Ouput should look like this:
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:
- Wrap your title in a header <h5></h5>.
- Wrap the image shortcode with <a href=””></a>.
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:-
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.