Add custom class (P and span) to the editor

  • Unknown's avatar
    mompreneurslebanon · Member ·

    Hello,

    I had done custom classes in which I should manually type them, for example:

    <p class=”container-utlimate”><span class=”pull1 pull-processed2 pull2″>

    This is a test code
    </span>
    </p>

    How can I make the user select the p & span to the selected text in the editor without having the user to type <p class=”..”> <span class=”….” TEXT HERE </span></p>

    as some editors are not familiar with css and coding.

    Thank you

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mompreneurslebanon · Member ·

    Here is my code:

    function add_style_select_buttons( $buttons ) {
    array_unshift( $buttons, ‘styleselect’ );
    return $buttons;
    }
    // Register our callback to the appropriate filter
    add_filter( ‘mce_buttons_2’, ‘add_style_select_buttons’ );
    //add custom styles to the WordPress editor

    function myprefix_add_format_styles( $init_array ) {
    $style_formats = array(
    // Each array child is a format with it’s own settings – add as many as you want

    array(
    ‘title’ => __( ‘Highlight223’, ‘text-domain’ ), // Title for dropdown
    ‘inline’ => ‘span’, // Wrap a span around the selected content
    ‘classes’ => ‘text-highlight2’, // Class name used for CSS,
    ‘selector’ => ‘p’,
    ‘classes’ => ‘class-d class-d2’
    ),
    );
    $init_array[‘style_formats’] = json_encode( $style_formats );
    return $init_array;
    }
    add_filter( ‘tiny_mce_before_init’, ‘myprefix_add_format_styles’ );

    But when I am selecting text then chose Highlight223 from the drop down menu, then it is only chosing the p and now the span.

    Any help ?

    Thank you

  • staff-totoro · Staff ·

    Hi there,

    We can’t help directly because we don’t host mompreneurs-lebanon.org on our WordPress.com managed hosting. As a result, we can’t take a closer look at your site.

    Instead your host (securahosts.com) uses the open-source variant of the WordPress platform which functions differently than what we offer here on WordPress.com. Specifically, we do not permit editing of PHP source file (unless you are upgraded to our WordPress.com Pro Plan) which is my other clue that you may have your WordPress site through another provider.

    The good news is that help is available here at the open-source WordPress forums: https://wordpress.org/support/forum/how-to-and-troubleshooting/

    The folks in the open-source forums are more familiar with these kinds of issues and are in the best position to help. Thanks!

  • The topic ‘Add custom class (P and span) to the editor’ is closed to new replies.