How to Add Underline and Justify Text Buttons in WordPress

Are you looking for the missing underline and justify button in WordPress post editor? These buttons were removed from the post editor in WordPress 4.7. But there’s a way to bring them back. In this article, we will show you how to add underline and… Read More »

The post How to Add Underline and Justify Text Buttons in WordPress appeared first on WPBeginner.

Are you looking for the missing underline and justify button in WordPress post editor? These buttons were removed from the post editor in WordPress 4.7. But there’s a way to bring them back. In this article, we will show you how to add underline and justify text buttons in WordPress.

Underline and Justify Text in WordPress

Method 1: Using Re-add Text Underline and Justify Plugin

First thing you need to do is install and activate the Re-add Text Underline and Justify plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Writing page to configure the plugin settings.

Re-Add underline and justify text plugin settings

The plugin comes with two options to choose from.

You can add the underline and justify text buttons, so they will appear in the second row of the post editor buttons.

Alternatively, you can choose to re-add buttons and rearrange. This will put underline and justify text buttons in the same position as they were before WordPress 4.7.

Don’t forget to click on the save changes button to store your settings.

You can now visit Posts » Add New page, and you will find underline and justify text buttons added back to the post editor.

Underline and Justify text buttons added back in WordPress post editor

Method 2: TinyMCE Advanced Plugin

This method allows you to do a lot more than just adding the underline and justify text buttons. You can add custom styles, add missing buttons, and even create your own buttons.

First, you need to install and activate the TinyMCE Advanced plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » TinyMCE Advanced page to configure plugin settings.

Drag and drop underline and justify text buttons to the post editor

You will notice a preview of the WordPress post editor. Below the preview, it will show you all the unused buttons.

Now you need to drag and drop underline and justify text buttons from ‘Unused Buttons’ box to the post editor.

Don’t forget to click on the save changes button to store your settings.

You can now create a new post or edit an existing one. You will notice that the default WordPress post editor is replaced by the TinyMCE Advanced editor.

We hope this article helped you learn how to add underline and justify text buttons in WordPress. You may also want to see our list of tips for mastering the WordPress visual editor.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Underline and Justify Text Buttons in WordPress appeared first on WPBeginner.

How to Add Custom Styles to WordPress Visual Editor

Do you want to add custom styles in the WordPress visual editor? Adding custom styles allows you to quickly apply formatting without switching to text editor. In this article, we will show you how to add custom styles to the WordPress visual editor. Note: This… Read More »

The post How to Add Custom Styles to WordPress Visual Editor appeared first on WPBeginner.

Do you want to add custom styles in the WordPress visual editor? Adding custom styles allows you to quickly apply formatting without switching to text editor. In this article, we will show you how to add custom styles to the WordPress visual editor.

Adding custom styles in WordPress visual editor

Note: This tutorial requires basic working knowledge of CSS.

Why and When You Need Custom Styles for WordPress Visual Editor

By default, WordPress visual editor comes with some basic formatting and style options. However, sometimes you may need custom styles of your own to add CSS buttons, content blocks, taglines, etc.

You can always switch from visual to text editor and add custom HTML and CSS. But if you regularly use some styles, then it would be best to add them into visual editor so that you can easily reuse them.

This will save you time spent on switching back and forth between text and visual editor. It will also allow you to consistently use the same styles throughout your website.

Most importantly, you can easily tweak or update styles without having to edit posts on your website.

Having said that, let’s take a look at how to add custom styles in WordPress visual editor.

Method 1: Add Custom Styles in Visual Editor Using Plugin

First thing you need to do is install and activate the TinyMCE Custom Styles plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » TinyMCE Custom Styles page to configure the plugin settings.

TinyMCE Custom Styles settings

The plugin allows you to choose the location of stylesheet files. It can use your theme or child theme’s stylesheets, or you can choose a custom location of your own.

After that, you need to click on the ‘Save All Settings’ button to store your changes.

Now you can add your custom styles. You need to scroll down a little to the style section and click on the Add new style button.

First you need to enter a title for the style. This title will be displayed in the drop down menu. Next, you need to choose whether it is an inline, block, or selector element.

After that add a CSS class and then add your CSS rules as shown in the screenshot below.

Adding a new custom style

Once you have added a CSS style, simply click on the ‘Save All Settings’ button to store your changes.

You can now edit an existing post or create a new one. You will notice a Format drop down menu in the second row of WordPress visual editor.

Custom style menu in TinyMCE

Simply select some text in the editor and then select your custom style from the Formats dropdown menu to apply it.

You can now preview your post to see that your custom styles are applied correctly.

Method 2: Manually Add Custom Styles to WordPress Visual Editor

This method requires you to manually add code to your WordPress files. If this is your first time adding code to WordPress, then please see our guide on adding code snippets from web into WordPress.

Step 1: Add a custom styles drop down menu in WordPress Visual Editor

First, we will add a Formats drop down menu in the WordPress visual editor. This drop down menu will then allow us to select and apply our custom styles.

You need to add the following code to your theme’s functions.php file or a site-specific plugin.

function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

Step 2: Add select options to drop down menu

Now you will need to add the options to the drop down menu you just created. You will then be able to select and apply these options from the Formats drop down menu.

For the sake of this tutorial, we are adding three custom styles to create content block and buttons.

You will need to add the following code to your theme’s functions.php file or a site-specific plugin.

/*
* 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
* Notice that each array has title, block, classes, and wrapper arguments
* 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' => 'Content Block',  
			'block' => 'span',  
			'classes' => 'content-block',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Blue Button',  
			'block' => 'span',  
			'classes' => 'blue-button',
			'wrapper' => true,
		),
		array(  
			'title' => 'Red Button',  
			'block' => 'span',  
			'classes' => 'red-button',
			'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' ); 

You can now add a new post in WordPress and click on the Formats drop down menu in the Visual editor. You will notice that your custom styles are now visible under formats.

However, selecting them does not make any difference in the post editor right now.

Step 3: Add CSS Styles

Now the final step is to add CSS style rules for your custom styles.

You will need to add this CSS into your theme or child theme’s style.css and editor-style.css files.

.content-block { 
    border:1px solid #eee; 
    padding:3px;
    background:#ccc;
    max-width:250px;
    float:right; 
    text-align:center;
}
.content-block:after { 
    clear:both;
} 
.blue-button { 
	background-color:#33bdef;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

.red-button {
	background-color:#bc3315;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

Custom styles in WordPress post editor

The editor stylesheet controls the appearance of your content in the visual editor. Check your theme’s documentation to find out the location of this file.

If your theme doesn’t have an editor stylesheet file, then you can always create one. Simply create a new CSS file and name it custom-editor-style.css.

You need to upload this file to your theme’s root directory and then add this code in your theme’s functions.php file.

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

That’s all. You have successfully added your custom styles into WordPress visual editor. Feel free to play around with the code by adding your own elements and styles.

We hope this article helped you learn how to add custom styles to WordPress visual editor. You may also want to see our guide on how to add custom styles to WordPress widgets.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Custom Styles to WordPress Visual Editor appeared first on WPBeginner.

How to Add Content Templates in WordPress Post Editor

Do you find yourself using the same style of content in your articles? Wouldn’t it be nice if you could create content templates and reuse them in your WordPress post editor? In this article, we will show you how to add content templates in WordPress… Read More »

The post How to Add Content Templates in WordPress Post Editor appeared first on WPBeginner.

Do you find yourself using the same style of content in your articles? Wouldn’t it be nice if you could create content templates and reuse them in your WordPress post editor? In this article, we will show you how to add content templates in WordPress post editor.

Reusable blocks in a WordPress post

Why and When You Should Use Content Templates?

Many site owners and bloggers reuse content blocks such as buttons, tables, author bios, etc in their articles.

You can save these custom HTML or content blocks in a text editor, but you will need to open an external app, open a file, and then paste the information. This takes too much time and breaks your writing momentum.

Another disadvantage is that you will not be able to use these notes if you are on another computer or device.

By creating content templates, you will be able to:

  • Create as many content templates as you need.
  • Store your content templates in WordPress.
  • Manage your content templates from within WordPress admin area.
  • Easily reuse them in any WordPress post without leaving the post editor.
  • Share your templates with other authors on your site to reuse in their articles.
  • Move your content templates with you if you ever move your WordPress site.

Having said, let’s take a look at how to make it happen in WordPress.

Setting up TinyMCE Templates in WordPress

First thing you need to do is install and activate the TinyMCE Templates plugin. Upon activation the plugin will add a new menu item labeled ‘Templates’ in your WordPress admin menu.

You need to visit Templates » Add New to add your first template.

Creating a new template

A template is basically a custom post type with a fully functional WordPress post editor. You can use the visual editor or switch to the text editor to add more advanced HTML code. You can also add images and other media files.

Start by creating the content block that you want to reuse in your WordPress posts. You will see an option to enable ‘Insert as shortcode’. Checking this option will allow you to use shortcode to add this content block.

Once you are done, simply click on the publish button to make your content template available for use in other WordPress posts.

Adding Your Content Template in WordPress Posts

The plugin makes it extremely easy to reuse your TinyMCE templates. Simply create a new post or edit and existing one.

Insert template button on post editor screen

On the post editor screen, you will notice a new button labeled Insert Template. Clicking on the button will bring up Insert Template popup.

Adding a template into a post

Select the template you created earlier from the drop down menu. You will be able to see a live preview of your selected template on the screen. Next, click on the insert template button to add the template into your WordPress post.

Content template inserted into a post

If you are using the visual editor, then you will see your content template as it would appear in posts. If you are using the text editor, then you will see the HTML for the template. You can now save and preview your post.

You can create as many templates as you want, and you can insert as many of them inside a post as you like.

We hope this article helped you add content templates in WordPress post editor. You may also want to see our list of 14 tips for mastering the WordPress visual editor.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Content Templates in WordPress Post Editor appeared first on WPBeginner.

How to Disable the Full Height Post Editor in WordPress

Did you notice the scroll bar in your WordPress editor is missing? Recently one of our users asked if it was possible to disable the full-height post editor in WordPress and bring back the scroll bar. In this article, we will show you how to… Read More »

To leave a comment please visit How to Disable the Full Height Post Editor in WordPress on WPBeginner.

Did you notice the scroll bar in your WordPress editor is missing? Recently one of our users asked if it was possible to disable the full-height post editor in WordPress and bring back the scroll bar. In this article, we will show you how to disable the scroll free full-height post editor in WordPress.

In WordPress 4.0, a new writing experience was introduced to the post editor. As you write, the height of the post editor would automatically adjust thus eliminating the need of the scroll bar.

Default full height editor in WordPress

While that is great, it now means that you have to scroll through all the paragraphs just to reach your custom fields and other meta boxes such as SEO, Calendar, etc.

Some users found this a bit confusing and irritating.

If you want to disable the full height editor and revert to the old editor with scroll bar, then there is a very easy fix.

Disabling Scroll Free Full-Height Editor in WordPress

Simply login to the admin area of your WordPress site and add a new post. On the post editor screen, click on the Screen Options menu on the top right corner of the screen.

This will display a flydown menu with a number of options.

Screen Options menu on the post edit screen in WordPress

Uncheck the box next to ‘Enable full-height editor and distraction-free functionality’. Unchecking this option will disable the full-height editor functionality. It will also remove the distraction-free functionality from the editor.

That’s all. You can now enter your content in the post editor to see that your scroll bar is back just like the good ol’ times.

You can also click on the bottom right corner of the editor to drag and adjust the editor size.

Adjustable post editor with scrollbars in WordPress

We hope this article helped you disable the scroll free full-height editor in WordPress. You may also want to check out these 14 tips for mastering the WordPress visual editor.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit How to Disable the Full Height Post Editor in WordPress on WPBeginner.