Check out your WordPress visual editor. There are some standard options for formatting and styling your content, but not much in terms of customization to make your posts and pages look a little fancy.

WordPress editor

Now, you probably know that you can switch back and forth between the text editor and the visual editor in WordPress to add some CSS to create things like buttons and text blocks, but it’s a pain if you’re not experienced editing code text The editor seems a little intimidating.

Wouldn’t it be easier if you could create your own custom styles, put them in a drop-down menu in the WordPress editor, and choose to use them when needed? Yes, it’s a lot easier, so we’d like to outline how to do it here. Keep in mind that while we’re trying to make this process as easy as possible, if you want to discover the full benefits of custom styles, it’s helpful to know a little bit of CSS.

Let’s see how to add custom styles in the WordPress visual editor.

Add custom styles to the WordPress visual editor by adding code

The first option requires you to know a bit about how to combine and modify CSS, but I’ll introduce you to the basics so you can use that knowledge in the future. This is a good option if you don’t want to use plugins to affect your website.

The purpose of this is to add a new dropdown menu with custom styles to your WordPress visual editor, which enables you to select elements in the editor and then apply custom styles to them.If you are developing a new theme, please find your function.php file and put the code below into that file, or if you’re using a built theme, paste this code into the 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' );

Go back to the editor in one of your WordPress posts, and you should now see a new “Format” button on the first line of the editor. Notice how we connect to “mce_buttons_1? This places the format menu button on the first line of the mce editor. You can also use the “mce_buttons_2” filter to place it on the second line or “mce_buttons_3” to place it on the first line Three lines.

So now that you have your menu items enabled, it’s time to add your custom styles to use in your posts.Take the code listed below and paste it into your function.php file, it will add 2 new styles to the Format dropdown – Theme Button and Highlight.

/**
 * Add custom styles to the mce formats dropdown
 *
 * @url https://codex.wordpress.org/TinyMCE_Custom_Styles
 *
 */
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 change the title to display a different name in the dropdown, add/remove items from the array, etc.You can modify anything in this code to display your own custom formatting styles, be sure to check out WordPress Codex A more in-depth explanation of accepted parameters and return values.

Now that you have your new styles, you can highlight content in the editor and apply those styles. Notice how the “Subject Button” format has a selector parameter? This means that styles can only be applied to specific selectors (in this case “a” or “link” tags). The second format we’ve added, “highlight”, doesn’t have a selector parameter, but an “inline” parameter that tells it to apply the style to any text you highlight in the editor, wrapping it with your Unique class names in the span.You can see an example from our Total WordPress theme on how we use formatting so that users can easily Application manifest View any bullet in the editor.

list

So now you can use your custom formatting, but they won’t look any different until you add some custom CSS to your site to style it. You should find the stylesheet for your theme (if building your own) or child theme and paste the following CSS code into 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 now style the new formats on the front end so they can be seen in real time as they are applied. Yeah! But wouldn’t it be nice to see your styles in the actual editor when they’re applied? To do this, you need to use the “Editor Style Sheets” feature in WordPress. If you are building your own theme then you will want to create a new css file in your theme called “editor-style.css” with custom CSS (you can name it whatever you want, Just make sure to edit the snippet below accordingly) for your format, then add the function below to load it into the backend.

function myprefix_theme_add_editor_styles() 
    add_editor_style( 'editor-style.css' );

add_action( 'init', 'myprefix_theme_add_editor_styles' );

If you’re using someone else’s theme then you’ll need to add it to your child theme, just be sure to give it a unique name so it doesn’t conflict with your parent theme, or if your parent theme already has There is a CSS file editor that you can actually copy and paste into your child theme (no need to add the PHP code above) and then add your new CSS as WordPress will load the parent theme’s editor CSS file when The child theme is checked first before, and if it finds it, it will load it from the child theme instead.

Add custom styles to WordPress visual editor with beautiful plugins

If you don’t have time to play with the code, or you can’t figure it out yourself, there’s good news. There is a plugin that allows you to do exactly what we just did above without having to mess with the code.

TinyMCE custom style plugin

Just search, install and activate TinyMCE custom style plugin and activate it on your WordPress site.

TinyMCE custom style settings

go with Settings > TinyMCE prof.styles On the left side of the WordPress dashboard. This is where you modify plugin settings.

TinyMCE custom style settings

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

TinyMCE custom style added new

After saving the settings, scroll down to select the “Add New Style” button.

TinyMCE custom style options

Here you can customize how you want your custom style to look. It’s basically a simple web-based editor that generates CSS code for you. Enter a title for whatever you want to display in the drop-down menu. Choose whether to require selector, inline, or block types. Feel free to use the screenshots above to fill in the CSS classes and styles, or create your own based on your plan using the dropdown menus. When done, click Save Settings at the bottom of the page.

TinyMCE custom style format

It’s time to see how the new custom style looks in your editor. Open a new post or page and find the Format drop-down menu on the left side of the visual editor. It is displayed on the second line. Once you click on the drop-down menu, it will display the new style you just created.

TinyMCE custom style format is in use

Click on the Big Blue Button option or whatever you have created to see what it shows up in your editor. To use it, just highlight the text you want to format, click your option, and voila!

in conclusion

That’s it for now!You can always check out more information on how to use the new style WordPress Codex page dedicated to this topic.

If you have any questions about how to add custom styles to the WordPress visual editor, please let us know in the comments section. And feel free to share any unusual styles you create to make your website look a little better!