TinyMCE Custom Styles

Home Forums Gillion Theme TinyMCE Custom Styles

Home Forums Gillion Theme TinyMCE Custom Styles

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • SarahS
    Participant

    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

    SarahS
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form