There are many reasons WordPress is popular; it is easy to use and it comes with a wide variety of plugins, like wpDataTables, that offer advanced functionality with a very simple setup. Yet, there are some situations when you need to know how to edit HTML in WordPress.
However, from time to time, you have to access the source code of your website. For example, when your site gets attacked by a malware, it might crash your entire website and there is no other way to fix things except for playing around with the code a little bit.
On the other hand, there might be situations where you simply want to make some advanced customized changes and you need to know how to edit HTML in WordPress.
Table of Contents
Know What You Wish to Change
Before you get started on editing HTML code for a website, you should know what it is exactly that you wish to change. Decide on what results you want, know how to customize a WordPress theme, how to upload the HTML file to WordPress, how to comment out CSS etc.
Maybe you just want to experiment to learn more or maybe you simply want to change some text or edit a site layout. However, no matter what your goal here is, know exactly what it is that you want to do before you start editing the code.
Also, don’t forget to ask yourself if this is worth your time. If you don’t feel like spending a lot of your valuable time to edit HTML, consider hiring a professional to do the heavy lifting for you.
Gather Your Tools
The good news is that there aren’t many tools that you need to be able to edit HTML WordPress. You can find all of them below, and to make thing even better, they are all free of charge.
- An FTP client like Filezilla or WinSCP to get direct access to your files on your web server; to download and upload them easily.
- An editor to make changes to the downloaded file such as Notepad++ which is free of charge and it has a syntax highlighter for the most common programming languages.
Make Your Backups
Before you start meddling with your HTML source code, make sure you know where your backups are and how to restore them immediately if necessary. You can create the backup files via the hosting provider’s cPanel if you don’t like making your own backups.
Changing a Regular WordPress Post or Page
If you want to change HTML source code on a regular WordPress page, all you have to do is use the WordPress HTML editor. Changing a WordPress code this way is actually rather easy. Simply edit the page and you will notice that clicking the Text tab will show you the HTML code behind what appears in this Visual tab.
Editing HTML in WordPress
To explain how to edit HTML in WordPress, we first need to know how to access it.
You will have to access the website source code to before getting to the WordPress HTML editor.
But how do you edit WordPress HTML on your homepage?
If you don’t know how to edit WordPress homepage, don’t fret. You can usually do this under Appearance > Widgets where you can simply adjust the content in the individual widget areas.
However, in some cases, you will notice the homepage acting as an individual page and you won’t be able to edit it in the Widgets area. If that happens, you can find the homepage content under Pages or you can click on the Edit Page option in the top admin bar from the homepage.
If those two options don’t work for you, there is a chance you are using a page builder or theme with a built-in homepage editor. If that is the case, you can edit HTML code in specific ways described in the documentation provided with the page builder or the theme in question.
How to Edit WordPress Themes
Now, we are going to explain how to customize WP theme. Simply go to Appearance → Editor in your WordPress dashboard and find the theme in question.
Don’t be confused if you only see one or two files; usually style.css and functions.php. There is nothing unusual about that, don’t worry.
Unfortunately, changing a template file is not something you can do from the dashboard editor. You will need to copy the file to your child theme by using an FTP application.
For example, if you want to edit HTML file in the Twenty Eighteen theme, let’s say the footer, you will first have to copy the footer.php file over to our child theme using an FTP app.
Simply copy it to your computer and then copy it again to the theme folder. Once that’s been done, go to Appearance → Editor in your WordPress dashboard, select your child theme, and the footer.php file name in the right sidebar.
Update your code and then Click the big blue Update File button beneath the editor.
In some cases, you will not see the Update File button right away. If that is the case, you probably have to change the permissions on the file using your FTP application. Simply, right-click the file name in the FTP app and pick the changing permissions option.
Test
Now that you know how to edit WordPress, you can test the changes you made in your browser by reloading the website (Press F5). If everything runs smoothly, you did a great job in editing your HTML codes.
If things aren’t exactly what you expected them to be, don’t worry. You can always undo the changes or simply reinstall your backup and try again.
FAQ on editing HTML in WordPress
Is WordPress text editor the same as editing HTML?
Not really. The WordPress text editor is where you can directly work with HTML, sure, but it’s primarily meant for general content. WordPress introduced the Gutenberg editor, which is more block-based and user-friendly. If you’re keen on diving deep, head to the text editor to tweak the HTML.
Can I work directly with the Gutenberg editor to change HTML?
Yes, and no. The Gutenberg editor is primarily a visual block editor. However, it offers a Custom HTML block where you can add or edit raw HTML. It’s a blend of both worlds – easy visual designing and direct code editing when you need it.
How safe is it to play around with HTML in WordPress?
As long as you keep backups, you’re golden! Before diving into editing the WP HTML source code, always backup your site. One wrong tag can mess things up. And while WordPress plugins for HTML editing can assist, there’s no replacement for a fresh backup.
I’ve heard about Child themes. Are they related to HTML editing?
Oh, absolutely. Child themes allow you to modify or add to the functionalities of an existing theme. This means tweaking its HTML tags in WordPress, CSS, and sometimes PHP. They’re a safe way to ensure any changes you make don’t get wiped out with a theme update.
What’s the fuss about shortcodes in relation to HTML?
Shortcodes are like magic wands in WordPress! Instead of embedding long lines of HTML or scripts, use a shortcode. It’s a shortcut to execute specific functions or display content, without cluttering the visual editor. So, yeah, they do relate to HTML in a roundabout way.
How can I add custom scripts using HTML in WordPress?
The sky’s the limit! You can inject custom scripts into your WordPress pages or posts using the Custom HTML block in the Gutenberg editor. However, if it’s site-wide, consider adding them to the header and footer sections. Some WordPress plugins also let you do this without diving deep into the code.
Are page builders any good for editing HTML?
Ah, page builders like Elementor, Divi, and WPBakery! They’re fantastic for folks not comfortable diving into HTML. However, they often come with their Custom HTML widgets or modules. So, you get the best of both – drag and drop design and a spot to insert or tweak HTML.
Why’s my site looking wonky after editing HTML?
HTML validation is crucial. Sometimes, missing out on closing a tag or adding an incorrect attribute can lead to display issues. Ensure you’re pasting or typing correct HTML. Troubleshooting WordPress code issues can be a hassle, but there are tools and plugins that can assist with validation.
Can I add inline CSS in the HTML I edit in WordPress?
You bet! While adding global CSS changes is often recommended in the theme’s customizer or child themes, for one-off style changes, you can certainly use inline CSS in your HTML. Just remember: it’s always good to keep the majority of your styles unified in one place.
How does the Functions.php file relate to HTML editing?
The functions.php is like the heart of your WordPress theme. It’s mostly about PHP, yes, but it can dictate how your HTML structure behaves. Through it, you can add, modify, or remove functionalities, which can in turn affect the HTML output on your site. Always tread with caution and backup before making changes!
Ending thoughts on how to edit HTML in WordPress
Learning how to code HTML isn’t easy, but learning how to edit HTML in WordPress isn’t so bad, is it?
In this tutorial, we went over some of the most basic changes that are a great start if you are just learning how to use HTML. Knowing how to code your own website can be very handy, but you don’t have to be a coding expert to make a few simple changes all by yourself.
Keep in mind that if things don’t go as planned, you can always undo the changes or reinstall the backup.
If you enjoyed reading this article on how to edit HTML in WordPress, you should check out this one about how to reset WordPress.
We also wrote about a few related subjects like how to embed video in WordPress, how to change WordPress URL, how to add JavaScript to WordPress, how to duplicate a page in WordPress, how to edit WordPress user roles and how to add WordPress featured image.
