Are you looking to edit the HTML code on your WordPress site?
Editing HTML might be necessary to make customizations on your website. Such as changes to the design and layout of your page or to your website theme.
HTML stands for HyperText Markup Language and is how content is structured on the web.
HyperText refers to links and Markup refers to annotation.
So, HTML basically annotates text, images, and other elements on a page.
Common HTML elements are <head>, <title>, <body>, <p>, <div>, <span>, <ul>, and many others. You can check the HTML document with the source code of your site.
When you change the HTML on a page, you change how the contents are structured and displayed on the web browser.
On a WordPress website, the best way to make quick customizations is with the HTML editor or the WordPress code editor. This is native to the platform and easy to use for beginners!
Here are 4 different ways to edit WordPress code:
- Use the block editor and classic editor to edit code for individual pages or posts.
- To edit your WordPress theme’s source code and design files, it is best to use FTP or a child theme.
- To add specific code snippets to the <head> section of your website, use a plugin.
- To add custom CSS, use the Additional CSS section in the WordPress Customization menu.
How to edit HTML in WordPress Classic Editor
You can edit the HTML of any page or post directly in the Classic Text Editor on WordPress.
Simply click on the Text tab to see the HTML of your content.
Then, make changes to the HTML. This is the easiest way to make customizations to a page or blog post.
For example, you can change font styles, create a table of contents, add a list of items, and more.
How to add custom CSS in HTML
You can add plenty of inline CSS styles to your blog post content on WordPress.
Bold certain words by using the <strong> importance element.
<strong>This text is bold</strong>
Italicise text with the <i> or <em> element.
<i>This text is italic</i>
<em>This text is emphasized and usually displayed in italic</em>
Create bullet lists with the <ul> and <li> element.
<ul>
<li>List item</li>
<li>List item</li>
</ul>
Add color and styles in CSS code
You can also add inline styles such as background color with a <span> tag.
<span style=”background-color: #f2e444;”>does not include impressions from saved pins or repins.</span>
This creates a text highlight effect for your blog posts. Just a simple tweak directly on the HTML to beautify paragraph texts.
How to edit HTML in WordPress Block Editor
On the new Gutenberg editor for WordPress 5.0 and later, you can edit the HTML of your post or web page with the WordPress Block Editor.
First, find a new Custom HTML block with the plus (+) sign at the top left.
Next, enter your custom code in the block.
You can preview your HTML code to check if it works properly and how your custom HTML code looks when published to live.
To edit the HTML code of individual blocks such as an existing paragraph, select a block in your content.
Then, click on the three-dot menu and the ‘Edit as HTML‘ option.
You can make changes to the HTML tags, add font styles and custom code too.
This is the visual editor that allows us to make changes to individual web pages on WordPress. To make changes to an entire HTML document, we have to switch to the code editor.
Click on the ‘Code Editor‘ to view the source code in the HTML page, and make changes to an entire post or page.
How to edit HTML in WordPress Widgets
You can add a Custom HTML widget in your WordPress widget area.
Under Appearance > Widgets > Custom HTML
Drag the custom HTML widget to your website’s sidebar, footer, or other areas.
For example, you can embed a Convertkit form with this widget. Simply copy the form’s raw HTML code.
Then, paste it into the Custom HTML widget on WordPress.
The areas where you can add a widget depend on your WordPress theme. You should be able to add it to your blog sidebar, footer, and other areas.
How to edit HTML in WordPress Theme Editor
If you want to make advanced customizations in your theme, you can do so in the theme editor.
Under Appearance > Theme Editor
Though this is not recommended because one slight mistake could break your website and prevent you from accessing your WordPress dashboard.
Also, if you update your theme to another version in the future, all changes you’ve made would be lost.
But if you absolutely must edit your theme files, make sure to back up your website first with your hosting provider.
When you try to access the Theme Editor on WordPress, a warning notification appears.
Once you click I understand, you can begin to make edits directly to your theme files.
You can select which file you want to make edits to, such as the header.php file or the CSS stylesheets. Once you’ve made the necessary edits, click on the Update file button.
Again, this is not a best practice. A better way would be to use FTP or make these direct edits with a child theme.
How to edit HTML with WordPress Plugins
Plugins are a convenient and effective way to edit your theme’s files and raw HTML code directly.
Usually, when you need to make changes site-wide, you can apply that change in the <head> section of your website.
Headers and Footers Plugin
The Insert Headers and Footers free plugin is an easy way to add custom code across the entire site.
For example, you can add a Google Analytics tracking code or Facebook Pixel code in the <head> section.
Elementor Page Builder
Elementor’s visual page builder plugin allows you to create beautifully designed landing pages without touching a line of code.
It is the simplest way to build customized websites and add HTML widgets anywhere on the page.
You can add CSS by wrapping the code in style tags, and Javascript code in script tags. Save and preview your code on a browser.
There you have it! Editing HTML on WordPress is much easier than you think, isn’t it?
You just need to know the different ways to use the WordPress editor on individual pages or to customize your theme’s files.
16 people reacted on this
Hihi….this brings back good memories of my time building websites back in college! I loved this side of coding. My Block Editor does it better for me now.
Thanks for the guide and tips for WordPress and I am a WordPress user too. I think this will be helpful to those beginners without any HTML editing skills.
Fear of ruining my site has subsided. Thanks for the easy tips!
I must admit that I’m scared to make any changes to my website. But with your detailed instructions, I might be willing to try!
This is something that I use often in WordPress to correct HTML errors. Thanks for the useful pointers!
thank you so much for this! my daughter’s learning how to use wordpress, and she wanted to edit the html as well so i’ll show her this 🙂
Thanks for sharing! WordPress is not my strength, and I rarely make such changes on my site. But your post will be very helpful for future changes.
It’s great to have basic knowledge of codes and HTML code editing when you start blogging. It always comes in handy.
As a new blogger, it’s scary to edit codes for me. I am not that familiar with html codes but with your post, I learned a lot. It was really helpful. Thanks for sharing
This is a great refresher to basic html coding. I am familiar with some of that but also learnt a few new tricks.
I have always wondered how people did this. Helpful post, thanks.
Happy to help!
This is great info! I just redesigned my website, so I may need this!
Cheers!
Hyper text markup language HTML is a basic building block of all web app today, UI are basically done using this language in conjunction with JS CSS etc, not breaking things will only depend on toy ur knowledge on how html really works syntax, when to use and when not to use them.
????