How to Set Default Font, Size, alignment in WordPress classic editor

How to Set Default Font, Size, and Alignment in WordPress Classic Editor: A Step-by-Step Guide

The WordPress Classic Editor is a popular choice for users who prefer simplicity and familiarity in their content creation process. However, the default settings for font, size, and text alignment may not always suit your preferences. This guide explains how to customize the default font (Roboto), size (12px), and text alignment (justify) in the WordPress Classic Editor using simple code modifications. Follow the steps below to implement these changes seamlessly.

Why Customize the WordPress Classic Editor?

Customizing the Classic Editor allows you to:

• Ensure consistent formatting for all your posts and pages.
• Save time by avoiding repetitive manual formatting.
• Improve the visual presentation and readability of your drafts while editing.

Step 1: Prepare to Modify Your Theme

To make changes to the Classic Editor, you will modify your theme’s functions.php file. Always back up your site before editing theme files to prevent accidental loss of data.

Step 2: Add Custom Font, Size, and Alignment

The following code will apply your desired settings directly to the Classic Editor:

function custom_tinymce_settings($initArray) {
$initArray['content_style'] = "body {
font-family: 'Roboto', sans-serif;
font-size: 12px;
text-align: justify;
line-height: 1.5;
}";
return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_tinymce_settings');

function load_google_fonts_for_editor() {
add_editor_style('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
}
add_action('admin_init', 'load_google_fonts_for_editor');


What This Code Does:

• Font Family: Sets the font to Roboto for a modern and clean look.
• Font Size: Establishes 12px as the default size for easy readability.
• Text Alignment: Justifies all text to ensure a polished, professional appearance.
• Line Height: Adds spacing between lines to enhance readability.
• Google Fonts Integration: Loads the Roboto font directly from Google Fonts into the editor.

Step 3: Implement the Code

1. Log in to your WordPress Admin Panel.
2. Navigate to Appearance > Theme Editor.
3. Select the functions.php file from the file list on the right.
4. Paste the code snippet at the bottom of the file.
5. Save the file.

Step 4: Verify the Changes

After saving the changes:

1. Open a new post or page in the Classic Editor.
2. Start typing to see the new default formatting applied:
   • Font: Roboto
   • Size: 12px
   • Alignment: Justified

If the changes are not visible, clear your browser cache and refresh the editor.

Step 5: Backup and Maintenance

Always keep a backup of your theme files. If you switch themes in the future, you’ll need to reapply these settings. Alternatively, consider using a child theme to preserve your customizations during theme updates.

Optional: Additional Customizations

You can further enhance the Classic Editor experience by:

• Adding custom colors to the text.
• Including specific font weights (e.g., bold or light).
• Defining padding or margins for better text layout.

Feel free to modify the content_style property in the code to suit your preferences.

Why Use Roboto and Justify Alignment?

• Roboto: This Google font is widely recognized for its clean and modern appearance, making it an excellent choice for web and editorial content.
• Justify Alignment: Providing a balanced text alignment creates a polished look, improving the readability of lengthy posts.

Conclusion

By following this guide, you can customize the WordPress Classic Editor to fit your specific needs, ensuring that your writing experience is both comfortable and efficient. Whether you are creating a blog post or drafting a page, these simple adjustments can significantly improve your workflow.

Hashtags

#WordPressClassicEditor #WordPressCustomization #RobotoFont #TextAlignment #WordPressDevelopment #FontCustomization #ContentCreation #WebDesignTips #WordPressTips #DigitalContentCreation #TechGuides #WebDevelopmentTools

If you have any questions or encounter issues, feel free to reach out for assistance!