How to Edit Your WordPress Plugin’s Code

Now that you’ve set up your WordPress site locally on your laptop so that you can easily code your plugin on the go, it’s time to add the features you want and start coding.

The code used by WordPress is English (mostly), sprinkled with a bit of math. While it might seem hard to understand right now, don’t worry about it too much. I was confused myself when I started coding. What really helped me though was just diving into the code and changing it, testing what worked and reversing the changes and trying again if it didn’t.

Edit Your Plugin Using WordPress’ Code Editor

The smart folks over at WordPress knew that site owner will want to mess around with their own site’s code. Rather than make it hard for them by forcing people to download, edit, then upload files, they just made editing possible right from the site’s admin area.

Here’s how to access that editor:

1. Go to the admin area of your site and click Plugins, then click Editor. 
2. Next to “Select plugin to edit:” at the top, choose the plugin you uploaded earlier then click the Select button.
3. At the right, you will see the folders and files included in the plugin, arranged in a file browser like the one on your laptop.
4. Inside the admin folder is a file starting with class-. If you followed along with my previous post, you’ll see that this is the same file you edited as before.
5. Once you’re done editing, just click on Update File to save your changes.

NOTE: If you’re using InstantWP and getting an error saving your code, add the WP Editor plugin by Benjamin Rojas to fix that issue.

Edit Code Using Coditor

There’s also a great plugin called Coditor which adds a real code editor into the admin area of your WordPress site. If you’ve seen cyberpunk-like dark coding screens in the movies, this makes your code look just like that.

To try it out:

1. Search for Coditor it in the WordPress directory by going to Plugins > Add New.
2. After installing and activating the plugin, you’ll see a new Coditor option at the left admin menu. Click on it.
3. At the left panel, choose Theme to edit your theme or Plugin to edit your plugins.
4. It works just like Windows Explorer or macOS Finder, with the files and folders at the left and the actual file at the right. Simply navigate to the file you want to edit and click it.
5. At the upper right are buttons for saving your file, undoing and redoing, and searching the text.
6. You’ll also notice that it highlights the syntax of the code, very useful to figure out what part of the code you’re editing.

———

While there are other ways of editing your plugin, including the roundabout way of downloading, editing and uploading the files, I’ll leave with these two simple tools so that you can start writing code right away. I’m sure you’ll be able to make simple changes from here on.

If you need something more complex or want to customize a plugin to suit your website, let me know. I’d be more than glad to help.