In our previous article, we showed you two feature-rich tools that excel in editing WordPress HTML for individual pages and posts. Now, let’s jump to the next section of editing HTML, which involves the WordPress source code.
Since interfering with the source code might put your site at risk, please only opt for this method if you’re confident of your code knowledge.
You are? Then let’s get started!
Why You Should Know How to Edit HTML Source Code
WordPress aims to help users avoid touching a line of code as much as possible. Needless to say, it’s a friendly and easy-to-use platform that provides many built-in functions and plugins to help users fulfill most of their needs.
For example, when it comes to customizing your WordPress site, there are many plugins and themes available out there to help you get things done. By having them installed and activated, you can spruce up or fully customize your site without hassle. In other words, for basic needs, WordPress allows you to do everything without interfering with your site’s source code.
However, there comes a time when you’d like to have more control over your site, i.e., perform advanced customization. Even in the worst scenario, your site crashes or suffers from error that prevents you from accessing your admin dashboard.
In these circumstances, editing WordPress HTML source code could be the ticket. As such, it will give you a hand in troubleshooting the issues.
This post will show you a full guide to editing HTML source code in WordPress. Accordingly, you can choose the most suitable solution based on your specific needs.
- Edit HTML Source Code Using WordPress Theme Editor
- Edit HTML Source Code Using FTP (File Transfer Protocol)
- Edit HTML Source Code Using cPanel
Edit HTML Source Code Using WordPress Theme Editor
Using WordPress Theme Editor in your dashboard is a straightforward method. It means you don’t have to use any third-party plugin or platform to edit your HTML source code.
Simply follow the steps below.
Step 1: Navigate to Appearance > Theme Editor.
Step 2: A warning message appears to confirm your understanding of editing HTML before getting started. Click I understand to get the ball rolling.
Step 3: Select a theme to edit in the drop-down menu at the right-hand corner. Let’s say we intend to edit the Storefront theme.
Step 4: A new screen displays. In the list from the right, select a specific theme file that you intend to edit.
Please note the files display depending on your theme. That said, there are common points in all themes. For example:
- Index.php
- Header.php
- Footer.php
- Style.css
- Function.php
Step 4: Make changes to HTML. Please remember to proceed with caution since even a wrong comma or dot possibly breaks your site.
Step 5: Press Update File to save your changes.
It’s worth noting that WordPress will prevent you from saving your edited HTML if there are errors detected. In this case, recheck your HTML and save it again.
For this reason, this method is considered safer than the other 2 methods, which will be presented below.
Edit HTML Source Code Using FTP
FTP stands for File Transfer Protocol. If you’re a techie, editing WordPress HTML source code with an FTP client won’t be rocket science to you. In this article, we’ll go with FileZilla, which is considered the most secure and user-friendly FTP client among several ones.
Now, let’s get started!
Step 1: Download FileZilla and install it to your local.
Step 2: Once done, let’s open FileZilla.
It’ll require you to enter your FTP credentials such as a username, password, and hostname, which can be easily found in your hosting account.
Press QuickConnect to connect with your server.
Step 3: You should then see a listing of your website’s files in the right-hand panel.
Open public_html folder. It’s where your files and folders reside.
Step 4: In the Public_html folder, seek the wp-content folder which houses all installed themes of your site. You should scroll down to see it.
Step 5: Inside the wp-content folder, choose themes.
Here, download and edit themes that you intend to customize.
For example, as you can see in the screenshot below, we have a theme called twentytwentyone.
Step 6: Open the theme folder and you’ll see a list of HTML files. To edit one, right-click on it and select the View/Edit option.
Accordingly, the file will be downloaded to your local.
Step 7: Edit your theme files with your own snippet code.
Step 8: Upload the file back to the same folder. Correspondingly, the new file will overwrite the old ones.
That’s it! You can go back to your public site and check the result.
Edit HTML Source Code Using cPanel
Another trust-worthy method to modify WordPress HTML source code is using cPanel.
Using cPanel, you can manage your WordPress websites, email accounts, domain names, database connection, etc. without any sort of technical knowledge.
Now, let’s explore how you can edit your WordPress HTML source with cPanel.
Step 1: Log into your web hosting account to access cPanel.
Step 2: Go to File Manager and search for the public_html folder.
Step 3: In the wp-content folder, you should be able to find the themes folder.
Step 4: In the themes folder, select the current theme and edit it.
This will open the file in a text editor where you can customize it. After making the changes, don’t forget to save the file.
Caution When Editing WordPress HTML Source Code
As stated, any changes in your WordPress source might put your site at risk. Therefore, please be careful and take our advice into serious consideration before starting things off.
Back Up Your Data
This ensures you have an updated datalog to upload back to your backend in case everything gets messed up when you edit HTML source code.
Make sure that you store your backup files in a safe place so that unauthorized ones cannot access and steal your valuable data.
Create a Child Theme
If you plan to directly edit any of the code in your theme files, you should use the child theme rather than directly editing the parent one. Otherwise, you’ll lose the changes once you update the parent theme.
Are You Ready to Edit Your WordPress HTML Source Code?
With our two articles, you’ve armed yourself with solid knowledge about editing HTML on your WordPress page, including individual pages, posts, and source code.
While editing HTML in pages or posts doesn’t require you a lot of effort, editing in source code appears to be a struggle to any tech novices.
In case you aren’t confident of your code knowledge, please find another solution or seek for alternatives. If that’s the case, don’t hesitate to let us know. We’re more than happy to help you out!
