Support » Fixing WordPress » Using icons as post category filters

  • Amorphis

    (@amorphis)


    Hi guys,
    I’d like to have clickable icons for filtering posts on my website.

    Does anyone know if a plugin exists for this or alternatively, how I would begin to develop this? I really like how they’ve got the AJAX thing going on.

    Any help much appreciated

    Cheers
    Dave

    • This topic was modified 1 month ago by  Amorphis.
    • This topic was modified 1 month ago by  Jan Dembowski.
Viewing 4 replies - 1 through 4 (of 4 total)
  • sashainla

    (@sashainla)

    Dear Amorphis,

    Have you checked out font awesome? http://fontawesome.io/icons/ They have icons for pretty much everything, plus the code you need to use them in your site.

    Let me know if this answers your question,
    Sasha

    Michael

    (@michaelvdberg)

    Maybe you can follow this guide: https://premium.wpmudev.org/blog/add-post-filters/

    I have searched for a plug-in, but the most are bad reviewed or they are out of date (more than 2 years not updated).

    Amorphis

    (@amorphis)

    Hi guys thanks very much for these links 🙂

    Both will be handy but what I’m hunting for is a way to create clickable icons (like the Land & Water, Animals, People on the dairyatwork.co.nz website) have them filter the posts beneath when clicked.

    I have a hunch I’ll be needing to code this from scratch but not sure where to start.

    Cheers
    Dave

    Moderator bcworkz

    (@bcworkz)

    I’d advise not dealing with Ajax initially. You can work it in once everything else is working.

    You need to store the icon URL somewhere. Term meta is a good choice. Building a UI to select/upload images is a bit involved. I suggest initially just adding a text field to the term edit screen for a simple URL. Check the source code for useful actions to hook in order to output the field. Save the input value to term meta by hooking something that fires when terms are saved or updated. Again, check source code. You can work in an image selection/upload UI later.

    Identify the template used for outputting the content where icons should appear. Add code that grabs the term meta URL and outputs it as the src attribute for an img tag. Wrap this in an anchor link that leads to the term archive page.

    Once that’s all working you can use Ajax to get the term archive output and cause it to appear on the current page.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.