You can override a WordPress plugin file by adding the same file to your theme, at a similar file path, you can override a WordPress plugin file. You will need to know how to add and edit files in your theme or child them. In this article I will show you how you can do this.
Table of Contents
- Find the original file you want to override
- Copy it to a specific location inside of your theme
- Make your specific changes to this file
- View changes and review
- Learn WordPress customization throughly with an online course at Udemy
WordPress and its plugins have been made in order to let you override them in certain circumstances.
NOTE: This ability is essential because when we are customizing WordPress if we had to update the core plugin files themselves then we would have to override and re-implement our changes each time. Given WordPress and its plugin often auto update this just wouldn’t work.
So, let’s go about overriding a file in a plugin. This will work for any file in any plugin so it’s quite flexible. It does require you to code and create files in the file system of your WordPress site.
NOTE: If you are overriding a WooCommerce plugin then read this other article I wrote which is specific to WooCommerce. The general idea given in this article also applies to WooCommerce as it is also a plugin within WordPress but just in case you want a more specific tutorial to follow you can follow that one.
Find the original file you want to override
The original file you want to override will be in the specific plugin code you are overriding. WordPress stores these in a specific location but it dependent on your specific plugin.
Your plugin code will generically be at something like https://yoursite.com/wp-content/plugins/yourPluginCode where you can replace the ”yourPluginCode‘ with the name of your specific plugin folder.
Within this plugin folder you will find the file with which you will want to override but it may not be obvious which file exactly you need to select and copy as is shown in the rest of this tutorial. I’ll show you some tips to try find this more easily.
Overriding a file which produces HTML:
If there is some front end output (HTML or perhaps Javascript) that you are trying to override and you don’t know which file it is coming from you can try two things to narrow down the options and find the original file int eh plugin.
Step 1:
On the front end of the site find the HTML or JS you are trying to override. You can do this by right clicking on the the page in question and (in Chrome browser) and selecting ‘inspect element‘. If you are using Safari then look for the top menu item called ‘Develop’ and find the ‘Show Web Inspector‘ option.
In both Chrome and Safari this will open up a window which allows you to inspect the HTML on the page. In this new window find the HTML you want to change and try to find a unique element, id or class name with which you can search in the next step.
Step 2:
Take this unique element, id or class and search for that string inside of the plugin code.
If you can’t search in your WordPress File System on the server you can download the plugin folder, all of it, and search for the string within your operating system or code editor program.
Once you have identified the specific file you can move on because the key to this section is just identifying the specific file with which we need to override and use in the next steps of this tutorial.
Overriding a file which doesn’t have HTML:
If you don’t know which file to copy and you don’t have any HTML to search you are probably left with just visually exploring the files within the plugin folder and slowly understanding where the code is.
In my experience when I am doing this it’s usually when I am overriding some PHP class or function. In that case I just search for some sort of classname or function name that has something that may be useful. This is a guess of what to search for. Or I literally look through all the files until I find something that looks right.
Once you have figured out which file to change based on this you can move onto the next steps.
Copy it to a specific location inside of your theme
Most of the hard work is done at this point. You have the file. Now you can re-create that file at a similar file path within your WordPress sites theme or child theme.
NOTE: It’s best practice to create a child theme in WordPress if you are adding new files to it and code changes. This is because WordPress themes often need to be (manually or automatically) updated from time to time to keep up security updates but also to get any new functionality.
Step 1:
Now, note the file path of the original file. It will have something like this as a file path… https://yoursite.com/wp-content/plugins/pluginFolder/folderOne/FolderTwo/myOriginalFile.php
Now, in your theme you need to recreate this file at something similar to this, https://yoursite.com/wp-content/themes/childTheme/folderOne/FolderTwo/myOriginalFile.php
Step 2:
Copy the original content of this file to this new file within your child theme and save it.
Make your specific changes to this file
You now have successfully over written the file but it is at this point it is the same as the original so no changes can be seen at this point. In order to see changes you can edit this file as per your needs.
View changes and review
Once your changes have ben made you can save this file and reload your page in order to see if your changes are as you like. Obviously keep making changes until you are happy.
Learn WordPress customization throughly with an online course at Udemy
If you are having difficulty understanding this tutorial and then I suggest you start from scratch with WordPress in general. The best way to learn is with a better all around general understanding of WordPress. Check out some of the courses on Udemy related to WordPress. They cover developer level courses and more non-dev CMS editor type tutorials as well.
