Home › Forums › Gillion Theme › TinyMCE Custom Styles
Home › Forums › Gillion Theme › TinyMCE Custom Styles
Hi, I am trying to create custom formats for the Format dropdown, but the example on the WordPress and other sites, does not work. Do you have a specific method for adding or modifying the dropdown for custom styles?
From my functions.php in the gillion-child theme.
// Callback function to insert 'styleselect' into the $buttons array// Callback function to insert 'styleselect' into the $buttons arrayfunction my_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons;}// Register our callback to the appropriate filteradd_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {
$style_formats = array( array( 'title' => 'Download Link', 'selector' => 'a', 'classes' => 'download' ), array( 'title' => 'My Test', 'selector' => 'p', 'classes' => 'mytest', ), array( 'title' => 'AlertBox', 'block' => 'div', 'classes' => 'alert_box', 'wrapper' => true ), array( 'title' => 'Red Uppercase Text', 'inline' => 'span', 'styles' => array( 'color' => 'red', // or hex value #ff0000 'fontWeight' => 'bold', 'textTransform' => 'uppercase' ) ) );
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
Running
WordPress 4.8.2 running With Gillion Child theme.
Hi Sarah,
I hope you are well today and thank you for your question.
You can try using the following solutions.
https://codex.wordpress.org/TinyMCE_Custom_Styles
https://wordpress.org/plugins/tinymce-custom-styles/
If it doesn’t work for you or if you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Best regards,
Shufflehound team
For anyone else with this issue who does not want to use a plugin I have managed to do this by resetting the styles and substituting them with my own.
function my_mce_before_init_insert_formats( $init_array ) {function my_mce_before_init_insert_formats( $init_array ) {
// reset gillion style formats
unset($style_formats);
... //rest of code as pre https://codex.wordpress.org/TinyMCE_Custom_Styles
Glad you managed to achieve it and thanks for helping out here in this forum by sharing the solution.
Your help here is really appreciated.
If you need services beyond standard support, we've got your back!
If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.
We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.
More complex styling changes, theme option modifications, and third-party integrations.
If you need something that's not included in the theme, we can code it for you.
Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.
Full website builds, custom theme development, or plugin creation from scratch.
We'll provide a clear quote based on what you need. No hidden fees.