How to Add Underline and Justify Text Buttons in WordPress

2 weeks ago, WordPress Plugin, 2 Views

Adding Underline and Justify Text Buttons to the WordPress Editor

WordPress, by default, offers a streamlined editor focusing on core formatting options. However, many users desire more traditional features like underline and justify text. While not included in the default toolbar for a design-conscious reason – emphasizing semantic HTML over visual styling – these features can be easily added back with a little code or a plugin. This article provides a comprehensive guide to adding underline and justify buttons to your WordPress editor, catering to both code-savvy users and those preferring a no-code solution.

Understanding Why They’re Not Included by Default

Before diving into the “how,” it’s essential to understand why these features are absent in the modern WordPress editor. The primary reason is to promote a separation of content and presentation.

Underlining, in particular, is discouraged because it can be confused with hyperlinks, impacting user experience and accessibility.
Justified text, while visually appealing to some, can create uneven spacing and “rivers” of white space, potentially hindering readability, especially for users with visual impairments.
Modern web design emphasizes CSS for styling, allowing for consistent formatting across the entire website without relying on inline styles applied within the content itself.

Despite these reasons, certain situations might warrant the use of underline or justify text. If you require these features, proceed with caution and consider their impact on accessibility and readability.

Method 1: Using a WordPress Plugin

The easiest and often recommended method for adding underline and justify buttons is through a WordPress plugin. Several plugins offer this functionality without requiring any coding knowledge.

Plugin Recommendation: TinyMCE Advanced

TinyMCE Advanced is a popular and highly-rated plugin that provides extensive control over the WordPress editor. It allows you to add, remove, and rearrange buttons on the toolbar, including underline and justify.

Installation and Activation

Navigate to your WordPress dashboard and click on “Plugins” -> “Add New.”
In the search bar, type “TinyMCE Advanced.”
Locate the TinyMCE Advanced plugin and click “Install Now.”
Once installed, click “Activate” to activate the plugin.

Configuring TinyMCE Advanced

After activation, you’ll find a new “TinyMCE Advanced” option under the “Settings” menu in your WordPress dashboard.
Click on “Settings” -> “TinyMCE Advanced.”
This will open the TinyMCE Advanced settings page, where you can customize the editor toolbar.
You’ll see two boxes: one containing the available buttons and another representing the current editor toolbar.
To add the underline button, find the “Underline” button in the “Available Buttons” box and drag it to the desired location in the “Toolbar” box.
To add the justify button, find the “Justify” button (it may appear as multiple justify options, such as “Justify Left,” “Justify Center,” “Justify Right,” and “Justify Full”) and drag the desired justification options to the toolbar.
You can rearrange the buttons in the toolbar by dragging them to different positions.
Once you’ve added and arranged the desired buttons, scroll down and click the “Save Changes” button.

Testing the New Buttons

Create a new post or edit an existing one.
You should now see the underline and justify buttons in the editor toolbar.
Click on the buttons to apply the formatting to your text.

Advantages of Using TinyMCE Advanced

Ease of use: No coding required.
Extensive customization: Offers a wide range of editor options beyond underline and justify.
Regular updates: Maintained and updated by the plugin developers.
Widely used and trusted: A popular and reliable plugin with a large user base.

Method 2: Adding the Buttons with Code (functions.php)

For users comfortable with code, adding the underline and justify buttons manually using the `functions.php` file or a custom plugin offers greater control. However, this method requires caution, as errors in the `functions.php` file can break your website. Always back up your website before making any code changes.

Accessing the functions.php File

There are two primary ways to access the `functions.php` file:

Via the WordPress Theme Editor: Navigate to “Appearance” -> “Theme Editor” in your WordPress dashboard. Locate the `functions.php` file in the list of theme files on the right-hand side. **Caution:** Directly editing the `functions.php` file within the Theme Editor is not recommended due to the risk of errors breaking your site. If an error occurs, you might lose access to your WordPress admin panel.
Via FTP/SFTP: Connect to your website server using an FTP or SFTP client. Navigate to the theme directory (`/wp-content/themes/your-theme-name/`) and locate the `functions.php` file. Download the file to your computer for editing and then upload it back to the server after making changes. This is the recommended approach because you can easily revert to the original file if something goes wrong.

**Important:** Before making any changes, create a child theme. Modifying the `functions.php` file of your parent theme will cause your changes to be overwritten when the parent theme is updated.

Adding the Code

Add the following code snippet to your `functions.php` file (or a custom plugin):

“`php
function add_underline_justify_buttons( $buttons ) {
array_push( $buttons, ‘underline’, ‘alignjustify’ );
return $buttons;
}
add_filter( ‘mce_buttons’, ‘add_underline_justify_buttons’ );

function add_underline_justify_styles( $buttons ) {
array_push( $buttons, ‘styleselect’ );
return $buttons;
}
add_filter( ‘mce_buttons_2’, ‘add_underline_justify_styles’ );

function underline_justify_tinymce_formats( $init_array ) {
$style_formats = array(
array(
‘title’ => ‘Underline’,
‘inline’ => ‘span’,
‘styles’ => array(
‘text-decoration’ => ‘underline’
)
),
array(
‘title’ => ‘Justify’,
‘block’ => ‘p’,
‘classes’ => ‘justify’,
‘wrapper’ => false,
),
);
$init_array[‘style_formats’] = json_encode( $style_formats );

return $init_array;
}
add_filter( ‘tiny_mce_before_init’, ‘underline_justify_tinymce_formats’ );

function custom_editor_styles() {
add_editor_style( ‘custom-editor-style.css’ );
}
add_action( ‘init’, ‘custom_editor_styles’ );
“`

After adding the code, you will also need to create a `custom-editor-style.css` file in the root directory of your theme (or child theme) and add the following CSS to it:

“`css
p.justify {
text-align: justify;
}
“`

Explanation of the Code:

`add_underline_justify_buttons`: This function adds the ‘underline’ and ‘alignjustify’ buttons to the first row of the TinyMCE editor toolbar.
`add_underline_justify_styles`: This function adds the ‘styleselect’ button to the second row of the TinyMCE editor toolbar. The ‘styleselect’ button is necessary to allow the application of custom styles.
`underline_justify_tinymce_formats`: This function defines the custom styles for underline and justify, adding them to the ‘styleselect’ dropdown. The underline is applied using an inline style (span with text-decoration: underline), while justify applies a CSS class “justify” to the paragraph element.
`custom_editor_styles`: This function tells WordPress to load a custom CSS file (`custom-editor-style.css`) into the editor so that the justify styling will appear correctly in the backend.
`custom-editor-style.css`: This CSS file defines the `justify` class, setting the `text-align` property to `justify`. This ensures that the justified text is displayed correctly in the WordPress editor.

Clearing Your Browser Cache

After adding the code, clear your browser cache to ensure the changes are reflected in the WordPress editor.

Testing the New Buttons

Create a new post or edit an existing one.
You should now see the underline and styles dropdown in the editor toolbar.
Select the desired text, click the “styles” dropdown and choose underline or justify to apply the formatting.

Advantages of Using Code

Control: Provides direct control over the editor customization.
No plugin dependency: Avoids relying on third-party plugins.
Customization: Allows for more advanced customization of the editor and styling.

Disadvantages of Using Code

Requires coding knowledge: Not suitable for users unfamiliar with PHP and CSS.
Potential for errors: Incorrect code can break your website.
Maintenance: Requires ongoing maintenance to ensure compatibility with WordPress updates.

Method 3: Using a Code Snippets Plugin

An alternative to directly modifying the `functions.php` file is to use a code snippets plugin. These plugins allow you to add PHP code to your website without directly editing theme files. This is generally considered a safer approach than directly editing the `functions.php` file.

Plugin Recommendation: Code Snippets

Code Snippets is a popular and reliable plugin that allows you to add, manage, and run code snippets on your WordPress website.

Installation and Activation

Navigate to your WordPress dashboard and click on “Plugins” -> “Add New.”
In the search bar, type “Code Snippets.”
Locate the Code Snippets plugin and click “Install Now.”
Once installed, click “Activate” to activate the plugin.

Adding the Code Snippet

After activation, you’ll find a new “Snippets” option in your WordPress dashboard menu.
Click on “Snippets” -> “Add New.”
Give your snippet a descriptive title, such as “Add Underline and Justify Buttons.”
Copy and paste the PHP code (provided in Method 2) into the code editor.
Ensure that the “Run snippet everywhere” option is selected.
Click the “Save Changes and Activate” button.

You will still need to create the `custom-editor-style.css` file as described in Method 2.

Testing the New Buttons

Create a new post or edit an existing one.
You should now see the underline and styles dropdown in the editor toolbar.
Select the desired text, click the “styles” dropdown and choose underline or justify to apply the formatting.

Advantages of Using a Code Snippets Plugin

Safer than editing functions.php: Protects your functions.php file from direct modifications.
Easy management: Allows you to easily enable, disable, and manage code snippets.
Organization: Helps keep your code organized and separate from your theme files.

Important Considerations

Before implementing any of these methods, keep the following in mind:

Accessibility: Be mindful of accessibility guidelines when using underline and justify text. Consider alternatives that provide better user experience for all users.
Readability: Justified text can sometimes hinder readability, especially on smaller screens. Test your content on different devices to ensure optimal readability.
Theme compatibility: Some themes may have custom CSS that overrides the styles you add. Test your changes thoroughly to ensure they work as expected.
Plugin updates: If using a plugin, keep it updated to ensure compatibility with the latest WordPress version and to benefit from bug fixes and security updates.
Backups: Always back up your website before making any code changes or installing new plugins. This will allow you to restore your website in case of any issues.

Conclusion

Adding underline and justify text buttons to the WordPress editor is a straightforward process, whether you choose to use a plugin or add the functionality manually with code. By understanding the reasons behind their absence in the default editor and carefully considering the implications for accessibility and readability, you can make an informed decision about whether or not to add these features to your website. Remember to always back up your website before making any changes and to test your changes thoroughly to ensure they work as expected.

customize WordPress toolbar, text formatting WordPress, WordPress editor tools, WordPress justify, WordPress underline

admin