Support

Account

Home Forums Backend Issues (wp-admin) Custom wysiwyg styleselect

Solved

Custom wysiwyg styleselect

  • Hello, using ACF Pro, I’ve been trying to create some new styleselect options for the wysiwyg editor, as I need 3 new styles inside it (blockquotes with classes). As the wysiwyg uses the tinyMCE, and following the guide from wp codex https://codex.wordpress.org/TinyMCE_Custom_Styles, I tried inserting the following code in my functions.php

    // Callback function to insert 'styleselect' into the $buttons array
    function wpb_mce_buttons_2($buttons) {
        array_unshift($buttons, 'styleselect');
        return $buttons;
    }
    add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
    
    /*
    * Callback function to filter the MCE settings
    */
    function my_mce_before_init_insert_formats( $init_array ) {  
     
    	// Define the style_formats array
    	 
    	$style_formats = array(  
    	/*
    	* Each array child is a format with it's own settings
    	* Title is the label which will be visible in Formats menu
    	* Block defines whether it is a span, div, selector, or inline style
    	* Classes allows you to define CSS classes
    	* Wrapper whether or not to add a new block-level element around any selected elements
    	*/
    		array(  
    			'title' => 'Quote 1',  
    			'block' => 'blockquote',  
    			'classes' => 'quote-1',
    			'wrapper' => true,
    		),  
    		array(  
    			'title' => 'Quote 2',  
    			'block' => 'blockquote',  
    			'classes' => 'quote-2',
    			'wrapper' => true,
    		),
    		array(  
    			'title' => 'End quote',  
    			'block' => 'blockquote',  
    			'classes' => 'quote-end',
    			'wrapper' => true,
    		),
    	);
    
    	// Insert the array, JSON ENCODED, into 'style_formats'
    	$init_array['style_formats'] = json_encode( $style_formats );  
    		 
    	return $init_array;  
    	   
    } 
    // Attach callback to 'tiny_mce_before_init' 
    add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

    But it’s not adding the new stylesheets as expected. Any ideas on what’s wrong?

    Using 2 extra plugins (Advanced Editor Tools AND TinyMCE Custom Styles) I get the result I want so it can surely be done, but that’s causing extra plugin dependencies, and I want to avoid that.

  • Actually it does work!
    As a ‘rookie’ I didn’t see the ‘Toggle Toolbar’ button that makes the new stylesheets appear in the secondary toolbar below…

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.