Customizing Styles in WordPress Visual Editor

Customizing the appearance of your WordPress posts and pages can be a daunting task, especially if you are not familiar with coding. The standard formatting and styling options in the visual editor are limited, and jumping back and forth between the Text and Visual editors to add CSS can be time-consuming. However, there is an easier way to create custom styles and apply them to your content. In this article, we will show you how to add custom styles to the WordPress visual editor.

Option 1: Adding Code

This option requires some knowledge of CSS and how to incorporate and modify it. However, we will provide a step-by-step guide to help you get started. The goal is to add a new dropdown menu that includes custom styles in your WordPress visual editor, giving you the ability to select elements in your editor and apply custom styles to them.

If you are developing a new theme, locate your functions.php file and place the following code into that file. If you are working with an already built-theme, paste this code in a child theme’s functions.php file:

function myprefix_mce_buttons_1( $buttons ) {

array_unshift( $buttons, ‘styleselect’ );

return $buttons;

}

add_filter( ‘mce_buttons_1’, ‘myprefix_mce_buttons_1’ );

After adding this code, go back to the editor in one of your WordPress posts. You should now see a new “Formats” button in the top row of the editor. This places the formats menu button in the first row of the mce editor. You could also use the “mce_buttons_2” filter to place it in the second row or “mce_buttons_3” to place it in the 3rd row.

Now that you have enabled the menu item, it’s time to add your custom styles to use within your posts. Take the code listed below and paste it into your functions.php file. This will add 2 new styles to the Formats dropdown – “Theme Button” and “Highlight”:

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’ => __( ‘Theme Button’, ‘text-domain’ ), // Title for dropdown

‘selector’ => ‘a’, // Element to target in editor

‘classes’ => ‘theme-button’ // Class name used for CSS

),

array(

‘title’ => __( ‘Highlight’, ‘text-domain’ ), // Title for dropdown

‘inline’ => ‘span’, // Wrap a span around the selected content

‘classes’ => ‘text-highlight’ // Class name used for CSS

),

);

$init_array[‘style_formats’] = json_encode( $style_formats );

return $init_array;

}

add_filter( ‘tiny_mce_before_init’, ‘myprefix_add_format_styles’ );

You can modify just about anything in this code to reveal your own custom format styles. Be sure to check out the WordPress Codex for a more in-depth explanation of the accepted parameters and return values.

Now that you have new styles, you can highlight content in your editor and apply the styles. Notice how the “Theme Button” format has a selector parameter? This means that the style can only be applied to that specific selector (in this case the “a” or “link” tag). The second format we added “Highlight” does not have a selector parameter but rather an “inline” parameter which tells it to apply the style to whatever text you have highlighted in your editor and wrap it in a span with your unique classname.

However, your custom formats won’t look any different until you’ve added some custom CSS to your site to style them. Locate the stylesheet for your theme (if building your own) or child theme and paste the following CSS code in the file:

.theme-button {

display: inline-block;

padding: 10 15px;

color: #fff;

background: #1796c6;

text-decoration: none;

}

.theme-button:hover {

text-decoration: none;

opacity: 0.8;

}

.text-highlight {

background: #FFFF00;

}

This will add styling to your new formats for the front-end so when applied, you can see them live. However, you may also want to see your styles in the actual editor when they are being applied. To do this, you will need to make use of the “editor stylesheet” function in WordPress. If you are building your own theme, create a new CSS file in your theme called “editor-style.css” with the custom CSS added for your formats and then add the function below to load it in the backend:

function myprefix_theme_add_editor_styles() {

add_editor_style( ‘editor-style.css’ );

}

add_action( ‘init’, ‘myprefix_theme_add_editor_styles’ );

If you are working with someone else’s theme, add this in your child theme, just be sure to give it a unique name so it doesn’t conflict with your parent theme. Alternatively, if your parent theme already has a CSS file for the editor, you can copy it and paste it in your child theme (without adding the PHP code above) then add your new CSS because WordPress will check the child theme first before loading the parent theme’s editor CSS file.

Option 2: Using a Plugin

If you don’t have time to play around with code or can’t figure it out yourself, there is a plugin that lets you complete exactly what we just did above without having to screw around with the code. The TinyMCE Custom Styles plugin allows you to add custom styles to the WordPress visual editor without any coding knowledge.

Simply search for, install and activate the TinyMCE Custom Styles plugin on your WordPress site. Go to Settings > TinyMCE prof.styles on the left-hand side of your WordPress dashboard. This is where you modify your settings for the plugin.

The plugin lets you choose where your stylesheets are or where you want to place them. It’s recommended that you create a new custom directory. Select the third option and give your directory a name, then move down the page to click your Save Settings option before proceeding onto the next step.

Once you save the settings, scroll down to select the Add New Style button. This is where you customize what you want your custom styles to look like. It’s basically a simple web-based editor that generates the CSS code for you. Type in a Title for whatever you want to show up in the dropdown menu. Choose whether you want a selector, inline, or block type. Once done, click on Save Settings at the bottom of the page.

Now it’s time to see how the new custom style looks in your editor. Open up a new post or page and locate the Formats dropdown menu on the left-hand side of the Visual editor. It shows up in the second line. Once you click on the dropdown menu, it will reveal the new style you just created.

Click on the Big Blue Button option, or whatever you created, to see it revealed in your editor. To use it, simply highlight the text you want formatted, then click on your option and voila!

Conclusion

Customizing your WordPress posts and pages can be made easier by adding custom styles to the visual editor. Whether you choose to add code or use a plugin, custom styles can help make your content stand out and look more professional. With a little CSS knowledge, you can create unique styles that reflect your brand and enhance your website’s appearance. If you have any questions about how to add custom styles to the WordPress visual editor, feel free to leave a comment below.

Stay in Touch

spot_img

Related Articles