[Resolved] I want to use a custom icon for custom post types.

[Author]

Posts

[iyanuA]

I want to use a custom icon for custom post types. I see some old posts in the forum about it. I do not understand anything they are talking about. I see this issue has being in discussion since 2017 (that is over 7 years ago). Nothing concrete has being done about it. One of your selling point of Toolset is no php coding, but on this simple issue, we have to do php coding. Now what I need, 1. What is the best way to use a custom icon for custom post types? When you make a new post type and click choose icon, the choices are very limited. - How can I make my own custom icons available in that list? or at least upload easily or select from other sources - Is there a way to offer all of font awesome 5 icons? Thanks in advance.

[Nigel]

Hi there

Are you referring to the icons that appear in the Dashboard, and you want to use custom icons instead of the dashicons provided by WordPress that are available when registering a custom post type? (See screenshot.)

The dashboard is designed to work with Dashicons, and isn't easily adapted to other icon sets.

You can, however, specify the URL of an icon image to use when registering a post type, including images that you upload to your own Media Library.

It is necessary to specify the URL in the arguments used when registering a post type with the register_post_type WordPress function.

Toolset provides a user-friendly UI for registering a post type, but under the hood it still relies on that core WordPress function.

WordPress provides a filter where it is possible to override the arguments used to register a post type, and we can use that to manually override the menu_icon argument and specify an image to use instead.

You need to run the relevant code early—before Toolset tries to register the post type—so I suggest you create a file, let's call it tssupp.php, and save it in your wp-content/plugins directory.

Paste this code into the file and, after editing the post type slug you want to modify and the URL of the image you want to use, save.

Go to Dashboard > Plugins > Installed plugins and activate the plugin.

It should then customise the icon for the specified post type in the dashboard.

<?php
/**
 * Plugin Name: TSSUPP
 */

 function modify_custom_post_type_args( $args, $post_type ) {

    if ( 'your-cpt-slug' === $post_type ) { // Edit with the intended post type slug

        $args['menu_icon'] = '<em><u>hidden link</u></em>'; // Edit with the icon to use

    }

    return $args;
}
add_filter( 'register_post_type_args', 'modify_custom_post_type_args', 10, 2 );

[iyanuA]

Thank you so much Nigel. Just a few things to clear up.
1. What do you mean run the relevant post early, before toolset tries to register the post type? Does that mean once i have made the post type, I cannot change the menu icon again?
2. Sounds to me like i have to settle what the name of the slug and link in the php file even before creating the CPT.
3.. Do i keep making new php files in the wp-content/plugins directory for every new CPT i want to make and modify its menu icon?
4. Which plug in am I activating? The Toolset Plug in or the php file (which i assume is now like a plug in since it lives in the plugin folder)

Thank you for your help. its immeasurable.

[Nigel]

Let me clear things up if I can.

1. When I said "You need to run the relevant code early", this just relates to the choice of where to add the custom code. Toolset includes the ability to add code snippets (at Toolset > Settings > Custom Code) which would typically be the natural choice for where to add custom code snippets such as this, but when added in that way the code would actually run too late because the Types plugin would have already registered your custom post types as WordPress is loading. Hence we need to go to a little more trouble, and create our own simple custom plugin, in which case the code runs very early when loading WordPress, before Types registers the custom post types.

2. All of the WordPress code loads each time you make a request to the server, like when you load a page on your site, and that includes the code which Toolset adds to register your custom post types. You only register the post type once in the UI (at Toolset > Post Types), but the code which tells WordPress about your post types runs every time WordPress loads.

Go ahead and register all of the post types you need within the UI, and once you have done that you can update the code in the custom plugin I described to update the icons for those that you need.

3. I gave you an example of how to do this for a single custom post type icon. Rather than adding new versions of the same code for each post type, you would modify that code so that it can handle updating the icons for multiple post types.

Here's a possibly useful tip: by now, ChatGPT is pretty good at this sort of thing, modifying such code, as long as you understand what you are asking it to do and give it clear instructions. Why don't I try that now for you.

I'll paste in the code I shared above, and this is the prompt I will give it, asking it to modify the code:

I have some PHP code which uses the register_post_type_args filter to modify the menu_icon argument to set a URL to an icon image. The code does this for one specific example. I want to be able to do this for several different post types (each with their own image URL).

Can you modify my code to handle this scenario?

Here's the code:

And this is the code that it generated:

<?php
/**
 * Plugin Name: TSSUPP
 */
 
function modify_custom_post_type_args( $args, $post_type ) {

    // Define an array with post type slugs as keys and icon URLs as values
    $custom_icons = array(
        'your-cpt-slug-1' => '<em><u>hidden link</u></em>', // Replace with your first post type slug and icon URL
        'your-cpt-slug-2' => '<em><u>hidden link</u></em>', // Replace with your second post type slug and icon URL
        'your-cpt-slug-3' => '<em><u>hidden link</u></em>', // Replace with your third post type slug and icon URL
        // Add more post types and icons as needed
    );

    // Check if the post type exists in the custom_icons array
    if ( array_key_exists( $post_type, $custom_icons ) ) {
        $args['menu_icon'] = $custom_icons[$post_type];
    }

    return $args;
}

add_filter( 'register_post_type_args', 'modify_custom_post_type_args', 10, 2 );

Looking at the code it is a good solution that is similar to what I would have proposed myself, and you should be able to use that.

4. The code gets added to a .php file which you add to the plugins folder. So you now have a custom plugin (called "TSSUPP", because that's the name we add in the comments at the top of the code). So go to Dashboard > Plugins > Installed plugins and activate the plugin for the code to be operative.

Hopefully that is all clear.

[iyanuA]

My Issue has not being resolved. Yes, I was able to remove the default Icon but it returned empty even after i upload my own Icon. The moment i removed it, the default returned. Meaning, it takes off the default but doesn't replace with my custom icon

[Nigel]

That sounds like a possible problem with the URL you provided in the code for the custom icon.

Do you want me to take a look at your site to see if I can identify the problem?

Let me mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

Can you also confirm which custom icons are not working?

[Nigel]

I logged in to your site, but I can't see anywhere where you added the custom code we talked about in the earlier replies.

Where did you add the custom code to modify the icon?

(Note I answered your other question in its own ticket.)

[iyanuA]

It is there. The plugin is called CPTMenu not TSSUPP

[Nigel]

Found it, thank you.

I can see that it wasn't working, because you didn't add a clean URL, you added a URL wrapped in HTML markup, i.e.

       'the-collect' => '<em><u><em><u>hidden link</u></em>;',

I corrected that and activated the plugin, and it works, except you need to prepare the images you upload so that they are the correct size (see the screenshot).

Checking, I can see that WordPress expects those images to be 36px wide and 34px high.

[iyanuA]

Thank you so much for your help so far. So i have reduced the size and activated the plugin. The issue now has to do with the color and positioning.
* So it is not carrying the color of other icons, which i think i can adjust with changing the color to match the others (or not, let me know if that is true)
* The color on hover for others is that shade of the blue icon. Does it mean I have to upload a blue one for hover? if i have to, how do I achieve that.
* And 3, the alignment against its text (The Collects) is off. It is abit lowered. How do I resolve that too.
Thanks
** Screen shot attached

[Nigel]

I took another look at this (I should point out this is not something related to Toolset, but instead is a feature of WordPress itself).

WordPress uses dashicons for the dashboard icons, which is a font. The icons that appear in the dashboard are essentially text characters, and so can adopt the same characteristics as the adjacent text strings, namely colour, and hover effects.

When adding a custom icon via an image url this is not the same, and the image is displayed as is, without the same possibility to re-colour. WordPress applies a hover effect, but this is based upon setting the normal opacity to just 0.6 and increasing this to 1 when hovered.

This makes the original icon look somewhat dull, and I suspect it would be better for it to have opacity of 1 all the time.

For some reason WordPress adds top padding to these custom image icons, which is why your icon is pushed down slightly.

The simplest way to fix these problems is by adding the following to your theme's functions.php, to add some custom CSS to admin pages.

function custom_admin_css() {
    echo '<style>
            #adminmenu a .wp-menu-image img {
            padding: 0;
            opacity: 1;
          }
        </style>';
}
add_action('admin_head', 'custom_admin_css');

I've done that already. If you want some other effect, you can modify that custom CSS as needed.

[iyanuA]

Honestly Nigel, you have been super helpful.
I think I will reduce the size of the icon abit.
Just wondering, how come all these other plugins can comfortably do it to mimic what wordpress has and i can't replicate that. Is it not something Toolset should be looking into? And if its looked into how do I do that without the going around the route we went through and couldn't still have a perfect fix but more of a bandaid.

[Nigel]

I think CPTUI is probably the most popular plugin for registering custom post types, and if you check its settings you'll see it is just the same as Toolset: it allows you to specify the name of the dashicon to use, or the URL of a custom image to use.

That's not an accident, that it is the same, because it is based on what WordPress offers.

Toolset itself (and other plugins, such as Elementor) use their own icons and are not limited to the dashicons, but have the same kind of hover effect as when using dashicons.

In the case of Toolset (I haven't checked other plugins) this is done not by using a custom image URL, but by creating its own icon font, and then applying the required CSS to use that icon font in place of a dashicon.

It is technically feasible to do this for your custom post types, but it is a level beyond what is available or offered when registering post types with plugins such as Toolset or alternatives like CPTUI.

(As an aside, I note while looking into this more that the recommended custom image icon size is 20px x 20px, which is why WordPress applies the 9px padding at the top. You have the option of persisting with what we've done so far, or re-sizing your image to 20 x 20 and then removing the custom CSS added via your functions.php.)

[iyanuA]

I will try the resizing to 20x20. But i assume i have to retain the opacity?
But the icon set there are not toolset icons but more of the default from wordpress (dashicon). What I mean is would it not be nice for Toolset to make that its own icon font available, and possibly make it possible it possible for users to craft icon sets too, rather than using the custom image. For me, I would like to have an Icon set that matches the rest perfectly, rather than just like it is now.

Thanks for the effort again

[Nigel]

"would it not be nice for Toolset to..."

It would be nice for Toolset to do a very great many things! With a suite of plugins it is already a large and complex project, and the team leaders tend to evaluate features based, amongst other things, upon how much demand there is for them, and this is something that has scarcely been mentioned over the years.