Skip to main content
Removed space in $args index.
Source Link
Howdy_McGee
  • 20.8k
  • 24
  • 91
  • 175

This is kind of a 2-parter. The first half will show you how to change the style inside TinyMCE when editing. The second half will show you how to remove things from the toolbar.

Style TinyMCE

WordPress give us a neat little function called add_editor_style() which accepts an array of stylesheets, either by URL or relative paths. WordPress default themes usually take advantage of this function and can be seen in the latest TwentySeventeen theme. First let's create a stylesheet. The name doesn't matter but the location does.

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}

For simplicity we'll call this editor-style.css and save it in the theme:

/assets/css/editor-style.css

Next we need to tell WordPress to use our stylesheet so we'll open the themes functions.php file and add in:

/**
 * Theme setup functionality
 *
 * @return void
 */
function prefix_theme_setup() {
    
    // Relative path to the TinyMCE Stylesheet
    add_editor_style( array( 'assets/css/editor-style.css' ) );

}
add_action( 'after_setup_theme', 'iqt_theme_setup' );

Some plugins could interfere with this such as page builders if they implement their own TinyMCE.


Modify Toolbar

Next, we can use the tiny_mce_before_init filter hook to modify the TinyMCE. In this case, all we need to do if override the font sizes. You can add the following function into your functions.php file:

/**
 * Add Formats to TinyMCE
 * - https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * - https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 *
 * @param array $args   - Arguments used to initialize the tinyMCE
 *
 * @return array $args  - Modified arguments
 */
function prefix_tinymce_toolbar( $args ) {
    
    $args['fontsize_formats ']$args['fontsize_formats'] = "14pt 18pt 24pt 36pt";
    
    return $args;
    
}
add_filter( 'tiny_mce_before_init', 'prefix_tinymce_toolbar' );

The $args array has an index that accepts a list of font sizes separated by spaces. You can change these to whatever you want, px, em, rem it doesn't matter, just that the list is separated by a space and is a valid font-size value.

This is kind of a 2-parter. The first half will show you how to change the style inside TinyMCE when editing. The second half will show you how to remove things from the toolbar.

Style TinyMCE

WordPress give us a neat little function called add_editor_style() which accepts an array of stylesheets, either by URL or relative paths. WordPress default themes usually take advantage of this function and can be seen in the latest TwentySeventeen theme. First let's create a stylesheet. The name doesn't matter but the location does.

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}

For simplicity we'll call this editor-style.css and save it in the theme:

/assets/css/editor-style.css

Next we need to tell WordPress to use our stylesheet so we'll open the themes functions.php file and add in:

/**
 * Theme setup functionality
 *
 * @return void
 */
function prefix_theme_setup() {
    
    // Relative path to the TinyMCE Stylesheet
    add_editor_style( array( 'assets/css/editor-style.css' ) );

}
add_action( 'after_setup_theme', 'iqt_theme_setup' );

Some plugins could interfere with this such as page builders if they implement their own TinyMCE.


Modify Toolbar

Next, we can use the tiny_mce_before_init filter hook to modify the TinyMCE. In this case, all we need to do if override the font sizes. You can add the following function into your functions.php file:

/**
 * Add Formats to TinyMCE
 * - https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * - https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 *
 * @param array $args   - Arguments used to initialize the tinyMCE
 *
 * @return array $args  - Modified arguments
 */
function prefix_tinymce_toolbar( $args ) {
    
    $args['fontsize_formats '] = "14pt 18pt 24pt 36pt";
    
    return $args;
    
}
add_filter( 'tiny_mce_before_init', 'prefix_tinymce_toolbar' );

The $args array has an index that accepts a list of font sizes separated by spaces. You can change these to whatever you want, px, em, rem it doesn't matter, just that the list is separated by a space and is a valid font-size value.

This is kind of a 2-parter. The first half will show you how to change the style inside TinyMCE when editing. The second half will show you how to remove things from the toolbar.

Style TinyMCE

WordPress give us a neat little function called add_editor_style() which accepts an array of stylesheets, either by URL or relative paths. WordPress default themes usually take advantage of this function and can be seen in the latest TwentySeventeen theme. First let's create a stylesheet. The name doesn't matter but the location does.

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}

For simplicity we'll call this editor-style.css and save it in the theme:

/assets/css/editor-style.css

Next we need to tell WordPress to use our stylesheet so we'll open the themes functions.php file and add in:

/**
 * Theme setup functionality
 *
 * @return void
 */
function prefix_theme_setup() {
    
    // Relative path to the TinyMCE Stylesheet
    add_editor_style( array( 'assets/css/editor-style.css' ) );

}
add_action( 'after_setup_theme', 'iqt_theme_setup' );

Some plugins could interfere with this such as page builders if they implement their own TinyMCE.


Modify Toolbar

Next, we can use the tiny_mce_before_init filter hook to modify the TinyMCE. In this case, all we need to do if override the font sizes. You can add the following function into your functions.php file:

/**
 * Add Formats to TinyMCE
 * - https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * - https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 *
 * @param array $args   - Arguments used to initialize the tinyMCE
 *
 * @return array $args  - Modified arguments
 */
function prefix_tinymce_toolbar( $args ) {
    
    $args['fontsize_formats'] = "14pt 18pt 24pt 36pt";
    
    return $args;
    
}
add_filter( 'tiny_mce_before_init', 'prefix_tinymce_toolbar' );

The $args array has an index that accepts a list of font sizes separated by spaces. You can change these to whatever you want, px, em, rem it doesn't matter, just that the list is separated by a space and is a valid font-size value.

Source Link
Howdy_McGee
  • 20.8k
  • 24
  • 91
  • 175

This is kind of a 2-parter. The first half will show you how to change the style inside TinyMCE when editing. The second half will show you how to remove things from the toolbar.

Style TinyMCE

WordPress give us a neat little function called add_editor_style() which accepts an array of stylesheets, either by URL or relative paths. WordPress default themes usually take advantage of this function and can be seen in the latest TwentySeventeen theme. First let's create a stylesheet. The name doesn't matter but the location does.

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}

For simplicity we'll call this editor-style.css and save it in the theme:

/assets/css/editor-style.css

Next we need to tell WordPress to use our stylesheet so we'll open the themes functions.php file and add in:

/**
 * Theme setup functionality
 *
 * @return void
 */
function prefix_theme_setup() {
    
    // Relative path to the TinyMCE Stylesheet
    add_editor_style( array( 'assets/css/editor-style.css' ) );

}
add_action( 'after_setup_theme', 'iqt_theme_setup' );

Some plugins could interfere with this such as page builders if they implement their own TinyMCE.


Modify Toolbar

Next, we can use the tiny_mce_before_init filter hook to modify the TinyMCE. In this case, all we need to do if override the font sizes. You can add the following function into your functions.php file:

/**
 * Add Formats to TinyMCE
 * - https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * - https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 *
 * @param array $args   - Arguments used to initialize the tinyMCE
 *
 * @return array $args  - Modified arguments
 */
function prefix_tinymce_toolbar( $args ) {
    
    $args['fontsize_formats '] = "14pt 18pt 24pt 36pt";
    
    return $args;
    
}
add_filter( 'tiny_mce_before_init', 'prefix_tinymce_toolbar' );

The $args array has an index that accepts a list of font sizes separated by spaces. You can change these to whatever you want, px, em, rem it doesn't matter, just that the list is separated by a space and is a valid font-size value.