Lots of WordPress users start with the default theme and plugin editors. While these offer a basic level of functionality, they can feel restrictive for those seeking more advanced customization options.
Upgrading to a more robust code editor will empower you with new features like access control, child theme creation, and file downloads.
At WPBeginner, our team has researched and tested different tools to find the one that can efficiently replace the default editor. We have focused our efforts on finding a free tool that can be used by bloggers and small businesses alike.
In this article, we will show you how to easily replace the default theme and plugin editor in WordPress.
Why Replace the Default Theme and Plugin Editor in WordPress?
The default theme editor in the WordPress website’s dashboard allows you to make direct changes to the code in your theme files.
Similarly, the plugin editor lets you edit the code of the installed plugins on your website.
These built-in WordPress editors have text editor interfaces that lack advanced features like access control, file download/upload, and child theme creation. This makes it time-consuming for you to add and maintain custom code.
Plus, if an unauthorized person gains access to your WordPress admin area, then they can easily access the default editors to edit your theme and plugin files. This can allow them to install malware on your website.
By replacing these editors with a plugin, you can easily customize your WordPress themes and plugins from the dashboard by adding or removing code snippets, customizing colors, modifying various template files, CSS styles, and more.
This will allow you to make quick changes to your theme or plugin without accessing your website files via FTP.
You can also create child themes, control editor access to make your website more secure, and even upload files to your plugins and themes from your computer.
Having said that, let’s see how to easily replace the default theme and plugin editor in WordPress. You can use the quick links below to jump to the different parts of our tutorial:
- How to Replace the Default Theme and Plugin Editors in WordPress
- Editing Your Theme Files Using the Theme Editor
- Editing Your Plugins Using the Plugin Editor
- Configuring Access Control With the Theme Editor Plugin
- Creating a Child Theme With the Theme Editor
- Bonus: Use WPCode to Add Custom Code to Your Website
How to Replace the Default Theme and Plugin Editors in WordPress
First, you need to install and activate the Theme Editor plugin. For detailed instructions, you can see our beginner’s guide on how to install a WordPress plugin.
Note: Before making any changes to your theme or plugin files, please make sure to create a complete backup of your WordPress website. This will come in handy if anything goes wrong and you have to restore WordPress from a backup.
Upon activation, head over to the Theme Editor » Settings page from the WordPress admin sidebar.
Once you are there, check the ‘Yes’ box for the ‘Enable code editor for theme’ option.
After that, if you want to disable the default WordPress theme editor, then you need to check the ‘Yes’ box next to the ‘Disable WordPress theme file editor?’ option.
Once you have done that, just switch to the ‘Plugin Editor’ tab at the top.
Here, you need to check the ‘Yes’ box next to the ‘Enable code editor for plugin’ option.
You can also disable the default editor by choosing the ‘Yes’ option for the ‘Disable WordPress plugin file editor?’ setting.
Next, switch to the ‘Code Editor’ tab from the top of the page.
From here, you can choose a theme for the code editor from the dropdown menu. This will display the code in your theme and plugins in different backgrounds and font colors.
Once you are done, don’t forget to click the ‘Save Changes’ button to store your settings.
Editing Your Theme Files Using the Theme Editor
Now, you need to visit the Theme Editor » Theme Code Editor page from the WordPress admin dashboard.
From here, you must select the theme that you want to edit from the dropdown menu in the right corner of the screen. Next, you have to choose the theme file where you want to add code from the sidebar on the right.
After that, you can easily add, remove, or edit code to your theme files from the theme editor on your screen.
Once you are done, don’t forget to click the ‘Update File’ button to store your settings.
You can also download the file you just edited by clicking on the ‘Download File’ button. If you want to download the whole theme instead, then you can click the ‘Download Theme’ button.
Editing Your Plugins Using the Plugin Editor
If you want to add code to your plugin files instead, then you need to visit the Theme Editor » Plugin Code Editor page from the WordPress admin sidebar.
Once you are there, choose a plugin to edit from the dropdown menu in the right corner of the screen.
After that, you can select a plugin file to edit from the sidebar on the right and then edit it using the plugin code editor.
Once you are satisfied with your changes, just click the ‘Update File’ button to store your settings.
You can even download the file you just edited by clicking the ‘Download File’ button.
If you want to download the plugin with all the changes that you have made, then you can click the ‘Download Plugin’ button instead.
Configuring Access Control With the Theme Editor Plugin
The Theme Editor plugin even lets you control access to your theme and plugin editors in WordPress. However, this feature is only available in the pro version of the plugin.
This way, only users whom you approve will be able to edit the themes and plugins on your website.
By using access control, you make your website more secure and only allow trustworthy users to make changes to your files, reducing the risk of malware.
First, you need to visit the Theme Editor » Access Control page from the WordPress dashboard.
From here, you just need to check the options in the columns that you want the WordPress user roles to have access to.
For example, if you want the editor to have the ability to update theme files, then you need to check that box in the ‘Editor’ row.
Once you are done, simply click the ‘Save Changes’ button to store your settings.
Creating a Child Theme With the Theme Editor
If you want to create a child theme to customize your WordPress themes, then you can visit the Theme Editor » Child Theme page from the WordPress admin sidebar.
Once you are there, you will first need to choose a parent theme from the dropdown menu in the middle and then click the ‘Analyze’ button.
Once that’s done, provide a name for your new theme directory and select where to save your child theme stylesheet.
After that, you can even provide a name, description, author, and version for the child theme that you are creating.
Once you are done, just click the ‘Create New Child Theme’ button.
Now that you have done that, you can edit the selector, web fonts, custom CSS, child style, and theme files from the menu bar at the top of the page.
The changes that you make will automatically be saved in your child theme.
Bonus: Use WPCode to Add Custom Code to Your Website
Adding code to your website using plugins or theme file editors is always a bit risky because the smallest WordPress error can break your website and make it inaccessible.
That is why we recommend using WPCode to add custom code to your website. It is the best WordPress code snippets plugin on the market.
First, you need to install and activate the WPCode plugin. For detailed instructions, you can see our tutorial on how to install a WordPress plugin.
Note: WPCode also has a free plan that you can use to add code to your website. However, upgrading to the premium plan will give you access to the cloud snippet library, conditional logic, CSS Snippet option, and more.
Upon activation, head over to the Code Snippets » + Add Snippet page from the WordPress admin sidebar.
From here, you can use the WPCode snippet library to add pre-made code snippets to your WordPress site.
However, if you want to add custom code, then you can also do that by clicking the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will open the ‘Create Custom Snippet’ page, where you can start by adding a title for your code snippet.
After that, select a code type from the dropdown menu in the right corner of the screen. For example, to add HTML code, just select the ‘HTML Snippet’ option.
Next, simply add your custom code to the ‘Code Preview’ box.
Once you have done that, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.
Your custom code will be automatically executed on your site upon activation.
Finally, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active’.
After that, click the ‘Save Snippet’ button to save and execute the custom code on your website.
For more details, you can see our step-by-step guide on how to add custom code in WordPress.
We hope this article helped you learn how to easily replace the default theme and plugin editor in WordPress. You may also want to see our beginner’s guide on how to safely update WordPress and our tutorial on how to change block height and width in WordPress.
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.
Kzain
this is very helpful, I always recommend backing up your site before using the editor, as any mistakes can be difficult to revert. My hosting has FTP access, which will be easy
Jiří Vaněk
Thanks for the tips. I’ve left editors enabled on some websites, but for most of them, I have this option disabled for security reasons. It comes in handy where it’s allowed when a person needs to edit code (usually on a website where FTP access isn’t available). For hosting without FTP access, this makes perfect sense.
WPBeginner Support
You’re welcome, glad we could recommend a helpful solution
Admin
Chanakya Sahu
Awesome. And you actually gave us two bonuses, Creating a child theme guide over here is the bonus as well.
WPBeginner Support
Glad you found our content helpful and happy to hear you found extra value for creating a child theme
Admin
Sai Varun KN
Does using WP Editor effect the backend performance?
WPBeginner Support
Yes, on the client side your browser will not be as responsive as it should be. However, it does not affect your site’s performance for other users.
Admin
Bryan Petty
CodeMirror editor is nice, and the WP Editor plugin is helpful, but I thought I’d just add that if anyone is looking for something based on the Ajax.org Cloud Editor instead, or just wants a plugin that does this for the plugin/theme editors only and doesn’t clutter the admin with more option pages, then definitely check out Better File Editor instead:
http://wordpress.org/plugins/better-file-editor/
Ayush Agrawal
Definitely the post I was looking for. Thanks.