How to Display a Postcard-Style Grid of Posts in WordPress
All over the web, you will find a design pattern, in which the information about the latest posts or any other kind of listing is presented in a card layout with the post image, its title, and often with a little excerpt of the article.
This visual aid is there for the users. It helps them to view the information quickly, and therefore make the right choice when clicking the “Read more” button.
The Content Views WordPress plugin allows you to configure two more layout styles:
- Collapsible list
- Scrollable list
You can use this to display a post or page “view” within your content. You can achieve this by using a shortcode that you get when configuring the view. Keep reading to learn how!
Step #1. Install the Required Plugin
- Download the Content Views plugin from its project page to the /wp-content/plugins/ folder
- Extract the compressed folder and delete the zip file
- On your WP Dashboard click Plugins, locate the Content Views plugin
- Click Activate
You will see appear a new menu called Content Views.
Step #2. Create Content
- Click Posts > Add new
- Enter a proper title, an image and body text
- Click Publish
- Repeat the process and create 6-8 additional posts
The All Posts screen should look more or less like the image below.
Step #3. Configure the View
- Click Content Views > Add new
The Content Views interface has a title field on top, that way you can give a custom name to each view, this eases the search. It is composed of two tabs, Filter Settings, and Display Settings.
The free version of the plugin allows you to create views for the two WordPress default content types.
- On the Filter settings tab select the Post option
- Change the Limit of posts to be presented to 8
- Click the Show Preview button. You will see a preview on top of the screen
The Advance section is only available to users of the paid version of the plugin. If you need this type of layout, click Save, to get the shortcode.
Let’s take a look at the other layout types.
- Click the Display Settings tab
This section handles the visual aspect of the view, the Filter settings tab, on the other hand, relates to the query in your WP database.
- Click the Show Preview button
You will see the preview on top once again.
- On the Layout section click Collapsible List
- Click Update Preview
The view is now a list made of collapsible tabs. Click on them to watch their behavior.
- Select Scrollable list
- On the Field settings section uncheck Show Content
- Check Show Meta Fields (Taxonomy, Author, Date, Comment)
- Change the title HTML tag to
h3 - Change the Thumbnail size to (150×150) – this has to be a featured image in the post (for the free version of the plugin)
- Choose Show Date and Show Taxonomies as meta fields
- Click Update Preview and take a look
- Click Save
You will see a generated shortcode. This will embed the view in your site wherever you place the code.
Step #4. Place the Shortcode
- Copy the shortcode
- Click Appearance > Widgets
- Click the Text widget and place it in one of your sidebars (I’m working with the Twenty Seventeen theme)
- Paste the shortcode and click Save
- Rearrange the widget if needed
- Take a look at your site
The Content Views plugin allows you to display listings of content in different visual formats, which improve the user experience of your site. Thanks for reading!