Mia - Recipe Filter Accordions

The drop-down accordions in the Mia theme let you organize your recipes into sections such as Diet, Course, and Cuisine. Each section contains a list of category links that visitors can click to browse recipes within that category.

How to Find a Category Link

If you're not sure how to find the correct URL for a category, follow this guide: How to Get the Link (URL) for a Category →

Editing an Existing Link

  1. In your WordPress dashboard, go to Pages and edit the page containing the Recipe Filter Accordion you'd like to modify.
  2. Click on the accordion section (for example, Browse by Course) to expand it.
  3. Click on the heading you'd like to edit.
  4. Update the heading text, if needed.
  5. Click on the Link icon in the toolbar.
  6. Enter or paste the category URL.
  7. Press Enter or click Submit to save the link.

Adding a New Link

  1. Expand the accordion section where you'd like to add a new category link.
  2. Select one of the existing heading blocks.
  3. Click on the Options (⋮) menu in the block toolbar.
  4. Choose Duplicate.
  5. Update the heading text.
  6. Click on the Link icon and replace the existing URL with the correct category link.

Duplicating an existing heading ensures your new link matches the styling and spacing of the others.

Removing a Link

  1. Click on the heading you want to remove.
  2. Open the Options (⋮) menu.
  3. Select Delete.

Changing the Accordion Titles

  1. To change an accordion title (for example, Browse by Diet), click your cursor on the section you'd like to update.
  2. Select the existing title text and replace it with your new title text.

Customizing the Appearance of the Accordions

If you'd like to customize the colors, fonts, spacing, etc, you can do so from the block settings.

Click on the accordion and make sure Accordion is shown in the settings panel on the right. If not, use List View to select the Accordion block.

Under the Accordion block settings, you'll find three tabs:

  • General: Change icon style, column layout, and adjust spacing between panes (individual drop-downs)
  • Style: Customize colors, fonts, and borders
  • Advanced: Adjust the padding for the accordion titles and inner content

Troubleshooting

If the Recipe Filter Accordions aren't expanding correctly in the Block Editor after updating to WordPress 7.0, you'll just need to replace the existing block with an updated version.

  1. Delete the existing Recipe Filter Accordions block from your page.
  2. Open the Design Library.
  3. Select the Mia Food Block Collection.
  4. Click the Sync with Cloud icon in the top right corner.
  5. Search for "accordion" to quickly find the block.
  6. Insert a fresh copy of the Recipe Filter Accordions block on your page.

The updated block includes a compatibility fix for WordPress 7.0, and replacing it will resolve the issue!