How to Change Custom Post Type Icons for New and Edit Post Pages in WordPress

Home » Snippets » How to Change Custom Post Type Icons for New and Edit Post Pages in WordPress
0

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

Are you tired of the default icons that show up next to your custom post types on the "New" and "Edit" post pages in WordPress? Do you want to give your post types a more personalized and unique touch? Well, you’re in luck! In this article, we’ll guide you through the process of changing the custom post type icons for the "New" and "Edit" post pages in WordPress. With just a few simple steps, you’ll be able to enhance the visual appeal of your post types and make them truly stand out. So, let’s dive in and start customizing those icons!

					function wpturbo_change_post_type_icon() {
    global $post_type;
    
    if (in_array($post_type, array('my_custom_post_type'))) {
        ?>
        <style>
            #icon-edit.icon32-posts-my_custom_post_type {
                background-image: url(<?php echo plugins_url('images/custom_icon.png', __FILE__); ?>);
                background-repeat: no-repeat;
            }
        </style>
        <?php
    }
}
add_action('admin_head', 'wpturbo_change_post_type_icon');
				

The code snippet provided allows you to change the default icon for a custom post type on the new post and edit post pages in WordPress.

The first step is to define a new function called wpturbo_change_post_type_icon(). Inside this function, we use the global $post_type variable to access the current post type being edited or created.

Next, we check if the current post type is equal to a specific custom post type. In this example, we check if the post type is 'my_custom_post_type' using the in_array() function. You can replace 'my_custom_post_type' with the slug of your desired post type.

If the condition is true, we output a <style> tag to inject custom CSS into the head of the admin area. Inside the <style> tag, we use the #icon-edit.icon32-posts-my_custom_post_type selector to target the default icon for the custom post type.

Within the CSS declaration block, we set the background-image property to the URL of the custom icon image. In this example, we use the plugins_url() function to generate the correct path to the custom_icon.png file located in the 'images' directory of your plugin. You may need to adjust the file path based on your specific setup.

Additionally, we set the background-repeat property to no-repeat to prevent the custom icon from repeating. You can modify the CSS properties as needed to achieve the desired visual effect.

Finally, we hook the wpturbo_change_post_type_icon() function into the admin_head action. This ensures that our custom icon CSS is included when rendering the head of the admin area, specifically the new post and edit post pages.

By following these steps and customizing the code snippet to match your specific post type and icon path, you can easily change the default icon for a custom post type on the new post and edit post pages in WordPress.

Register an account to save your snippets or go Pro to get more features.