How to Create a Tutorials Page that Auto Populates

I’ve been working on a site migration (blogger–>self-hosted wordpress) for a friend, and one of the most important things to her was to be able to have an auto-populating tutorials page on her new site. You know, one that doesn’t have to be hand coded EVERY. SINGLE. TIME. she adds a new tutorial. I know this is something a lot of DIY/sewing bloggers would just LOVE to have, so today I’m going to show you how to create a tutorials page that auto populates! Yeah!

So for example, if you already have 343 tutorials on your blog, and you don’t want to have to go back through every single one, cutting and pasting bunches of html into a tutorials page, you can use these instructions to make it all magically appear on a page of your choosing! And then, you can add that page to your navigation menu. Simple as that. And this works for any kind of aggregated list – not just tutorials. You could have a recipes page, a sewing pattern reviews page, whatever. It works just the same.

The steps

1. Have a self-hosted wordpress blog. This kind of goes without saying. But these instructions will not work on Blogger, WordPress.com, Typepad, etc.
2. Install the List Category Posts plugin. To do this, go to Plugins –> Add new:Search for “list category posts.”
   Click on “Install Now” when it pops up in the search results.
   Activate the plugin…

   

3. Go through all your tutorials posts and make sure they’re categorized as “tutorial” or something to that extent. If you’ve already used a certain category for the type of post you’re targeting, that’s fine.
4. Create a new page (not post) called “Tutorials” or “Recipes” or what-have-you. This will be the page where the gallery of your tutorial/recipe/whatever post thumbnails appears.
5. In the area where you normally type the page contents, put in the following shortcode, replacing “tutorial” if needed with the category name you’ve been using or you’ve created (such as recipes, reviews, etc.):

   (the only way I can figure out to share this with you without having the shortcode WORK on my page is to let you download this text file with the code in it! So click here to download it and copy the code!)

6. Publish the page, and take a look at it. (But don’t worry if it isn’t the prettiest just yet!)
7. Add the following css to your theme’s custom css. (You’ll need to play with the values for margins/padding/etc. to get everything looking perfect depending on your column width and overall layout.)lcp_paginator.css:
/* catelist table form */
.lcp_catlist{
margin-left:auto;
margin-right:auto;
font-size:16px;
line-height:35px;
}
.lcp_catlist li {
width:28%;
min-height:150px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 0px;
padding:19px;
zoom: 1;
*display: inline;
}
.lcp_catlist li:after {
content:'.';
height:0px;
visibility:hidden;
display:block;
clear:both;
}

   #lcp_instance_0 {padding-left:0px; margin-left:-19px;}

8. Add a link to the newly created tutorials page to your navigation menu.
9. Be sure to categorize all future posts that you want to go here with the category previously specified in the shortcode.
10. You can further customize the output on the page (pull posts from multiple categories, change the number of posts that show up, etc.) by looking at the documentation on the List Category Pages plugin page.
11. Admire your work!

If your thumbnails don’t show up, it’s probably because you haven’t set a featured image for every post. You can use the Media Tools plugin to go back through your posts and make the first image in each one the featured image.

Pretty simple, eh? Leave me a comment below showing me your work! I would love to see what you do with this tutorial!