Floating "Edit This Page" Button on the Front End
Shows a small floating Edit button in the corner of posts and pages for users who can edit them, which is handy when the admin bar is hidden or on phones.
Opens WPIDE on
Code
// Corner for the button: left or right.
$wpide_edit_button_side = 'right';
add_action( 'wp_footer', function () use ( $wpide_edit_button_side ) {
if ( ! is_singular() || ! current_user_can( 'edit_post', get_queried_object_id() ) ) {
return;
}
$link = get_edit_post_link( get_queried_object_id() );
if ( ! $link ) {
return;
}
printf(
'<a href="%1$s" class="wpide-edit-fab" style="position:fixed;bottom:20px;%2$s:20px;z-index:99998;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:#1d2327;color:#fff;font:600 14px/1 system-ui,sans-serif;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25)"><span aria-hidden="true">✎</span> Edit %3$s</a><style>.wpide-edit-fab:hover,.wpide-edit-fab:focus{background:#2271b1!important;outline:2px solid #fff;outline-offset:2px}@media (prefers-reduced-motion:no-preference){.wpide-edit-fab{transition:background .2s}}@media print{.wpide-edit-fab{display:none!important}}</style>',
esc_url( $link ),
'left' === $wpide_edit_button_side ? 'left' : 'right',
esc_html( strtolower( get_post_type_object( get_post_type( get_queried_object_id() ) )->labels->singular_name ) )
);
} );Notes
Change the corner with $wpide_edit_button_side (left or right); it respects the visitor's reduced motion setting.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.