I’m a fan of the top admin bar, but it’s not perfect. It could be better and it soon will be. One cool feature of the top admin bar is that you can double click the top admin bar to scroll to the top of your admin page, which is neato for long pages, but I digress. We’re about to add another cool feature to the top admin bar.
I made this simple plugin to tack the site editor link to the top admin bar in WordPress. It’s nice and convenient. Every WordPress install is different with varying plugins, and this means that the administrator sidebar will also have different ordering based on what plugins your site uses. When you switch between a handful of WordPress sites like me, you have to relearn that muscle memory on every new site. How annoying, right? That’s what caused me to add the link to the top admin bar. Don’t worry, it’s still in the sidebar as well. After clicking through a thousand sidebars to get to the Site Editor, I finally made this plugin. My muscle memory just goes straight to the top admin bar now. Center click the Site Editor link and open it in a new tab like clockwork.
I’ve started dropping this simple plugin into every WordPress website that I build with the WordPress Site Editor. I’m very tired of scouring the sidebar of different WP Admin websites for the “Appearance –> Site Editor” link.
The Plugin Code
<?php
/**
* Plugin Name: Custom Site Editor Link
* Plugin URI: https://swearenginweb.design/wordpress-site-editor-link-top/
* Description: Adds a Site Editor link to the WordPress admin bar for easier access to the site editor.
* Version: 1.0.0
* Author: James Swearengin
* Author URI: https://swearenginweb.design/
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: custom-site-editor-link
*/
// Prevent direct access
if (!defined('ABSPATH')) {
exit;
}
/**
* Add Site Editor link to admin bar
*/
function custom_site_editor_admin_bar_link($wp_admin_bar) {
// Only show for users who can edit theme options
if (!current_user_can('edit_theme_options')) {
return;
}
// Only show in admin area
if (!is_admin()) {
return;
}
// Add the main Site Editor menu item
$wp_admin_bar->add_menu(array(
'id' => 'custom-site-editor',
'title' => '<span class="ab-icon dashicons dashicons-admin-appearance"></span><span class="ab-label">Site Editor</span>',
'href' => admin_url('site-editor.php'),
'meta' => array(
'title' => __('Open Site Editor', 'custom-site-editor-link'),
'class' => 'custom-site-editor-link'
)
));
// Add submenu items for different sections
$wp_admin_bar->add_menu(array(
'parent' => 'custom-site-editor',
'id' => 'custom-site-editor-templates',
'title' => __('Templates', 'custom-site-editor-link'),
'href' => admin_url('site-editor.php?path=%2Fwp_template'),
'meta' => array(
'title' => __('Edit Templates', 'custom-site-editor-link')
)
));
$wp_admin_bar->add_menu(array(
'parent' => 'custom-site-editor',
'id' => 'custom-site-editor-template-parts',
'title' => __('Template Parts', 'custom-site-editor-link'),
'href' => admin_url('site-editor.php?path=%2Fwp_template_part'),
'meta' => array(
'title' => __('Edit Template Parts', 'custom-site-editor-link')
)
));
$wp_admin_bar->add_menu(array(
'parent' => 'custom-site-editor',
'id' => 'custom-site-editor-styles',
'title' => __('Styles', 'custom-site-editor-link'),
'href' => admin_url('site-editor.php?path=%2Fwp_global_styles'),
'meta' => array(
'title' => __('Edit Global Styles', 'custom-site-editor-link')
)
));
$wp_admin_bar->add_menu(array(
'parent' => 'custom-site-editor',
'id' => 'custom-site-editor-pages',
'title' => __('Pages', 'custom-site-editor-link'),
'href' => admin_url('edit.php?post_type=page'),
'meta' => array(
'title' => __('Manage Pages', 'custom-site-editor-link')
)
));
}
add_action('admin_bar_menu', 'custom_site_editor_admin_bar_link', 100);
/**
* Add custom CSS for the admin bar icon
*/
function custom_site_editor_admin_bar_styles() {
if (!is_admin_bar_showing()) {
return;
}
?>
<style type="text/css">
#wp-admin-bar-custom-site-editor .ab-icon:before {
content: "\f100";
top: 2px;
}
#wp-admin-bar-custom-site-editor:hover .ab-icon:before {
color: #7b90ff;
}
#wp-admin-bar-custom-site-editor .ab-label {
font-weight: 500;
}
/* Style the submenu items */
#wp-admin-bar-custom-site-editor .ab-submenu .ab-item {
padding: 8px 12px;
}
#wp-admin-bar-custom-site-editor .ab-submenu .ab-item:hover {
background-color: #f0f0f1;
}
</style>
<?php
}
add_action('admin_head', 'custom_site_editor_admin_bar_styles');
add_action('wp_head', 'custom_site_editor_admin_bar_styles');
/**
* Plugin activation hook
*/
function custom_site_editor_activate() {
// Flush rewrite rules if needed
flush_rewrite_rules();
}
register_activation_hook(__FILE__, 'custom_site_editor_activate');
/**
* Plugin deactivation hook
*/
function custom_site_editor_deactivate() {
// Clean up if needed
flush_rewrite_rules();
}
register_deactivation_hook(__FILE__, 'custom_site_editor_deactivate'); 
Simply create a new folder in your /wp-content/plugins/ directory called ‘custom-site-editor-link’ and then make a new PHP file inside of the folder ‘called custom-site-editor-link.php’. Simply paste the code into the PHP file and save it. Go to your WordPress admin plugins dashboard and activate the plugin! You’ll now have a link in your top admin bar!
Why is the link to the site editor tucked away in the sidebar under “Appearance” – Site editor? For a link that is clicked quite frequently (thousands of times for me) in order to access the WordPress FSE, it should be more prominent and quicker to access. Some WordPress websites have a plethora of plugins that can knock the “Appearance –> Site Editor” fly-out menu down the left sidebar quite a bit. This is poor UX to me because different websites require learning new muscle memory in order to find the link, which is obviously not ideal. The site editor link should be in one single, consistent and prominent location if you ask me. I need to be able to access it in less than a second. I’m serious about that! Sometimes you have to take matters into your own hands.
I’ve created this simple PHP plugin for the WordPress administrator back end that simply adds the site editor menu to the very top of the WP admin bar. Instead of browsing a crapton of links in the sidebar, now I can just click the site editor link in the top bar in 1 second. I don’t have to think about where the Appearance flyout menu is anymore. Nope. Just clicky, and im therey.
Schwing!
Leave a Reply