BY MARILYN LESNIAK
Hello, everyone! I hope you are having a good day, and that this tutorial will be helpful to you! I have made it as simple and inclusive as I can.
Creating A Visual Recipe List in WordPress
If you have any questions please feel free to comment in the space below this post. Read the guide a few times before starting. I know it is a lot to comprehend at one time. Just follow the steps outlined and you should be up and running in no time. You will also find this tutorial on my blog Marilyn’s Treats under the heading Articles and Tutorials at the top of the Home Page.
Now, on with the show!
This tutorial only works for self-hosted blogs (WordPress.org). Blogger blogs have different cores. Barefeet in the Kitchen has a great tutorial for those! There are no stylesheet or code changes needed. You don’t need to learn CSS or HTML or create a portal page. These plugins do all the heavy lifting and you just need to fill in the blanks. Trust me, if I can do it, anyone can!
You will need these plugins: Go to dashboard, plugins, new. In “search” input plugin name, search. Find version, add. Activate. Set any settings required. The plugin description will explain what is needed.
1) WP Category Post List Widget version 2.0.3 activate. This plugin is used to help you choose your criteria for a code to put in each categories page. Authors site will explain what each part means. More details as we go.
2) Reveal ID’s version 1.4.5. Add plugin as above and activate. This will give you the specific ID you will need as you build each category page and add your images to a Tiled Gallery.
3) Jetpack by WordPress.com version 2.8. (Works for WordPress.org too) Install as above and activate. This will let you build your gallery. It also has a list of features available for other things. On your dashboard at the top, you will find Jetpack. Click on it and it will take you to the explanation and settings pages for each module. You will love it! It combines many options for additions for your blog. You won’t need Flickr, Photoshop, Picmonkey or any other image service. As a bonus, it plays nice with WordPress and has great support.
4) WP Gallery Custom Links version 1.9.0. This adds an additional box in your media area where you input your category page short links.
Now for creating your visual index, these are the things you will be doing:
You will make and add the categories you want for your index. You will find images and add them to your media library. These will be your index photos and they will not change. They will get their titles as you create your gallery. You will create a page for each category. When these are made you will be making the foundation of your index. Your gallery will be created on a page you call Recipes or Index or whatever. You will insert THIS page in your menu where your home page is located. And now you have a visual Recipe Index!
Follow these steps:
1) Define your categories. Add each type as a category (posts, categories, add) from your dashboard. Notate ID as you list (“post, categories, all”) from you dashboard. You will find them listed at the end of the row.
2) Now is when you upload your photos. On your dashboard, go to “media, library”. Choose “add image, existing file”, and choose from the photos housed on your computer. Click add. This will take you to that image “page”. Click save.
3) Create a PAGE for each category. Publish. Go to your dashboard “pages, all”. Pages ID will be listed on end. Notate all id’s.
Click on “short link” and notate it. You will need this when you make your gallery. On each PAGE you will input the category post code (see example below) for that particular category. This goes in the TEXT area of the page. Use “Featured Image” on the right side of the page and choose your photo for that category. It is the featured image that is pulled to make your index and to link to those recipe posts you make. To get future recipes in your index, be sure to assign each recipe post to a category as you make those posts. That way they will automatically update your index. You may want to check and make sure you entered a category for all your previous recipe posts. If you didn’t, you can edit and modify them now.
*Category Page Code: (to make this code show for you to see I added a space between [ and wp_cpl_sc. You need to REMOVE that space when coding. It should look like this [wp
[ wp_cpl_sc cat_id=92 css_theme=0 list_num=99 sort_using=4 show_author=false show_comments=false]
This is the code for each separate category page.
Note: Only the cat_id will change with each page. The id used is the category ID that corresponds with the page.
*Explanation of each part of the code:
wp_spl_sc is the name of the plugin WordPress Category page list source. NEVER CHANGE THIS PART
Cat_id=92 is the category id for my Barks category. Id 92. This number changes with each category you made.
Css_theme=0 my theme is light so it is 0
List_num=99 this tells how many posts to show for that category. As I am not sure how many I am going to have I used the highest number allowed.
sort_using=4 this means newest to oldest.
show_author=false. As I am the only author, I put false.
show_comments=false I felt that wasn’t necessary just to retrieve the recipes
*With each page, once you decide what you want to show, you just need to change the category ID to match the page name.
3) Now create your gallery.
On your dashboard go to “page, add new” and give it a name (recipe index or recipes or whatever you choose.) and save draft. In TEXT mode click on add media.
On left choose “create gallery”.
Click “upload files” “choose existing” and add each image. Save.
Click on your first image. A box will appear on the right.
Choose an image and input name of the category in caption section.
Gallery link URL is your PAGE short link. When someone clicks on that image, the page using that category and ID gets pulled and this is how your index knows what to show.
Gallery link target is “same”. This refers to the page URL.
Gallery link onclick is “remove” if you have a lightbox on your image. Use “keep” if you want it. Do not save gallery until you are finished with all your images.
Choose images and keep repeating until you have all you want. Check you actual images and make sure they all have a checkmark in the upper right-hand corner.
Click “create a new gallery” in the lower right-hand corner.
This will bring up a “gallery settings screen”. This is where you choose how to display your images.
Ex: GALLERY SETTINGS
Link To: Attachment Page
Columns: I chose 5 because that filled my space. You can play with that.
Random Order: I left blank since I wanted them to show alphabetically.
Type: I chose thumbnail grid. It left enough white space for the category names I put in a caption. ( I created my categories on a program where I could change the font style. That is why they are part of my image. I skipped putting the category name in the caption setting)
Gallery link URL: the short link from that categories page.
Gallery link target: leave at same window
Gallery link onclick effect: leave on keep
Click on insert gallery and it takes you back to your Recipe Index page.
4) Save your draft, then click on preview. Make sure your images appear the way you wanted and that all the links work correctly.
5) You now have a recipe index. Enjoy!
Special thanks to Chocolate Moosey and her Blog and Richard Archambault from StudioPress Support, the author of the plugin for adding the link that ties this all together. Between them, they put me on the right track!
