Replace WordPress Logo in Gutenberg Fullscreen Mode
First of all let me show you guys what WordPress logo do I mean. You can find it in the top left part of the screen.
And here is what we are going to achieve in this tutorial:
As you may notice I used a custom photo of me but you may use an SVG icon if you want.
But before we dive into the coding part, I would like to remind you that WordPress logo can be replaced with your custom site icon as well in Appearance > Customize > Site Identity.
But below I will show you a method how you can hardcode it.
If you are looking for some ways of hooking this logo, I will disappoint you right now. There is no hooks for that, but you can easily do it with CSS.
/* hides the logo */
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon svg{
display: none;
}
/* adds a custom image */
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon:before{
background-image: url( 'YOUR IMAGE URL' );
background-size: cover;
/* you can the image paddings with the parameters below*/
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}That’s all.
Oh, no, one more thing, in case you don’t know where to add the CSS.
It can be easily inserted with admin_head hook.
add_action( 'admin_head', 'misha_custom_fullscreeneditor_logo' );
function misha_custom_fullscreeneditor_logo(){
// it is not a necessary thing but it prevents this CSS to be added on every WordPress admin page
$screen = get_current_screen();
if( ! $screen->is_block_editor ) {
return;
}
echo '<style>
HERE
</style>';
}The admin_head snippet may go to your current or child theme functions.php file or to a custom plugin.
Does it work for Gutenberg Full Site Editing? Yes and no. Well, it is working but you have to add a couple more CSS selectors to the code.
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon svg,
body.is-fullscreen-mode .edit-site-navigation-toggle button.components-button.has-icon svg{
display: none;
}
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon:before,
body.is-fullscreen-mode .edit-site-navigation-toggle button.components-button.has-icon:before{
background-image: url( 'YOUR IMAGE URL' );
background-size: cover;
}And here we are:
Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Hey,
You create great tutorials that help us all improve our stores. I have a small question, is there a chance that someday you will create a material on how to run a “one page checkout”? cart and order on one page?
Hey Kamil,
At this moment I can only suggest it to you as a plugin.