Editing the Source Code of Your WordPress Theme - Is it Necessary?
We all know that WordPress is currently the top choice for creating websites because of its usability, flexibility, and being one of the most friendly CMS that even a non-technical person can use. WordPress provides ready-made themes that you can select from to suit your business or personal needs. Just a tweak here and there in the design or color, add the content, and you are ready to go. How much more simple can it be!
This is true if you want a very simple website, usually an informative website for your business. But even then, sometimes, simple is not always the best and as mentioned before, we as humans have a tendency to tweak everything to our liking.
This tweaking requires, most of the time, editing the WordPress theme files or in our language ‘WordPress theme source code’. The tweaking we mentioned, refers to editing the source code for language files such as PHP, Javascript, or CSS. Each of these files is responsible for a certain element in the theme. For instance, the CSS file is responsible for the styling of the website i.e. how a certain box should look like.
Keeping the above narrative in mind, accessing these files i.e. PHP, CSS, Javascript is not as simple as it sounds. It is a bit of a technical process that you need to go through in order to reach those files. After that you can actually edit the CSS or edit the Javascript files (refer to our other blogs on the respective topics). We are reserving this blog to help you access and edit the source code of WordPress theme files.
Editing the Source Code in WordPress Theme
- WordPress Theme Editor – It enables you to edit WordPress source code files locally and upload your changes to your WordPress source code files right in your dashboard via a web browser.
- Through FTP (File Transfer Protocol) – It helps you edit WordPress source code files locally and then you can upload those changes to the hosting environment of WordPress.
Critical Information
Before reading on and following the guidelines mentioned to access the source via any of the two methods mentioned above, it is highly critical that you:
- Backup your website holistically and make sure that you already have an updated version of your content and setting to keep your website in a working state in order to avoid any loss if something valuable goes missing while editing your source code.
- Create a child theme when you’re modifying your WordPress theme. Because, it is most likely that when you will update your theme, all of these changes would be overwritten.
Now, that’s done, lets get editing. The first method we will start with it is the theme editor.
1. How to Edit Your WordPress Source Code via the Theme Editor
For instance, if you can’t edit WordPress code independently, then this CMS (WordPress) offers you a built-in editor to modify files of your themes online. This theme editor helps you access the PHP, CSS, and JavaScript and other files that build the actual theme.
Just follow these simple steps with pictures to guide you through.
a. Accessing the Theme Editor
b. Editing the Source Code files
Once you click on the ‘Theme Editor’ option, a new window will open (see image below). Now, you’re ready to make changes to the design & structure of your theme in a way you want. Just select any of the files from the list on the right hand side and you are ready to tweak. The basic files that you will see on your right hand side will include:
functions.php: a function file of your theme comprising a PHP code for modification of WordPress default features.
Style.css: It is a stylesheet containing design related features i.e., fonts and color schemes of your theme.
c. Switching between themes
d. Saving the Work
What can you do If the ‘Theme Editor’ is not there?
Let’s say, you try to find a theme editor under appearance as you will need to in order for the first method to work, but to your dismay, it is not visible there. This means that your theme is functioning differently which is why you are not able to see to it. You can use either of the two methods below to check it.
a. First, check whether or not your WordPress website is running on any special code editor which can be placed in another part of the dashboard. ‘is your website running a specified WordPress code editor for a theme which is present elsewhere in your dashboard’.
b. Second, your theme editor could be disabled in your website. This can happen due to security plugins that hide this option to safeguard ‘WordPress’ and make it difficult for hackers to harm your website.
Other than the two above solutions, there could be numerous other reasons why your WordPress theme editor has gone missing to which numerous methods can be used to resolve it. It is our recommendation that you look for solutions in your WordPress community or contact a WordPress Maintenance Company to assist you in the matter.
Moving on to the second method of editing the source code in WordPress theme.
2. How can you Edit a WordPress Source Code through FTP?
In the above part, we discussed in detail about accessing and changing your Website’s source code through the use of WordPress Theme Editor. Now, we are going to use an FTP client such as FileZilla to edit the source code of WordPress theme. These tools are helpful for getting connected to a website’s server to access stored files.
In this approach, you will have to change the files locally, and then re-upload all the modified files to your WordPress hosting environment. This method works as a key to unlocking the doors to the backend of your website which if you do not know how to use, can lead to serious consequences for your website.
There are the four steps that you’ll have to follow to get started with FTP:
a. Create your FTP Credentials
To connect to your server through FTP, you need to have FTP credentials – a) username, b) password, and c) hostname. You can find them easily in your hosting account.
If you don’t find your credentials, don’t worry, as you can easily create a username and password in cPanel (Files > FTP Accounts)
Click on the icon straightaway, and choose Add FTP Account
When you’ve landed on the ‘Add FTP Account page’, complete the following:
- Add a unique identifier for your FTP username. Your FTP username will be jamesraymond@raymonddiaries.com – It’s a pseudonym; and copy-&-paste it to a secure location.
- Make a strong password. It’s an inevitable for surefire protection of your credentials. Plus, copy and paste it to a safe location for a future use.
- Always use public_htmal for the directory extension.
- And, keep your ‘Quota’ unlimited.
Once you’ve done everything mentioned above (adding a unique identifier, making a strong password, and using public_html, etc), now click on Create FTP Account and your account is created.
Well done!!.
Important Note: If you can’t find a support document, it will be better for you to reach out to your hosting provider directly for tech support.
b. Install and Download An FTP Client
After you’ve put your FTP login credentials (username, password etc.) in order, the next step will be to download the FTP client. We are using FileZilla as a FTP client as it is the most used software around the globe.
c. Use FileZilla to Log into Your Web Hosting Environment
When you’ve successfully downloaded FileZilla, open it right away and enter your FTP username, hostname, password the one you created or had in step 1.
If you see cPanel has listed an IP address, use that as the host and when you’ve entered your credentials, don’t forget to click on the ‘Quickconnect’ button:
Now, It must connect you to a server within a few seconds.
d. View - and - Edit your Source Files
You can view and edit source files of HTML, CSS, PHP, and JavaScript. Just right-click on a file and you’re prepared to go:
Once, you’ve modified your WordPress website, save the file and now FileZilla will come into action to re-upload files and replace the old version.
There it’s all done! Now to answer the question that we have been asked a lot in this context.
Is it Possible to Edit WordPress Theme without Coding?
Yes. It is possible. How come?
WordPress is a flexible and powerful open-source platform which means there is a solution to everything. In order to give the users of WordPress a feel of editing, WordPress Customizer was introduced as a way to make small tweaks in the website. Though, you will have to bear some limitations as compared to custom code, still, you can do better with the WordPress Customizer.
You will have to access your WordPress dashboard and then go to Appearance > Customize:
You’ll see a drop-down with methods to help you customize your WordPress theme. You can start off by modifying your website’s color schemes, homepage. Or, you can work with site identity i.e., updating the website’s name, icons or tagline.
If you want to do more editing, it is possible that available options in WordPress Customizer will not be enough, therefore the use of plugins for quick editing of your WordPress website code will come in handy.
Read on to know our recommended list of plugins you can use for the purpose.
Which is the Best Plugin to Edit your WordPress Theme without any Coding?
The three best plugins to edit your WordPress theme without any coding are:
- Microthemer
- Ultimate Tweaker
- Yellow Pencil
A little about each is given below:
1. Microthemer
Microthemer is a live CSS editor for WordPress websites. Equipped with point & click functionality and design responsive grids, this plugin enables you to customize your site with precision. This plugin comes handy with page builder i.e., Elementor as it comes with built-in integration.
2. Ultimate Tracker
It is a premium plugin packed with HTML minifier tools, custom icons, drag-and-drop interface, etc to give you better features and functionality.
3. Yellow Pencil
This WordPress CSS style editor can help you customize the overall design of your website real quick. You can make changes from a single page to theme without coding. It lets you preview changes in real-time. This tool is available in both free and premium.
And, We’re Done!
You should pat yourself on the back if you have made it to the end of the article without getting a headache. It sure was a tough article but a necessary one if you have set your mind on editing your WordPress website’s source code. At any point, you think this information is too much for you or you are not sure whether you can do the editing yourself, asking a professional will always be beneficial.
So, just reach out to us at WP-Bridge and we will try our best to provide you with the best of the service possible.