How to Retrieve All Category Images on Front-End

Question

Your problem is too complex, you need to break it apart into multiple, simpler problems. If we don’t do this, the problem is much harder, and searching online for somebody who had exactly the same set of problems is much more difficult if not impossible.

So lets do this with pseudocode, code written in plain english as you would tell a lamens:

categories = get all categories
for each category in "categories"
    image ID = get the image ID from the image field
    image URL = get the URL for the attachment with the ID of "image ID"
    display the image
    display the title of the category

Now we have several smaller, more manageable problems, each of which can be independently researched, with a significantly higher number of solutions and resources:

how do I get all categories?
how do I get an image out of an ACF Field on a category
= given an image ID, how do I get a URL

It might be that these questions too need breaking down into smaller easier problems as we do research to figure out how to do it.

Note that all of these are very good questions to ask here, you could have gotten 3x the reputation, and, gotten longer more in depth answers for each part.

So we can take the pseudocode and start swapping out the plain english for real PHP code:

$categories = [];// get all categories
foreach ( category in "categories" ) {
    //image ID = get the image ID from the image field
    //image URL = get the URL for the attachment with the ID of "image ID"
    //display the image
    //display the title of the category
}

Beginning with how do we fill categories with all the categories? I believe you have already found the answer to the first one, but it’s hidden in a more complex question. The get_categories function is what you want.

Next “how do I get an image out of an ACF Field on a category”, would lead you to this question

And finally “given an image ID, how do I get a URL”, to do this you would use wp_get_attachment_url, which is documented with examples here

As a final note, you never want to show all the posts, or all the categories. This is because as the number of categories grows, so does the time to generate the page and run the queries. Eventually so many are present that the page never finishes loading or the DB struggles under load, putting an upper limit on how many people can view your site at the same time, if they can view it at all. Instead, put an upper limit of 200 categories so this is never an issue

Related Posts: