In the toolbar, how to add custom css styles?

[blaouchez]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

I notice you have a child theme but you don´t have a functions.php inside it.
You should create a file functions.php with the following content inside:

<?php
function custom_mce_styles( $init ) {
        $init['theme_advanced_buttons2_add_before'] = 'styleselect';
        $init['theme_advanced_styles'] = 'Impact Text=impact-text';
        return $init;
    }

add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

?>

-Rui

[blaouchez]

If I put this code in function.php, the WP admin is no longer accessible.

If I create a theme function.php in my child page, the WP admin is no longer accessible.

[Rui Guerreiro – SUPPORT]

Can you create and empty functions.php inside the child theme?
That shouldn’t break the site unless exist any syntax error.

-Rui

[blaouchez]

It is normal that the current code does not work because it has changed since the WordPress version 3.9

Do you know the code to use my new page “editor-style.css” style?

[Rui Guerreiro – SUPPORT]

This is the code we have in theme functions.php

	function sf_custom_mce_styles( $args ) {
				
		$style_formats = array (
		    array( 'title' => 'Impact Text', 'selector' => 'p', 'classes' => 'impact-text' ),
		);
		
		$args['style_formats'] = json_encode( $style_formats );
		
		return $args;
	}
	 
	add_filter('tiny_mce_before_init', 'sf_custom_mce_styles');

What exactly are you trying to achieve?

-Rui

[blaouchez]

Rui thank you but it does not work with Felxform

would have:

– A “Styles” button appears in the toolbar
– As “editor-style.css” styles appear in the toolbar

[Kyle – SUPPORT]

Hi

Try this plugin: https://wordpress.org/plugins/tinymce-and-tinymce-advanced-professsional-formats-and-styles

You will need to remove

<?php
function custom_mce_styles( $init ) {
        $init['theme_advanced_buttons2_add_before'] = 'styleselect';
        $init['theme_advanced_styles'] = 'Impact Text=impact-text';
        return $init;
    }

add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

?>

from the parent theme’s functions.php file

– Kyle

[blaouchez]

Thank you very much Kyle, the solution is very good and the “Format” button appears in the toolbar 🙂

but I do not see the display style (.testStyle) that I created in “editor-style-shared-css”

I have placed the sheet of “editor-style-shared-css” style at the root and well recognized by the plugin

How to show my styles in the toolbar

After that, I should be able to run 🙂

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

I see that you haven’t added a style for the plugin? Look at the last screenshot, you need to ‘add a new style’

– Kyle

[blaouchez]

This reply has been marked as private.

[Kyle – SUPPORT]

I’m afraid it’s not our job to support plugins. Please read their documentation that explains how to set up custom styles

– Kyle

[blaouchez]

Yes, I understand Kyle and you have already helped me a lot, thank you very much !

I tried to find an example but without success. I’ll look again.

This is the only detail to finally get to this very important function for my project

[Kyle – SUPPORT]

I used the plugin a couple of years ago and it worked, I know that you have to add the css class which you haven’t done

– Kyle

[blaouchez]

Sorry to insist, but as you know very well this plugin, could you just give me one example? Just to understand.