So let’s first understand what is WordPress and HTML
What is wordpress?
WordPress is more customizable and which is better for e-commerce and better blogging as well and a very interesting feature of template selection and this requires to understand a bit about the website before using wordpress
It is not only built cleanly and well optimised but it has some free tools that you can make use to help optimise your site.
Features of wordpress
- Free and open source
- Thousands of themes to get in
- Most popular CMS
- Customizable
- Great blogging modules
- Mobile friendly
- SEO ready
- Updating your site is easy
- Convenient
- Great for e-commerce
What is html?
The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.
Editing Source Code in WordPress
As you might know, WordPress uses four different programming languages: HTML, CSS, PHP, and JavaScript.
Each language has its own code and serves different functionalities. For example, HTML handles the content structure and CSS manages the appearance. That being said, you might need to perform certain operations by using a specific set of code.
Now, let’s explore more on how to edit the WordPress source code.
Why Edit HTML Code in WordPress?
Even though WordPress is a ready-to-use CMS that requires no coding experience and offers thousands of themes and plugins to customize your site, learning to edit the HTML will give you a lot of flexibility.
By customizing HTML code, you will gain more control over your site and you will be able to perform advanced design customizations, add custom functionalities or effects to your theme. Additionally, you’ll be able to troubleshoot issues when you don’t have access to your admin dashboard.
Some of the main things you can do by customizing the HTML code are:
Include text, images, and videos
Add functionalities or features
Have more control over your WordPress site
Troubleshoot issues when you don’t have access to your WordPress admin dashboard
All in all, if you learn how to edit the HTML code in WordPress, you’ll have more options to customize your site and you’ll be able to take it to the next level.
When To Edit HTML Code
Consider why you want to edit HTML and what your motive is. Do you want to customize your site? Are there plugins that can take care of it for you? Do you want to test things out or just learn how to edit HTML? Here are the top reasons you should edit HTML on your site:
Add text, images, and videos using HTML but this can also be done from your dashboard.
Add functionality or features to your pages and posts using HTML. You can add customized lists, headings, jump tags, font styles, and more.
Customize or personalize your WordPress site.
You’ve lost access to wp-admin and need to edit code to fix it.
Can’t find a plugin that can do the task for you.
Exercise better control and flexibility on your site.
How to Edit HTML in WordPress
different ways to customize the HTML code in WordPress:
- WordPress Classic Editor
- WordPress Block Editor
- Edit the HTML source code
WordPress Classic Editor
Classic Editor is the popular content editor for WordPress. This plugin allows you to easily edit the HTML files on your site.
First, install and activate the Classic Editor plugin on your site. Then, open any post or page and you will see two modes: Visual and Text.
Visual shows what you see in the frontend. You’ll see the different heading sizes, images, bold text, and so on.
visual mode
When you use the Text editor, on the other hand, you see the HTML version of the post, so you can edit the HTML code from here.
How to edit HTML in WordPress – Text mode
The good thing is that you can switch to the Visual mode to see how your changes will look on the frontend without having to publish anything.
Once you add or customize the HTML code, simply update or publish the post and that’s it!.
WordPress HTML in Block Editor
When WordPress introduced the Gutenberg or Block Editor, it frustrated many of us users. It was a big change all of a sudden and many of the old features – the ones we were so used to – disappeared.
This method will work if you just want to insert a snippet of HTML code into a page or post on your WordPress site. For example, if you want to use HTML to add a jump tag, heading, and so on. Here, you’ll create a new block on your page and then insert the HTML code.
Step 1: Log into your WordPress dashboard and navigate to the page or post you want to modify.
Step 2: At the place where you want to insert the snippet of HTML, click on the + symbol to create a new block.
Step 3: Search for ‘Custom HTML’ and select it.
custom html block in gutenberg
Step 4: You’ll see an option to enter your code, like so:
Write HTML in Gutenberg block
Once done, you can preview it to see what it looks like. Save it as a draft or publish it to see the changes on your site.
Edit the HTML source code
This method enables you to edit HTML of your entire post.
Step 1: Log into your WordPress dashboard and navigate to the page or post you want to modify.
Step 2: On the top-right corner, select the three dots which gives you More Tools & Options.
Step 3: Select ‘Code Editor’ and you’ll see that your entire post is now converted to HTML.
Gutenberg Code Editor
If you have your own HTML page and want to insert it into your WordPress site, you can use the Code Editor to do so.
It’s that simple to edit HTML using the Gutenberg Editor. Now let’s show you how to use the Classic Editor.
Using cPanel or FTP
If you don’t have access to the Theme Editor or want an alternative method, you can use FTP or cPanel to access your themes files and make edits to them.
Using cPanel
The control panel or cPanel is an in-built feature in most web hosting providers. You should be able to find cPanel on the dashboard of your hosting account. It gives you access to your website’s files and folders.
Step 1: Login to your web hosting account and access cPanel.
Access your cPanel
Step 2: Go to File Manager and open a folder called public_html. This is where your website’s files and folders reside. If you have named your folder something else, select that folder.
Access the Public_HTML Folder
Step 3: Inside the wp-contents folder, you’ll find your Themes folder that houses all installed themes on your site.
wp content folder
Step 4: Select your current theme. Inside this folder, you’ll find all your files that you can edit and make custom coding changes.
Using FTP
FTP stands or File Transfer Protocol which is a third-party software that enables you to connect to your web server that houses your website’s files and folders.
Step 1: Download and install an FTP client like Filezilla on your computer.
Step 2: Open FileZilla and enter your FTP credentials that comprise a host name, username, password, and port number. Click on QuickConnect.
Step 3: Once you establish a connection, you’ll see folders populate on the right panel. This is your web server.
Step 4: Open the folder called public_html. This is where your website’s files and folders reside. If you have named your folder something else, select that folder.
public_html in FTP
Step 5: Inside the wp-contents folder, you’ll find your Themes folder that houses all installed themes on your site.
upload theme local site filezilla
You can download and edit these files. You’ll need to upload them back to the same folder – overwriting the old files.
To Sum Up…
Editing HTML in pages and posts is less risky. You can always preview your changes before making it live.
But when you make direct HTML changes to your website’s theme or the WordPress core, it’s extremely risky. We advise you to use the WP dashboard as far as possible. Or try to find a plugin that will enable you to edit HTML without touching the backend files.
In case you have to edit the HTML code on your site manually, always take a backup of your site and set up a staging environment. Use the staging site to test changes before implementing them on your live site. This will ensure that your live site is never disrupted.