My HP

2nd June, 2017 | Tutorials |

WordPress – Grid Design and Pagination

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.

Get Wordpress Hosting

Steve Jobs once said that design is not just about how something looks, but also how it works. While that’s true, the reality is that people think more of appearance when we talk about design than the inner workings of an object. “Woops that site has a really amazing design”, well, meaning it has an amazing appearance, not just that it works so well. “I need to hire a web designer not a web developer”, well, he means he is looking for someone to customize the visual aspects of the website, not tinker with how things run in the metal.

But design is not just something that only Steve Jobs or the recent generations have taken seriously. Complex designs have been present since antiquity. We majorly talk about Grid design today, and it’s tempting to think of it first being used in the web. However, we couldn’t be far from the truth. Grid design has been applied for a very long time.

Most information is often presented as a list of posts. This is very effective and quite common. However, there are alternatives which to some people like myself prefer. One such alternative is Grid design or it’s variations like Masonry.

I love using Grids in my blogs to display posts. I intuitively prefer it to lists, especially if you have lots of posts.

One very good example of where it’s implemented quite well is the WordPress plugins’ portal.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/981838375.png" alt="Grid Design" />

It’s much easier to browse through thousands of plugins via a grid than a list. In a single viewport, you can present more plugins than with lists. Lists would require a lot of scrolling. Grids always look more compact compared to lists. Say you want to search a plugin, you don’t have to scroll to the top to find search form, yet it displays more plugins per viewport than the lists. Grid design makes efficient use of space.

The majority of folk tend to use grids only with media files like images and videos. Sites like YouTube and Pinterest use a lot of grids to display galleries of videos or images. However, grids can be very good with posts as well.

Objectives

The objectives of this tutorial is to show how to: - Employ Grids in showing of posts. - Show posts in Collapsible list. - Show posts in Scrollable list. - Paginate posts, and navigate among pages via Ajax.

Installation

We are using the ‘Post Grid & List for WordPress – Content Views’ plugin. Let’s install it:

  1. Head over to WordPress plugins portal. Search ‘grid’. HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/990709421.png" alt="Install Content Views" />
  2. Click ‘Install Now’ button to install our plugin.
  3. Click ‘Activate’ button to activate it.

Creating a Grid

You can create unlimited Grids with this plugin. Once the plugin is activated:

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/224090589.png" alt="Add New Page" />

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1969337695.png" alt="Grid Name and Type" />

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1202227659.png" alt="Filter and Sort Methods" />

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/982980973.png" alt="Display Settings" />

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/826106672.png" alt="Title and Thumbnail Settings" />

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1425308421.png" alt="Pagination Settings" />

RESULTS

Grid

Here’s our grid with images, text and categories.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/954140997.png" alt="Grid result" />

Collapsible List

You can also choose to display collapsible list instead of grid. Just choose it in the radiobutton as below:

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/944433154.png" alt="Choose Collapsible" />

Here’s the result: HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/613623019.png" alt="Collapsible with pagination" />

Scrollable List

You can choose to display a scrollable list as below:

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1589257359.png" alt="Choose Scrollable" />

Then you get this as the result:

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1876983164.png" alt="Scrollable Result" />

Conclusion

In this post we have seen how to use it to create grid posts, Ccollapsible lists as well as scrollable lists. Our plugin enables us implement numbered pagination. We could then navigate pages either via Ajax or full page loading.

A single grid could contain fields like title and content as well as an image. Moreover, we can easily set the number of columns to display per device. We have agreed that a mobile should in most cases have a single column. Let’s therefore go ahead and implement the grid design in our blogs.

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.

Get Wordpress Hosting

Comments