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
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
- 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?
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.
The plugin that we will use is called 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 is a really simple process. Navigate to theme editor》functions.php and add the following code:
This will add your code to the header. For the footer you just have to modify the code a little bit and add:
if (is_single) ), and the specific ID (
add name here).
is_single you’ll use
is_page. Here’s an example
Using a plugin
For this method, we’ll use the Code Embed plugin.
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 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.
|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.
- Using the plugin editor
- 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.
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.
The main things to remember are to:
- Always backup your website
- Make sure you know what you are doing
- Use an FTP if you cannot access your site through the admin panel
- Remember that some changes made to your themes will be overwritten when the theme updates. So use a plugin in this case.
- Have fun
Our team at SitePact handles WordPress source code edits for web development and website maintenance.