Hello and welcome to another awesome tutorial – Content Views Plugin. Today I’m going to show you how you can display your WordPress posts in the form of a grid. and over here I’ve got some examples you can see over here we have a three-column our grid featuring. the featured image the title of the post, as well as the category of the post down here, is another example where we also have a three-column grid with the featured image of each individual post as well as the title the date of the post as well as the excerpt of each individual post all right. so we’re going to use an awesome plugin called the content views plug-in. in order to achieve this functionality and this is easily one of the best free plug-ins out there on the Internet and of course they have a professional version that offers more features but the free version of this plug-in is just awesome so let’s get cracking.
now I’m here on my Batman peace women website which by the way if you haven’t seen my awesome tutorial on how to build this website. I will add the links into the description box below alright. so now by default this is all my blog page looks like it’s one column and we have each individual post with the title some meta-information the featured image as well as the excerpt. and there you go that’s pretty much how the default blog layout is now if you’re wondering why a lot of this posts look very similar. it’s because I did clone most of my posts I simply made copies of each individual original post fact that I had simply because I was just too lazy to go ahead and create new posts all over alright so I’m just come down here to the back end.
now I’ve already gone ahead to install the content views plug-in and it’s by I was the guy now it’s by it’s by Petey guy. so just in case you’re wondering who created this plugins my pizza guy. it’s an awesome plugin go ahead and install and then activate the plug-in and once you activate the plug-in you’ll have the tab here that says content views. so I’m just gonna go ahead and click add new. so let’s go ahead and give it a title which will be roof posts grid posts grid and now over here we can choose to display either the posts or our pages in the form of a grid usually posts will be for grades while pages just display pages just as they are there’s no need to add pages into grids all right. so let’s stick with the post and now over here we can choose to filter the kind of posts that we want to display we can either choose to include only certain types of posts or we can also choose to exclude certain posts from the grid.
and of course you can do that by adding the IDs of each individual post we can also choose to limit the number of posts that we would like to show. let’s just go ahead and limit this to 15 and then over here is where we have some advanced filters where we can also choose to display posts from a setting category or posted only have certain tags or posts that have that are finally sitting author or have a certain status.
so if I click tacks on a for example we have the options here to go either with a category or a tag I can click the category. and then over here can choose to add whatever categories that I would like to pull my posts specifically from but I’m going to go ahead and display all my posts. so I don’t have to use any one of these filters all right so let’s go ahead and save this and when you create a new view the plug-in will automatically generate a shortcode for you. so over here I’ve got my shortcode and green I’m just going to copy this I’m going to come down to my pages and I’ve actually going to have to create a page called test grade which we can use to test out this plugin.
all right so I’m just going to paste the shortcode over here yeah oops right-click paste.
let’s click update and now let’s go ahead and preview the page preview changes oh let’s see I’m so excited I can’t believe it.
alright awesome so now you can see we have our test grid we have our two columns. we have the featured image the title as well as the excerpt and there you go we have our posts grid. but check this out check this out we can actually do so much more. if I come back down to my content views click on all views and then click Edit over here to edit the view that we created. if I click on display settings over here we can do a lot alright so we have three basic layouts we have the grid collapsible list. and we have the scrollable list this is the default grid style so let’s change this to collapsible or list. and then over here we also have this button that says update preview if I click on that button over here we have a degeneration of what it’s going to look like on our real page we have a sample.
so what the collapsible is what happens is all our posts will be in the form of an accordion basically. so when you click on the title of each post it will open up with the featured image as well as the excerpt as you can see click on another post. the previous one closes and then we have the new one click on another post. the last one that we clicked on will close automatically and then we have this one it’s pretty pretty interesting it’s kind of nice. we also have the scrollable or least let me go ahead and update the preview. and now with the scribble scrollable is what happens is you have all these buttons at the bottom of the screen which you can then click on which will then display each individual post. each post will scroll from the right to the left but I kind of like my grid.
so let’s stick with the grid and then over here we can choose to display how many items you want on each row the default is to let’s change that two three and of course the layout format for each post. we can choose one column or two columns let’s just stick with one column and over here we can choose to either show or hide the featured image or we can also do the same for the title the content or with the meta fields. let’s just go ahead and show meta fields as well so we’re going to show the category the auto date comment and so on and so forth.
all right oh and over here you can see they have some sort of advertisement saying you can actually change the display order with the professional version. so which means you can actually choose to show the content first and then the thumbnail and then the title or you can simply choose to go ahead. and show the content after the title before the thumbnail and you know just display the information any way you would like to display the information. all right thumbnail size we can also choose to display certain sizes of our featured images. we’ve got the thumbnail medium large full size. and of course we also have the post thumbnail size I’m just going to stick with the with the medium size.
for now medium is fine and of course you can also choose to disable responsive images for WordPress 4.4 if the thumbnail size looks blowy. but I’m just going to leave this unchecked and then the last but not least oh we also have meta fields. but let’s just talk about the content first of all we can either choose to show the full contents or simply show an excerpt of each content and then indicate how many words would like to display 20 words. it’s fine metal fields as well we can also choose again to display either the date the author comment count and so on and so forth so let’s just go ahead and show our the date let’s show the author. let’s also show the taxonomies our pagination we can choose to enable pagination if you want to and then we can also choose to either choose for our post to open in a new tab.
on the current tab when I either the title the thumbnail or the read more button is clicked alright that’s a lot of information.
I’m just going ahead and click Save and let’s take a look at what we have come down here refresh alright. so remember we chose three items per row so let’s see how this looks like.
alright also we’ve got three items per row and you also have the meta.
information that we included we have the date the author, as well as the category of each blog post, created pretty sweet alright. so that’s pretty much how to use these amazing free plugin to generate grids for your blog posts. if you’ve got any questions feel free to ask them in the comment section.