The code snippet below is a WordPress filter function that modifies the TinyMCE (TinyMCE is the visual editor used in WordPress) initialization settings to include custom font options in the editor.
Here's an explanation of how it works:
-
The function mce_custom_fonts() is defined and hooked to the tiny_mce_before_init filter using the add_filter() function. This filter hook allows you to modify the TinyMCE initialization settings before the editor is loaded.
-
Inside the function, a string variable $theme_advanced_fonts is defined. This variable contains a list of font options that will be available in the TinyMCE editor. Each font option is in the format "Font Name=font-family1,font-family2;", where Font Name is the display name of the font, and font-family1,font-family2 are the actual font families to be used.
-
The $theme_advanced_fonts string includes a variety of font options, such as Roboto, Arial, Comic Sans MS, Times New Roman, etc.
-
The value of $theme_advanced_fonts is assigned to $init['font_formats'], which is a configuration option in TinyMCE that determines the font formats available in the editor.
-
Finally, the modified $init array is returned by the function.
To use this code in your WordPress site, follow these steps:
-
Open the functions.php file of your theme or child theme. Typically, it is located in the root folder of your active theme.
-
Add the following code at the end of the file:
// www.websitefunctions.com
add_filter( 'tiny_mce_before_init', 'mce_custom_fonts' );
function mce_custom_fonts( $init )
{
$theme_advanced_fonts = "Roboto=roboto;" . /* This is my custom font */
"Andale Mono=andale mono,times;" .
"Arial=arial,helvetica,sans-serif;" .
"Arial Black=arial black,avant garde;" .
"Book Antiqua=book antiqua,palatino;" .
"Comic Sans MS=comic sans ms,sans-serif;" .
"Courier New=courier new,courier;" .
"Georgia=georgia,palatino;" .
"Helvetica=helvetica;" .
"Impact=impact,chicago;" .
"Symbol=symbol;" .
"Tahoma=tahoma,arial,helvetica,sans-serif;" .
"Terminal=terminal,monaco;" .
"Times New Roman=times new roman,times;" .
"Trebuchet MS=trebuchet ms,geneva;" .
"Verdana=verdana,geneva;" .
"Webdings=webdings;" .
"Wingdings=wingdings,zapf dingbats";
$init['font_formats'] = $theme_advanced_fonts;
return $init;
}
- Save the changes to the functions.php file.
After adding this code, the custom font options specified in the $theme_advanced_fonts variable will be available in the TinyMCE editor font selection dropdown. You can customize the font options by modifying the $theme_advanced_fonts string in the mce_custom_fonts() function according to your preferences.