Archive Dropdown with Year-Based Filtering

[Jennine]

Hello,

I would like to add an archive dropdown that allows users to filter content by year. These are not custom posts; the page simply contains an embedded URL.

Currently, we only have content for one year. However, we would like to implement a dropdown that behaves similarly to this one: https://www.snpnyc.org/press/ except that it would display a different embedded URL for each selected year.

Here is the page I am referencing: https://www.snpnyc.org/data/
How can I implement this?

Thank you!

[ruenel]

Hello @Jennine,

Thanks for writing in! I can see that the page contains information coming from an iFrame.

Be advised that you cannot control the elements inside an iFrame. You would need to modified the file if you have access to it, unless otherwise the iFrame source provide an option to filter the displayed data.

Best Regards.

[Jennine]

I just want to add an archive dropdown by year that is outside of the iframe. allowing users to filter the iframes or embedded URLs based on the selected year.

[ruenel]

Hello @Jennine,

Do you have the list of URLs and the dates? Maybe you can utilize the Looper Provider JSON where you can put the data (data and URLs) in the json list and use the Looper to create a custom dropdown menu where you can select the Year date.

• https://theme.co/docs/loopers#json
• https://theme.co/docs/dropdown

Best Regards.

[Jennine]

As of now, the years are 2023 and 2024, each with an embedded URL. I would like a dropdown that displays the corresponding URL based on the selected year. Does that make sense? I attached a mockup

[Ismael]

Thank you for the info.

Have you tried manually adding the select element in a Text field?

Example:

<select class="archive-dates" style="font-size: 15px; color: #0c0480;">
    <option value="">Select Year</option>
    <option value="https://www.snpnyc.org/2024/?post_type=press">Press Releases of  2024 </option>
    <option value="https://www.snpnyc.org/2023/?post_type=press" selected="selected">Press Releases of  2023 </option>
    <option value="https://www.snpnyc.org/2022/?post_type=press">Press Releases of  2022 </option>
 </select>

You can also recreate this using the Div element, but you have to switch to breakout mode and manually set the HTML tag field to “select”. You can then add multiple Div elements as children with the HTML tag set to “option”.

Let us know if you need more info.

Warm regards.