WordPress custom edit icon

Creating a Custom Edit Icon for WordPress Posts: A Pencil Icon for Easy Editing

Last updated on | one reply

One of the essential features in WordPress is the ability to edit posts or pages. While the default edit option is functional, it may not be obvious or visually appealing to some users. In this article, we’ll guide you through creating a custom pencil icon for editing WordPress posts and pages, making it more intuitive for clients and users to modify content.

Download Pencil Icon

You first need to download the pencil icon and upload it to your theme.

Add to functions.php

Paste this into your functions.php file.

Make sure to change /img/edit_pencil.svg to the path of your own SVG. This function will add the provided CSS code to the head section of your site, making the custom edit icon styles available for use.

function custom_edit_icon_styles() {
    $pencil_icon_url = get_template_directory_uri() . '/img/edit_pencil.svg';

    ?>
    <style type="text/css">
        .post-edit-link {
            position: fixed;
            width: 45px;
            height: 45px;
            left: 35px;
            bottom: 35px;
            text-indent: -9999px;
            z-index: 2002;
            background: url(<?php echo $pencil_icon_url; ?>) center center no-repeat #111;
            background-size: 20px;
            opacity: .2;
            outline: 0;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-clip: padding-box;
            transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
            -moz-transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
            -webkit-transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
            -o-transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
        }
        .post-edit-link:hover {
            width: 51px;
            height: 51px;
            left: 32px;
            bottom: 32px;
            opacity: 1;
            outline: none;
        }
    </style>
    <?php
}
add_action('wp_head', 'custom_edit_icon_styles');

Let me know if this helped. Follow me on Twitter, Facebook and YouTube, or 🍊 buy me a smoothie.

Forum replies (1)Comments (0)

Loading new replies...

Sorry but how do I download the image? When I click the tab is blank.

Reply Like

Leave a reply

Your email address will not be published. Required fields are marked *