Websites are nothing without content. With that in mind, the WordPress Visual Editor helps you edit your content easily. Actually, I really don’t use the visual editor but I like it. In this tutorial, I’d like to show you how to change WordPress Visual Editor icons. Let’s check it out.
Step #1: Create an icon sprite image
Firstly, we have to create our own icon sprite image file. By default, WordPress uses a 560×40 size wpicons.png image as a visual editor icon sprite image. We are taking this image as our standard icon sprite image to create our own icon sprite. You can find it in your “wp-includes/images/” folder of your WordPress blog or just save the image below into your computer.
Open this image in your image editor like Adobe Photoshop. Modify it with your icons and save it in your theme’s image folder or wherever you want. Here, I named my image new-wpicons.png and saved it into my theme’s image folder. Check out my icon sprite image below.
Step #2: Adding an image to the visual editor
Next, we are going to add this image to our Visual editor buttons. Open your fucntion.php file, that located in your current theme folder, in a text editor like Notepad, Adobe Dreamweaver. Add the following PHP function and save the file. This function will automatically replace your current image sprite with our new one.
<?php
function my_mceIcons() {
echo "
/* Replace image url with your image url */ .wp_themeSkin .mceIcon, .wp_themeSkin .mceSplitButton span.mceAction
{background-image: url('".get_bloginfo('template_directory')."/images/new-wpicons.png') !important;}
";
}
add_action('admin_head', 'my_mceIcons');
?>
Replace image URL, “.get_bloginfo(‘template_directory’).”/images/new-wpicons.png“, with your image URL if you are using different images. And save it again. Got your “Add New Post” post page in your WordPress admin area then click the Visual tab. now you can see your new visual editor icons. Take a look below images.
Before: ¬
Now: ¬
It is very simple. Isn't it?. Happy blogging. 🙂
