This tutorial is to show you a method for adding a custom icon image field to Post categories and displaying that icon before post titles that belong to that category. For it, I’ll be using the Advanced Custom Fields plugin and some custom code. The end result will look something like:
Register the Category Image/Icon Field
- Register a new fields group and call it something descriptive (i.e. “Category Fields”).
- In the Location section, under “Show this field group if”, select 1.) Taxonomy Term, 2.) is equal to, and 3.) category. This will make the fields available when adding/editing categories.
- Add a new field and call it Category Icon and ensure the key is category_icon. If you’re comfortable editing a little of the code below, you can make this whatever you’d like.
- Select Image as the field type and Image URL as the return value. Finally, make sure Library is set to “All”. None of the other options are very important so they can remain on the defaults.
- Check to make sure you now have the ability to upload an image to your categories.
Adding the Icon Before Post Titles
Next, we need to add the icon before the post titles and make sure that the post and icon are associated with the same category. The code below does the appropriate checks, pulls the first category of the post if it has multiple categories, gets the image belonging to that category and outputs it using the :before CSS pseudo-element. One important thing to note is that the images will output at their actual size so, to keep them small enough, make sure to use images with proper dimensions.
Hello Rent,
I’ve tried using your code on my wordpress
version : 4.8
php : 5.6
I’ve used ACF to create as your post says.
And i’ve pasted this code on my functions.php from my child theme.
add_action( ‘wp_head’, ‘category_icon_title’ );
function category_icon_title() {
global $post;
$terms = get_the_terms( $post->ID, ‘category’ );
if ( !empty( $terms ) ) {
// Get the first category and corresponding image
$keys = array_keys( $terms );
$term = get_term( $keys[0], ‘category’ );
$category_icon_url = get_field( ‘category_icon’, $term );
if ( empty( $category_icon_url ) )
return;
echo ‘
h1.entry-title.cb-entry-title.cb-single-title:before {
content: url(“‘ . $category_icon_url . ‘”);
margin-right: 10px;
}
‘;
}
}
Is what i’m supposed to do ?
Thank you in advance for you help 🙂
Your function does not seem to work anymore with current WP and ACF. I’ve setup the ACF as you describe and can set the Category Icon parameter when editing a category, and added the function to m functions.php, but the icon never shows up.
From adding some debugging, it appears the icon data is not being found
The same for me, it’s not working with WP 4.8.
Hi Ren,
first of all – thanks for providing the code. But if i follow your exact instructions, i’ll get a blank page. Iput the code at the end of the functions.php.
Best regards. Paul.
Hi! This looks like just what I need—I’ve used the Page Links To plugin to redirect post titles to open a URL in a new tab; now, for the post titles that open in new tabs, I want to include an icon that indicates it’ll open in a new tab.
I’ve followed your instructions, but can’t get it to work. In ACF, I made the location rule “taxonomy term is equal to categories” and then made a field with label “opens tab icon,” field name “category_icon,” and field type “image.” I then made a category “new-tab” and added the icon to it. And lastly I pasted your code into functions.php, not changing anything except deleting the opening tag. Any thoughts on why this might not be working?
Thanks!
Hi Ren,
Really great looking work here!
I can’t get it to work at all on my template though! I made the categories so I can upload the icons, pasted the code into my php file and nothing, Ive tried lots of variations and still nothing at all? What am I missing here??
Hey Ren, thanks for your post and your explanation, it’d really save the day if I get it to work.
The problem I’m having right now:
Where exactly do I put the code in the function.php?
Whereever I paste it, my Server errors out (500 – Script Error).
Any help please?
That’s weird. I’m not sure why you’d be getting a 500 error. A 500 error is an internal server error, so you will need to ask your host about that. Otherwise, anywhere in your functions.php is fine, as long as you’re not including the opening PHP tag, and there are no other syntax issues.
I’m using this code and am getting the same error. Each time I add it to functions.php, I get a white screen on each post page.
I made a small adjustment. Try it again.
Still no dice. Is there a way to find the error? In Google Chrome’s console all I get is this: “Failed to load resource: the server responded with a status of 500 ().”
Where should the above code be entered? We are using the Penscratch theme.
Sorry, Meant to say thank you for your help. Hit Post to soon. Thanks Ren
It can go in your functions.php
Hello, this tutorial could suits my needs, but i don’t know much about php. In which file should i insert this code ?
Thanks for help
Hi Ren,
Thanks for this tutorial. I have it working but a little too well.
The code puts some css into the header using .entry-title:before to load an image before the tag.
Unfortunately all my posts are using the entry-title class so the image is being loaded in front of all post titles and not only for the category allocated the image, as defined using the custom fields plugin.
Should I have some other code or plugin to add a category tag or prefix to the entry-title class so titles for given categories can be identified?
I am using the TwentyFourteen theme.
Many Thanks
Hello Ren! Thank you for an amazing post and explanation. It really saved my life regarding a difficult problem that I couldn’t solve. I was wondering– the icon shows up on the blog category archive as well as the single post page. However the icon does not display on the home page where I have the most current blog posts coming in… would you have any idea how I might be able to get the icons to show on the home page view as well? This post is an example: http://dolcevitalife.com/30-places-that-will-blow-your-mind/. Here is the home page– and it is the fourth or so post… http://dolcevitalife.com
Hello, Elizabeth. Where are you putting the code?