How to Create a Visual Recipe Index {WordPress}

Follow on Pinterest
How To Create A Visual Index in WordPress Follow Me on Pinterest It took me a while to figure out how to create a visual recipe index that would update as each post was published. Since it can be so difficult to figure out how to make an index, I wanted to share the method that I used to create mine in the hopes that it would help someone else out.


1) Make sure that your posts are listed the way that you want them to be by category.

2) Under “Posts”, click on “Categories”.


screen shot 1 Follow Me on Pinterest

3) On the right-hand side, you should see a list of categories.

4) Hover over the name of the category, and you’ll see “View”. We’ll come back to this later.

screen shot 2 Follow Me on Pinterest

5) Next, you’ll need to create an image for each category. I used Pic Monkey to create 4×4 collages for my Recipe Index.

6) Once you’ve created your images, you’ll need to upload the first file.

7) Go to “Media” and click on “Add New”.

screen shot 5 Follow Me on Pinterest

8) Click “Select files”, and choose the one of the images that you’ve created.

9) Then, click on “Edit”.

10) On the right-hand side, there will be a file URL.

11) Copy the URL.

12) Then, go to

13) Paste the URL from the image that you just uploaded into the box that says “From a URL”.


screen shot 4 Follow Me on Pinterest

14) Then, click on “Start Mapping Your Image”.

15) Under “Image Map Tool Box”, click on “Rectangle”.

16) Adjust the rectangle to fit the appropriate image.

17) Go back to the category view from step 4 above, and click on it.

18) Copy the URL for the category.

19) Paste that URL where it says “Link for this Map” (orange arrow).

20) Under Title/Alt, I put the name of that category (i.e. “Appetizers) (blue arrow).

21) Uncheck “Show Text Links” (yellow arrow).

22) Click “Save” (pink arrow).

screen shot 6 Follow Me on Pinterest

23) Repeat steps 15-22 for anything else you need to map on your image.

24) Once you’re done mapping that image, click “Get your code” under “Finished”.

screen shot 7 Follow Me on Pinterest

25) Click on the tab that says “HTML Code”, and copy your code.

26) You’ll need a page (not post) for the code that you’ve just copied.

27) To create a new page, go to “Pages” and then click on “Add New”.

28) Click on “Text” on the tab in the upper right-hand side, and paste the image code in the box.

29) Repeat the steps with any remaining categories and images.

30) Once you’ve added all of the code to your recipe index page, click on “Publish”.

31) When you add new posts, make sure that you check the box under “Categories” to add the new post to the category index.

screen shot 3 Follow Me on Pinterest Now, as long as you check the category box(es) on your post, you’ll have a recipe index that will update every time you add a new post.