Creating a Recipe Index

Track­ing recipes is high­ly impor­tant for every sin­gle food blog. It offers a clear per­spec­tive about your culi­nary his­to­ry, and it allows your read­ers to eas­i­ly access them at any time.

That’s why we offer you a con­ve­nient way to browse them all with the Recipe Index — a tem­plate page that is ful­ly cus­tomiz­able and suits your par­tic­u­lar needs.

Step 1 — How Templates Work?

A tem­plate is a starter lay­out with numer­ous areas where you can add your con­tent.  In the Recipe Index tem­plate, each area is called a Wid­get area and can hold wid­gets such as Fea­tured Posts, Cal­en­dar, Cat­e­gories, etc. For exam­ple, the Recipe Index on our Julia demo is built with the Recipe Index tem­plate. Here are the Wid­get areas that you can find:

  1. Archive Con­tent: by using our Fea­tured Posts wid­gets you can cus­tomize this area, adding the cat­e­gories that are impor­tant to show­case on the Recipe Index
  2. Side­bar: this area is the gen­er­al Side­bar area for the rest of the web­site
  3. Default search wid­get: so that brows­ing through your recipes could be done.

Step 2 — Set up the Recipe Index Template

Now that we’ve made it clear what a tem­plate is and how you can use it in this par­tic­u­lar theme, let’s move next and set it up.

  • Log in the Word­Press Dash­board
  • Cre­ate a New page, and give it a name like “Recipes Index”, for instance.
  • Go to the Page Attrib­ut­es sec­tion, open the Tem­plate drop-down menu.
  • Select the Archive Index option (screen­shot).
  • Click Update and you’re done.

Step 3 — How to Add Widgets?

Now that we have our page set up it’s time to add some rel­e­vant wid­gets to the page. Here’s what you need to do:

  • Go to Apper­ance → Cus­tomize → click on the Wid­gets sec­tion (keep inmind that we are refer­ring to the page that you set it with an Archive Page tem­plate)
  • Choose the Archive Index wid­get area.
  • Click on the Add a Wid­get but­ton. From the menu that will appear on the right, select any wid­get that you would like to add.

If you want to learn more about our cus­tom wid­gets, you can dig deep­er right here.

Tips and tricks

The next step is to make search­ing for recipes a pleas­ant expe­ri­ence for your read­ers. Using the Jet­pack Vis­i­bil­i­ty fea­ture you can eas­i­ly orga­nize your wid­gets depend­ing on what page you want to dis­play them.

The Recipe Index on our demo is a good exam­ple for this case. We have cus­tomized our Side­bar area such that some menus are dis­played only on the Recipe Index, cat­e­gories pages, and search pages. This way your read­ers can browse through your recipes with­out going back and forth between the Recipe Index and the search results’ pages.

Here’s how we’ve done it:

  1. Make sure you have the Jet­pack plu­g­in acti­vat­ed.
  2. On your Dash­board, on the left menu, go to Jet­pack→ Set­tings→ Appear­ance and enable Wid­get Vis­i­bil­i­ty mod­ule.
  3. Cre­ate a Recipe Index page fol­low­ing the instruc­tions described above.
  4. Go to Appear­ance → Cus­tomize→ Wid­gets→ Side­bar and add the wid­gets you would like to dis­play only on the Recipe Index. For the moment they will appear at the end of the already exist­ing wid­gets.
  5. Click on the wid­gets you don’t want to appear on the Recipe Index. In the bot­tom right cor­ner, you will see the Vis­i­bil­i­ty but­ton. When click­ing it, a new sec­tion with mul­ti­ple options will appear. From the first drop-down, select the Hide option. The next field selects the type of the web pages where your wid­get should be hid­den. The last field tells you which spe­cif­ic page you would like to hide the wid­get from. Select them accord­ing­ly to your needs. The options will be auto­mat­i­cal­ly saved.
  6. Go to the Recipe Index and you can see that the wid­get you select­ed will not dis­play on the Side­bar.

Now, you can edit the wid­gets you want to be vis­i­ble only on the Recipe Index. For this, all you have to do is to repeat the step five from the above list, but please make sure that in the first drop-down you replace Hide with Show.

This article applies to Julia, as they share the same underlying structure.

Updated on June 14, 2017

Was this article helpful?