How to edit HTML in WordPress

How to edit HTML in WordPress - CodeFlist

WordPress provides you a platform from where you can use pre-built codes. You need to know how to edit HTML in WordPress to make different changes in a WordPress site. If you learn how to edit codes, you can troubleshoot different issues and make necessary changes according to the customization that you need.

In this article, we will talk about the possible methods to do it.

Why is it needed?

Most of the time, there is no need to edit any code while using WordPress. There is already an entire collection of themes and plugins that can be replaced or added as per your necessity. The appearance of the website can be changed with the selection of one of the themes. On the other hand, if you just need to add multiple features to the existing theme, you can add a plugin that offers the desired functionality.

In fact, the source code of WordPress is sufficient for many situations. However, there are situations when you need to do advanced customizations. In such a case you need to know how to edit HTML in WordPress.

Things to Remember

If you want to make changes in the existing WordPress theme, then always do it in the child theme. This prevents unexpected breakage of the site. If you want to test and try a few WordPress functions, you can always add them. Make sure you do it one by one to observe the expected changes.

You need to have Notepad++ or Text Wrangler for Windows and Mac respectively, in order to edit HTML code in WordPress. Usually, you must prefer Google Chrome browser and FTP Client like Filezilla for this process.

Time Allocation should be properly done so that tasks can be done within a specific time. You should always prefer a schedule while editing source code in WordPress so that you do not waste your time. In addition, you must know that the source code in WordPress consists of different programming languages like HTML, CSS, PHP, and Javascript.

How to edit HTML in WordPress

You can add text, images, videos in posts, or pages in WordPress. There is an editor present in WordPress from where you can use visual editor and text (HTML) editor. WordPress 5.4 contains the Gutenberg editor. In order to activate HTML editor, you need to click on the three-dot menu bottom located in the upper right-hand side either for editing each block or for editing the entire post or page.

In this way, you can use the Gutenberg editor to edit HTML in WordPress.

While in the case of Classic editor, the visual editor and HTML editor were located side by side. However, it can be done with both the Classic and Gutenberg editor.

Do you know that you can also edit HTML on the homepage?

At first, Go to Appearance > Widget  > Manage with Live Preview

This allows you to view edits done on the homepage in realtime.

If you want to edit PHP and CSS of your site, then you can do it either from the Appearance menu or by using an FTP Client. You can check Editor under Appearance.

You can check the list of different theme files that are installed on the site. Select the desired theme whose HTML is to be modified, then make necessary changes with the help of the editor and update the file. The changes are in real-time.

You can also use FTP Client like FileZilla to connect your WordPress server to make the necessary changes. Once you install it, you need the FTP login credentials of the site. If you do not have FTP details, you need to contact your hosting provider.

While connecting with FileZilla, you need information like site address, username, password, port. Once you get connected, you can access through all the files of the site that are stored in the webserver. You can use an editor or IDE to view/edit the files where the changes are to be made. In addition, the changes are automatically uploaded when you close the file. On the other hand, if you have downloaded the file to be changed, you can edit it and upload it manually as well.

Conclusion

Hopefully, now you learned how to edit HTML in WordPress. To gain complete control on the site, you need to implement this on your site when needed.

Additional Readings

  1. How to remove sidebar in WordPress
  2. How to hide page title in WordPress
  3. How to embed video in WordPress