How to Edit HTML in WordPress?

WordPress is a great platform if you do not want to develop your websites using any coding language. But, you might need to edit something with HTML at some point of time in WordPress. This is where we come to tackle this situation.

Most of the elements from pages and posts use HTML on a WordPress website. If you know HTML and how to edit HTML in WordPress, you can do most of the things without any additional plugin.

Methods to Edit the Source Code in WordPress

You must have seen that WordPress uses various languages combined to make a great platform. There are different languages like HTML, CSS, PHP, and Javascript used to make your Website functional and stylish.

Method 1: Using WordPress Editor

In the classic editor, you had to just click on the “Text” button beside the “Visual” button on the Top-Right Corner of your editor. There were two options as mentioned earlier. Either you could edit your post using Visual Editor or go for the Text format.

The text format would show you everything that is coded at the backend of your content. You can simply edit the HTML using the Text format on the top right corner of your Classic Editor.

However, this is not the case with Guttenberg Editor. In the newly designed Block Editor, you have to edit the HTML either from the blocks separately or go deep down in the settings.

If you just want to edit the HTML of a single block, you can simply click on the three dots of the block.
When you click on the three dots of the particular block, you see options for the same block only.
Here, you need to click on the Edit HTML button from the options. This will only allow you to edit the HTML of the particular block.

If you want to edit the HTML code of the entire content on the editor:

You need to click on the three dots on the top right corner.
Here, you will see the option to use HTML Editor along with the Visual Editor.
Just click on HTML editor and you will see the page transforming to HTML version for your content.
You can add whatever code you wanted to add in the code.

Method 2: Using Widgets

You can even add custom HTML code to your home page. Suppose, you would like to add a custom code that you have tested locally in HTML, this is the method to follow

As the WordPress editor is not available at every space of your WordPress website, widgets come in the action there. All you have to do is Customize the page where you want to add HTML code:

First click on Appearance.
Then you need to click on Widgets.
You can simply add HTML on your homepage by clicking on the customize button on the top of your Homepage.
Now once you are on the Widgets section, you need to add a new widget. Make sure you are adding the widget to the right place where you want to add the HTML code.

Now, add the widget named as Custom HTML. This will add a new widget to the place which you chose. Once you click on editing the widget, you will see a small text editor block.
In the Custom HTML widget, you will see the interface like the Classic Editor only.
All you have to do is click on the “Text” button from the toggle between Visual and Text. Once you have clicked on Text, it will show you the editor for HTML code.
Save the changes by clicking on the Publish button.

You can add the Custom HTML widget to anywhere your theme supports the widgets. Like, most of the themes nowadays support widgets on the sidebar, footer, etc. This gives you an easiest way to add HTML through the Widgets on your WordPress website.

How you can edit PHP/CSS in your WordPress website

As mentioned earlier, you can even edit PHP and CSS of your WordPress website. These are some of the most important languages which are used while making themes & plugins. You can even edit the source codes of your PHP and CSS files in a WordPress website..

Method 1: Using WordPress Code Editor

You can use the WordPress Code Editor which is available directly from your WordPress dashboard. This method will only work if your website is up and running & you have the admin access to the WordPress dashboard.

WordPress provides the functionality to edit PHP & CSS files of any theme directly from the dashboard. If you have made the child-theme of your website, you can proceed further with the method.

Click on the Appearance button from the sidebar.
Select Editor from the options you see on the menu.
Now, select the file which you would like to edit from the sidebar.
There are different PHP & CSS files shown on the sidebar like footer.php, style.css, etc.
After selecting the file, a dialogue box might appear. You will see the code editor for your PHP/CSS file.
For example, you want to make changes to your header.php file, simply click on header.php file and it will show the code.
Just make the changes in the file and click on the Update File button.

But if you don’t have access to your WordPress dashboard, move towards the next method.

Method 2: Using FTP Clients

You can edit the files from FTP clients such as Filezilla, etc. Even if you have access to the cPanel of your hosting plan, it would do the job. Just visit the file manager from cPanel and continue the steps for locating files from FTP clients.

You will need to have access to the FTP credentials of your WordPress website. If you have all the details, enter them in any FTP client.
Once you log in to the FTP client for your website, you need to locate the file you would like to edit.
If you would like to edit the files from your Theme, Simply click on the public_html folder. Then click on wp-content.
Now, you will see the option for the theme folder, click on that.
Select the child theme that you had made. Here you will see all the files, edit any of the files that you would like.
Similarly, you can file from any of the folders directly from the FTP clients. You can follow the same method for doing it with the help of cPanel.
Make sure to save the changes to any file before terminating the connection.

That’s how you can edit the PHP/CSS files from your FTP clients or File Manager on your cPanel dashboard.

Let’s Conclude

That was all about how you could edit the source code from your WordPress website. We shared the easiest and the working method that you can use even if you are a beginner as well.

To conclude, here are the things that we did so far. Firstly, we learned why actually we need to edit the HTML on our WordPress website. Then, We learned to edit HTML in WordPress websites: