Use Visual Recipe Index to Organize Your Blog

I spent the last week thinking about how to reorganize my recipes. For a while now, I’ve been using photo labels that I made myself. The problem with this was that I had so many recipes and I’m constantly adding more…so my recipe index was never getting updated. And then once a month I would go through my recent posts and make labels for everything I had meant to make as they went up. And if I wound up updating the photos on an old recipe? Ugh.

It was too time-consuming, which meant nothing was as up-to-date as it should have been. And for those of you who wanted to actually use my index…it wasn’t good enough. Blog get updated regularly, therefore indexes should be updated regularly. So I went looking for a solution.

My first idea was to use my Yumprint profile, since it automatically organizes my recipes into sections and then lists them in alphabetical order. The only thing I have to do is click on the “Save Recipe” button on all of my recipes. Easy! The downside? First, it meant that you would all be leaving my blog, which wasn’t a big deal for me…but probably would have been confusing and irritating for all of you. And I couldn’t install a pop-up to say, “You’re about to leave this site!” because what better way to make you think I was sending you to a virus-ridden website? No. Whatever solution I found, it needed to be installed on my blog.

And then last Thursday I went digging through Google. I installed so many different plugins before finally landing on the Visual Recipe Index. It was perfect! It did exactly what it said it would do and it was incredibly easy to install. But let me show you how it works.

(I am clearly having far too much fun with the Comic Book theme on PicMonkey….)

Visual Recipe Index

Don’t be fooled by the name–you can use this to organize more than just recipes. In fact, it worked so well for me that I went through and reorganized all of my pages. (Except for the main “Blogging” and “Food” pages. I created my own images for those.)

Step 01: Once you’ve installed and activated the plugin, go to Settings > Visual Recipe Index.

Step 02: This plugin uses categories to create lists. Select a category from the list on your left, then choose a thumbnail size (mine are 175 x 175, because it works best with my column width), and then click on the “Generate Visual Recipe Index Code” button. A code will show up in the box to the right.

Step 03: Copy & paste that code onto the page you want it to appear. (The first line of code that comes between the “h2” tags is just the header. I don’t want that, so I just don’t highlight it.) I’ve heard that you should paste it with the “Text” tab open instead of the “Visual” tab, but the latter worked fine for me.

Step 04: Save your post and you’re done! You can see the page I edited here. 

Stylistic Changes

Now, many of you are probably looking at mine, looking at yours, and saying, “Why don’t you have an ugly border around your images?” Unfortunately, this plugin has no customization options. So I actually dove into the style.css file and got rid of the border. The part of the CSS that I changed was this: 

div.riview ul li{
display:inline-block;
position:relative;
border:none;
overflow:hidden;

}

div.riview ul li:hover {border:none;}
div.riview ul li div.rititle{height:0%;overflow:hidden;z-index:3;position:absolute;bottom:0;left:0;width:100%;}
div.riview ul li div.rititle p{width:100%;}
div.riview ul li div.riback{

The bolded part is what I changed Whatever comes after the word “border” in your code (it should be something like “3px double” and “3px solid”), change it to “none” and that will get rid of it. Simple!

 As for changing the color of your font, find this code:

/* Light Theme */
div.riview.light ul li{border-color: #aaa;}
div.riview.light ul li:hover{border-color: #ccc;}
div.riview.light ul li div.riback{background-color:#fff;}
div.riview.light ul li div.rititle p a{color:#cb2931;}
div.riview.light ul li:hover div.rititle p a{color:#e0e0e0;}

Again, the bolded part is what I changed. The “cb2931” is my red and “e0e0e0” is the grey it changes to when you hover over it. 

That’s it! 

This plugin does EXACTLY what I need it to! When I upload a new post, all I have to do is select the category while I’m in “Edit” mode. Once the post goes live, it automatically gets sorted, alphabetically, onto whatever page it’s supposed to. I don’t have to do anything. It uses the Featured Image (and if you don’t have featured images, it will use the first image of your post). If I wind up redoing the pictures, it will update the thumbnail immediately. It’s perfect! I never have to run upkeep on my pages again!

The only problem I’ve run into is that a lot of people seem to have issues with the pictures not showing up. I did NOT have this problem and I’m not sure why. The designer indicates that different cache plugins can mess it up (so try clearing your cache and seeing what happens?). I use the WP Fast Cache plugin and didn’t have any problems. If you do, for some reason, the Support forum is here. Unfortunately, a lot of people ask about this and then never respond when he tries to help them, so I think he may have given up helping with this particular thing (or he’s trying to diagnose and fix the problem in the plugin’s next update). Your best bet may be to try finding his email address and sending him a message.

Please don’t ask me for help with getting your images to show up, because I can’t help you with that (especially if you don’t know how to use an FTP, because it’s the only way I know how to hunt for the solution he suggests in the forum). Sorry. 🙁

Do you have any plugins you love for organizing your blog? I’m constantly looking for new ones to try out, so leave some suggestions!