How to Edit WordPress Source Code (HTML, JavaScript, PHP, and CSS)

If you want to Edit WordPress source code, it makes sense to use the best practices. Ultimately, there are up to three ways to edit your WordPress source code. 1. By using the theme’s default editing abilities, 2. Using your host’s FTP client or 3. Using a third-party FTP client.

You should always make sure you backup your website. Some of the most common reasons you may want to edit your source code could be:

• To Customize your theme beyond the developer’s provision.
• To edit important files for specialized use

In this post, we’re going to look at how to edit CSS, HTML, JavaScript and PHP files. Using the inbuilt theme abilities and external FTP clients. Let’s dive right in.

How to edit HTML in WordPress

If you have decided to edit your WordPress source code, it’s best to do it right. Before any changes, please note that this can be harmful, so be careful to back up your files before editing.

Ways to backup the website before editing your source code.

• Using plugins.
  • Using a Free plugin
  • Using a Paid plugin
• Using your host

Using a plugin to backup your website

There are tons of backup plugins out there. I’m not going to get into them because that’s not the purpose of this article.

Instead, we’re going to take a look at one free and one premium plugin.

Using a Free plugin – Updraft plus.

Step 1. Navigate your dashboard to plugins>add new

Step 2. Search for updraft plus, but if you type in “updraft” you should be fine.

Step 3. Install and activate.

Backing up your website is pretty straight forward from there. The plugin should walk you through the entire process.

After you’ve done the backup, you can always upload to a cloud hosting service like Mega.zn for extra protection. You know, just in case something happens.

Using a paid plugin – BackupBuddy

Installing this is somewhat different. You have to download the plugin zip folder.

Then, navigate to plugins>add new and Upload. Activating and using this plugin should be straightforward.

Using your host

We recommend SiteGround if you want to get the best hosting support for shared hosting.

They offer daily backups so you won’t have to worry about your site going down, and you can also backup your files manually.

So, now that we have exercised caution. Let’s start getting our hands dirty.

How to add HTML code to a WordPress page or post

HTML is the easiest code that you can edit on your website. Don’t take it for granted though it’s the backbone of your webpages. If you want to learn HTML click here

Most times this is safe and you don’t need to edit directly into the source code.

If you are using classic the text editor.

On the page or post, simply navigate over to the “text” tab. There, you will see the structure of the page in HTML. Put whatever you want there and preview the changes.

If you are using the Gutenberg editor. There are two ways.

First, you can edit the entire document as HTML as shown above. You simply click the three vertical dots at the WordPress toolbar of your page or post. Then, select code editor, it can also be selected by using the shortcut Ctrl+Shift+Alt+M

Second by using individual blocks.

• Select the block you want to edit as HTML
• Click on the three vertical dots above the selected block.
• Choose “Edit as HTML”

This allows you to edit the single block as HTML while the entire document stays in the visual editor. Cool right?

Edit WordPress Source Code

Now it’s time to take it a step further. We’ll explore two ways in which you can make even further advanced edits to your website’s source code.

1. Using the theme editor.

The theme editor allows you to edit:

• Theme Functions
• CSS files
• Comments
• Header and Footer
• Pretty much all the essential settings of the entire site

Some of the changes you make here may be overwritten when the theme updates, so be aware of that.

2. Using FTP

Most hosts have built-in FTP clients so you can use those. All you have to do is to navigate to their dashboard and choose their FTP client. Usually, this is very easy but if you can’t find it, I am sure you can find it in your host’s forum.

You can also use a third-party FTP client. This is not as straightforward as it seems, so you have to follow a few steps.

Step 1. Create the FTP account with your host

• Login to your cPanel
• Navigate to FTP accounts
• Create your username and other credentials
• Be sure to set the Quota to unlimited.
• After that then you select “Create FTP Account” and that’s it.

Step 2. Download the FTP client of your choice. The most popular one is FileZilla, but you can use anyone you choose.

Step 3. Add your credentials and log in.

Step 4. Download the files you want to edit (always make a duplicate on your computer)

Step 5. Upload the files. Ensure that it is the same name for the one you want to edit. You will overwrite the one on your website. But no worries, you already saved a copy of it. Right?

Editing JavaScript in WordPress

Often times you want to add Javascript to your website because of a third party plugin such as Google analytics. Their code has to be embedded on every page of your website to provide accurate statistics.

Before you get worried about adding it to all pages there’s a much easier way to do it, just place it in the header or footer.

But if you add the code to your header.php or footer.php files, they will be overwritten when you update your theme. So our recommendation is to always use a plugin or use your theme editor to add code to your functions.php file.

Adding JavaScript in header or footer using a plugin.

The plugin that we will use is called Insert Headers and Footers.

Insert Headers and Footers

Step 1. Download “Insert headers and footers.”

Step 2. Activate and navigate to settings》insert headers and footers

Step 3. Add your scripts to the header or footer boxes and click save.

This will load javascript on every page of your website. For the next method, we’ll look at how to add javascript to your functions.php page using your theme editor.

Adding JavaScript in header or footer using functions.php.

This is a really simple process. Navigate to theme editor》functions.php and add the following code:

function wpb_hook_javascript() {
    ?>
        <script>
          // add your javscript code here
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

This will add your code to the header. For the footer you just have to modify the code a little bit and add:

function wpb_hook_javascript() {
    ?>
        <script>
          // add your javscript code here
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript');

And that takes care of both header and footer. If you want to add Javascript to a specific page or post in WordPress the process is a little different. Let’s take a look

Adding JavaScript to a specific post or page

You can also add javascript to posts and pages manually or you can use a plugin. If you’re doing it manually then add the following code to your functions.php file.

function wpb_hook_javascript() {
  if (is_single ('add name here')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

This adds JavaScript to a specific post’s header. The difference is the conditional logic (if (is_single) ), and the specific ID (add name here).

To add javascript to a page you just have to modify the code a little bit. Instead of is_single you’ll use is_page. Here’s an example

function wpb_hook_javascript() {
  if (is_page ('page name')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

And that’s how you add Javascript to a page or post’s header. For the footer variation, you replace 'wp_head' with 'wp_footer'.

Using a plugin

For this method, we’ll use the Code Embed plugin.

Code Embed

Step 1. Download, install and activate Code Embed.

Step 2. Navigate to the post or page and enable custom fields in the screen options.

Step 3. At the bottom of the post or page, you’ll find the custom fields meta box, select ‘Enter New’

Step 4. Add the name and value (the javascript code)

Step 5. Using the name you added above, embed the code anywhere in your post or page. You can learn more here

Editing PHP in WordPress

PHP in WordPress is used for coding themes, settings and coding plugins. PHP works in tandem with HTML, however, it is more dynamic in nature.

PHP	HTML
Server Side language	Client-Side language for Front end development
Creates Dynamic and static web pages	Creates static web pages
Not as easy to learn as HTML but not very difficult	Very easy to learn

If you want to customize a plugin or your theme on a deeper level, then you will have to edit php at some point. By the way, did you know that you can easily create your own theme and plugin? Yes, but that’s for another article.

For now, let’s focus on how you edit plugins and themes.

Editing plugins in WordPress

There are two ways for editing plugins in WordPress.

1. Using the plugin editor
2. Using an FTP

Both have their advantages. For example. Using the plugin editor is quick, but if you mess up and can’t access your website then using FTP can save you.

So let’s look at both ways.

Using the plugin editor

Step 1. Navigate to plugins》editor

Step 2. Select the plugin you want to edit in the right-hand corner.

Step 3. Select the files you want to edit and continue doing so.

Step 4. At this point, I hope you know what you are doing. Save changes and exit.

This is not as bad as editing your theme because if you mess up, the plugin will deactivate and show you the error. One final thing to note is that all your changes will be reverted once you update the plugin.

It’s always better to contact the developer if you absolutely need to edit the plugin core files, or just make your own.

Using a third party or host’s FTP

After following the instructions above about installing and setting up FTP.

Step 1. Navigate to your plugins.

Step 2. Download plugin file, edit and then upload them.

If the white screen of death appears on the website, you will still be able to access your admin dashboard. You can also use the FTP to undo the changes made.

Editing a theme’s PHP code.

Once you log in via FTP using the method above, you will see PHP, JavaScript and CSS files. To edit, you simply download, (save a copy) make changes and upload.

Remember, you can always use your host’s FTP system if you want to. You will still get the same results.

Your functions.php file

Now, your functions.php file will also be seen when you log in by FTP. If you want to edit it, make sure you know what you are doing.

Remember this file controls how your theme acts and includes abilities like defining upload limit, enabling post thumbnails, etc.

You can also edit your functions.php file in your WordPress dashboard.

Go to Appearance>Theme editor>Functions.php

In here you can edit all kinds of files, as you will see in the following set of instructions. So let’s look into the final type of source code we’re going to edit, CSS.

How to add CSS to WordPress pages.

By now you should understand how to edit CSS files using an FTP client. But, to give you more options, there are two more ways I want to look at

1. Using WordPress theme editor

Navigate to appearance》theme editor

Find the file you want to edit. It will have .css as the extension.

Go ahead and make the changes you want to, then click update once you’re done. Simple!

2. Using your theme’s native editor

Every WordPress theme comes with its own ability to edit themes without third party applications. All you have to do is to navigate to appearance》customise

Scroll to the bottom of the menus and select additional CSS. Add your CSS code and then click update when finished.

3. Using Gutenberg Editor

The final way to add CSS to a post or page using the Gutenberg editor is simple.

When you select a block, open up the settings and browse to advanced. You have the option now of adding CSS Classes to the specific block.

Of course, you can also use inline CSS styles by using the code editor.

Once you convert the desired block to HTML , then you can add your custom CSS in the code.

Final Thoughts

The main things to remember are to:

1. Always backup your website
2. Make sure you know what you are doing
3. Use an FTP if you cannot access your site through the admin panel
4. Remember that some changes made to your themes will be overwritten when the theme updates. So use a plugin in this case.
5. Have fun

Our team at SitePact handles WordPress source code edits for web development and website maintenance.