Editing the Source Code of WordPress – Step by Step Instructions

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

So, if you want to edit the default template in WordPress, there are two critical ways to access theme files:
  1. 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.
  2. 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:

  1. 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.
  2. 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

If your WordPress site is still working and running, you can access it via back-end. Go to Appearance > Theme Editor to find the source code of your website.

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

Sometimes, your theme contains a combination of adult/child theme or multiple themes. If you require that you need to change a file in a certain theme, then you can opt to switch themes. (See the image below)
If want to select a specific theme to edit, do it by going to the right-hand side of the editor:

d. Saving the Work

When you’ve edited your WordPress source code in the Theme editor, don’t forget to save changes by clicking on the Update File button. WordPress will not let you save changes, if there will be errors in the code. And, this is why it is safer to use a theme editor as compared to editing your WordPress website code through FTP which we will discuss next. But first, a little note on what to do when you do not find the ‘theme editor’ in your website/ or WordPress theme.

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.

This is a free FTP solution that enables you to transfer files back and forth between your computer and your site’s server. However, there are other FTP clients, so feel free to use the one that best fits your needs such as the ones mentioned below:
  1. Cyberduck (Windows and Mac)
  2. ForkLift
  3. WinSCP (Mac)

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:

  1. Microthemer
  2. Ultimate Tweaker
  3. 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.