SumTips
SumTips
Blogging

Remove or Add Buttons in WordPress Distraction-Free Writing

Print View Mobile View

The Distraction-Free Writing (DFW) mode made its debut in WordPress 3.2. It’s aim was to hide everything that can get in the way of your writing, and help you stay focused. Although the DFW mode removes all of the clutter from your screen and increase the amount of viewing space, it seems to do so at the expense of usability. Once you’re in the distraction free editor, all you get is a simple toolbar with nine feature buttons:
buttons distraction free writing wordpress

It’s rather sparse when compared to the standard visual editor’s toolbar. If you find that certain features that you regularly use are missing from the toolbar, below you will find ways to add them again.

Add New Buttons to the Toolbar

This code will add “Strikethrough” and “Underline” buttons to the toolbar. It goes in your active theme’s functions.php file.

function sumtips_add_dfe_buttons($buttons)
{
	$buttons[] = 'separator'; //Add separator (optional)
	$buttons['strikethrough'] = array(
		'title' => __('Strikethrough'), //Button Title
		'onclick' => "tinyMCE.execCommand('strikethrough');", //Command to excecute
		'both' => false // Show in visual mode. Set 'true' to show in both visual and HTML mode
	);
	$buttons['underline'] = array(
		'title' => __('Underline'),
		'onclick' => "tinyMCE.execCommand('underline');",
		'both' => false
	);
	return $buttons;
}
add_filter( 'wp_fullscreen_buttons', 'sumtips_add_dfe_buttons' );

You can extend the code to add more buttons with new $buttons variables. Check out this page for the list of all available TinyMCE buttons that you can add.

Create Custom Button Set

Rather than adding buttons to the existing toolbar buttons, you can create your own button set. With the below code in place, only the “Strikethrough” and “Underline” buttons will show up on the toolbar.

function sumtips_custom_dfe_buttons($buttons)
{
	$buttons = array(
		'strikethrough' => array('title' => __('Strikethrough'), 'onclick' => "tinyMCE.execCommand('strikethrough');", 'both' => false ),
		'underline' => array( 'title' => __('Underline'), 'onclick' => "tinyMCE.execCommand('underline');", 'both' => false )
	);
	return $buttons;
}
add_filter( 'wp_fullscreen_buttons', 'sumtips_custom_dfe_buttons' );

I know they are not the most used features, but should be enough to get started. Expand and customize code to suit your need.

Remove Buttons from the Toolbar

If you want even fewer distractions, you can remove some of the default buttons with this code:

function sumtips_remove_dfe_buttons( $buttons ) {
    unset($buttons['0']); //Remove first separator
    unset($buttons['blockquote']); //Remove blockquote button
    unset($buttons['help']); //Remove help button
    return $buttons;
}
add_filter( 'wp_fullscreen_buttons', 'sumtips_remove_dfe_buttons' );

Default buttons are: bold, italic, bullist, numlist, blockquote, image, link, unlink, help. Unset the ones you don’t want.

Hope this helps in improving you writing environment.

Related tips: