Today I will be contributing a plugin which adds styles to the WYSIWYG Editor of WordPress, the plugin will be plug and play. Basically what the plugin does is when activated it applies a custom css stylesheet to the WYSIWYG Editor.

Features or Work Done

1. Created a custom css file for the editor
2. Create a WordPress Plugin File
3. Integrate the custom css to the WordPress WYSIWYG Editor.

What is the WordPress WYSIWYG Editor?

It is a powerful tool used to edit content on websites, web pages. The most popular one is called TinyMCE. It is like the markdown editor for Steemit or Busy.org but it has more features. A screenshot of the WYSIWYG Editor of WordPress:

Advantages of adding Editor Styles

One of the advantages of adding editors styles is it will be easier to edit the content you are gonna add to the editor. Much more important will be that you can use the styles of the front-end of your website with the same as the editor styles you are gonna add so that when you edit on the WYSIWYG Editor the layout and look is pretty much the same with what you are gonna get on the site's front-end.

How To Use the Plugin

Step One

Add the plugin folder editor-stylify to the wp-content/plugins folder in your WordPress Installation through FTP or File Manager.

Step Two

In the WordPress Admin Dashboard go to the Plugins page and activate the plugin

Step Three

After activating, the editor now should have the css styles you have.

Step Four

If you want to add your custom styles to the editor stylesheet, you can just edit the es_customeditor.css file on the wp-plugins/plugins/editor-stylify/css folder with a text editor you are comfortable with.

Results in Activating the Plugin

Before

After

Links

Repository: https://github.com/renegade47/wp-editor-stylify
Commit: https://github.com/renegade47/wp-editor-stylify/commit/276a655f7e55f6051c55274b7b54cf9f17c6a8e3

Github Proof

---

Posted on Utopian.io - Rewarding Open Source Contributors

---