How to Access & Edit HTML in WordPress (UK Guide)

This post may contain affiliate links. If you make a purchase through these links, we may earn a commission at no additional cost to you.

Ever tried to get a button just right on your WordPress site? Or maybe you tried to pop in a snazzy map from Google, only for the editor to fight you every step of the way, leaving everything looking a bit wonky? If you’ve ever felt that frustration, you’re in the right place.

Think of your WordPress website like a brilliant, brand-new house. The normal editor lets you paint the walls, hang pictures, and arrange the furniture. It’s fantastic for most day-to-day jobs. But what if you want to install a custom-built bookshelf or move a light switch? For that, you need the toolbox.

Learning how to access and edit HTML in WordPress is like being handed the keys to that toolbox. It gives you the power to go beyond the basics, to fine-tune the details, and to make your website truly your own.

Don’t worry, this isn’t some scary, super-technical guide for computer boffins. This is a plain-English manual for bloggers, small business owners, and anyone in the UK who uses WordPress and wants a bit more control. We’ll walk you through everything, step-by-step, from the safest and easiest tweaks to the more advanced stuff (which we’ll handle with extreme care). By the end, you’ll feel confident making small but powerful changes to your site.

What is HTML, and Why Should You Care? A 60-Second Refresher

Before we start tinkering, let’s quickly get our heads around what we’re actually dealing with. You’ve probably seen ‘HTML’ mentioned, but what on earth is it?

In short, HTML (HyperText Markup Language) is the fundamental skeleton of virtually every webpage on the internet. It’s the basic building block, the timber frame of the house. It uses simple tags (like <h1> or <p>) to tell a web browser what each bit of content is. It says, “This bit is a main heading,” “This is a paragraph of text,” and “Put an image right here.”

A simple analogy might help:

HTML is the skeleton that gives a body its structure.
CSS (Cascading Style Sheets) is the clothes, the hairstyle, the makeup. It controls how everything looks—the colours, fonts, and layout.
JavaScript is what brings it to life, allowing it to walk, talk, and interact.

So, why would you ever need to bother with this “skeleton” on your WordPress site? Surely the whole point of WordPress is that you don’t have to be a coder? Well, yes. But knowing just a tiny bit of HTML opens up a world of possibilities.

You might want to edit HTML in WordPress to:

Embed third-party content: This is the most common reason. Services like Mailchimp (for email sign-up forms), Google Maps, or PayPal (for “Buy Now” buttons) often give you a little snippet of code to paste into your site.
Fix stubborn formatting issues: Sometimes, you copy and paste text from another programme, and it just looks… weird. The spacing is all wrong, or the font is different. Dipping into the HTML lets you clean up the messy code causing the problem.
Add special styling: You might want to make a single word a different colour or add a specific background to one paragraph. While CSS is better for site-wide changes, a quick HTML tweak can be perfect for one-off adjustments.
Insert tracking codes: Marketing tools like Google Analytics or Meta Pixel sometimes require you to add a small tracking script to your site’s code.

Knowing where to put this code is the key. And that’s what we’re here to learn.

Before You Touch a Single Bracket: The Golden Rules of Editing Code

Right, before you roll up your sleeves, we need to have a quick chat about safety. Mucking about with your website’s code can be incredibly powerful, but it’s also the quickest way to break things if you’re not careful. A single misplaced comma or a forgotten bracket can sometimes take your entire site offline, showing visitors a lovely (and terrifying) blank white screen.

To make sure that never happens, we have three golden rules. Please, for the love of tea and biscuits, follow them.

Rule 1: Always, Always Back Up!

This is non-negotiable. Before you edit any code—no matter how small the change seems—make sure you have a recent, complete backup of your website. A backup is a complete copy of all your website’s files and its database. If the worst happens and your site does break, you can restore the backup and it’ll be like nothing ever happened. Phew.

Most good British web hosting companies (like Krystal, SiteGround, or 34SP.com) offer automatic daily backups. Check your hosting dashboard to see if you’re covered. For extra peace of mind, you can use a WordPress backup plugin like UpdraftPlus or WPvivid. They’re easy to set up and let you save a copy of your site with a single click.

Rule 2: Use a Child Theme for Big Changes

This sounds a bit technical, but the concept is dead simple. Imagine your WordPress theme is the original architectural blueprint for your house. Now, imagine you want to knock down a wall. You wouldn’t just draw all over the original master blueprint, would you? Of course not. You’d place a sheet of tracing paper over it and draw your changes on that.

A child theme is that sheet of tracing paper. It inherits all the style and functionality of your main theme (the “parent” theme), but it allows you to make changes in separate files.

Why is this so brilliant?

It’s safe: If you make a mistake in your child theme, you can just delete it and your parent theme is untouched.
Your changes won’t be deleted: When your main theme gets an update (for security or new features), WordPress overwrites the old theme files. If you’d made your changes directly in those files, they would be wiped out forever. Because your changes are safe in the child theme, they carry on working after the update.

You only need to worry about a child theme if you plan on editing the actual theme files (we’ll cover this in the “Danger Zone” section later). For simple HTML edits inside a post or page, you don’t need one.

Rule 3: Start Small and Test Everything

Don’t try to redesign your entire homepage in one go. Make one small change at a time. Change the colour of a heading. Add one embed code. Then, save your work and check your live website to see if it worked as expected.

Pro Tip: Always check your site in a different browser or an “Incognito” or “Private” window. This ensures you’re not just seeing an old, cached version of the page. If the change looks good, move on to the next one. If something broke, you know exactly which change caused it, making it much easier to fix.

Okay, safety briefing over. Let’s get to the good stuff.

Method 1: The Everyday Edit – Accessing HTML in the Block Editor (Gutenberg)

For 90% of the HTML editing you’ll ever need to do, this is the place to be. The modern WordPress Block Editor (also known by its project name, “Gutenberg”) is designed to make these little tweaks safe and simple.

Editing a Single Block’s HTML

Let’s say you’ve written a paragraph and you want to add a <u> tag to underline a specific word for emphasis (even though it’s generally not great for accessibility, it’s a simple example!). The visual controls don’t offer this, so you need to pop in some HTML.

It couldn’t be easier.

Open the post or page you want to edit.
Click on the block you want to change—it could be a Paragraph, a Heading, a List, anything. A little toolbar will appear above it.
On that toolbar, click the three vertical dots (the “Options” menu).
From the dropdown menu that appears, simply select “Edit as HTML”.

The block will instantly flip over, showing you the raw HTML code for just that block. For a simple paragraph, it will look something like this:

<p>This is my important paragraph. I really want to underline this bit.</p>

You can now directly edit that code. Let’s add our underline tags:

<p>This is my important paragraph. I really want to <u>underline this bit</u>.</p>

To go back to the normal visual view, just click the three-dot menu again and select “Edit visually”. That’s it! You’ve successfully edited the HTML of a block.

The “Custom HTML” Block: Your Go-To for Widgets and Embeds

This is probably the block you’ll use most often. It’s a dedicated, safe little sandbox designed specifically for you to paste in chunks of code from other websites.

Let’s run through a classic British example: embedding a local village hall’s Google Calendar onto a page. Or perhaps a sign-up form for your newsletter from Mailchimp.

In your post or page, click the little blue or black + icon to add a new block.
In the search bar that appears, type “HTML”.
Click on the “Custom HTML” block to insert it.
You’ll see a simple box with the prompt “Write HTML…”.
Now, go to the other service (e.g., Google Maps, YouTube, PayPal) and find their “Share” or “Embed” option. They will give you a snippet of code. It will probably start with something like <iframe> or <script>.
Copy that entire block of code.
Come back to WordPress and paste it directly into your Custom HTML block.

The block has a handy “Preview” tab right above it. Click that, and it will try to render the code so you can see what it will look like without having to save the whole page. It’s a brilliant way to check you’ve copied the code correctly.

The Code Editor: Seeing the Whole Picture

Sometimes, you might want to see the HTML for the entire document, not just one block at a time. The Block Editor has a special view for this.

In the top-right corner of the editing screen, next to the blue “Update” or “Publish” button, there’s another three-dot menu. Click that to open the main settings panel. Near the top of this panel, you’ll see an option called “Code editor”.

Click it, and the entire screen will change to show you the raw HTML of your post or page.

A word of warning: This view can look a bit intimidating at first. You’ll see all your content, but it will be wrapped in special WordPress comments that look like this:

 <p>This is my paragraph.</p> 

 <figure class="wp-block-image size-large"><img src="..." alt="..."/></figure> 

These comments are how WordPress knows which block is which. You should not delete or change them, or you might corrupt the layout of your page. This view is most useful for finding a specific piece of text quickly (using your browser’s Ctrl+F or Cmd+F find function) or for getting an overview of the page structure. For actual editing, it’s usually much safer to stick to editing one block at a time.

To exit the Code Editor, just click “Exit code editor” at the top of the screen.

Method 2: The Old School Way – Using the Classic Editor’s “Text” Mode

For years, before the Block Editor came along, WordPress had a different editor—now known as the Classic Editor. Many websites built before 2018 still use it, and some people prefer it and install it as a plugin.

If your editing screen looks different from the screenshots above and has a single large text box, you’re likely using the Classic Editor.

Accessing HTML here is even more straightforward. At the top-right corner of the main content box, you’ll see two tabs:

Visual: This is the default view, which looks a bit like a word processor.
Text: This is the raw HTML mode.

Clicking the “Text” tab will immediately show you the HTML code for the entire post. You can make your changes or paste your embed codes here. You can then flick back to the “Visual” tab to see how your changes look.

This mode is especially handy for cleaning up messy formatting. If you’ve ever copied text from a Microsoft Word document and pasted it into WordPress, you’ll know it can sometimes bring across loads of horrible, unnecessary code. Switching to the “Text” view lets you see all that junk and delete it, leaving you with clean, simple HTML.

Method 3: Tweaking Your Site’s Look – The “Additional CSS” Customiser

This is a really important distinction to make. Often, when people say they want to “edit the HTML to change a colour,” what they actually want to do is edit the CSS.

Remember our analogy? HTML is the skeleton; CSS is the clothes. If you want to change the style of something across your whole site—like making all your links a different colour, changing the font size, or adding a nice border to your images—you should not be adding HTML code to every single page. That would be a maintenance nightmare.

Instead, WordPress has a safe, dedicated place for you to add your own styling rules: the Additional CSS section in the Customiser.

Here’s how to use it:

From your WordPress dashboard, go to Appearance > Customise.
This will load the live customiser, which shows a preview of your site on the right and a menu of options on the left.
Click on the last option in the menu, called “Additional CSS”.
A box will open where you can write or paste your CSS rules.

Let’s imagine a practical problem. You want every blockquote on your blog to have a background colour of a very light grey and a left border in the style of your favourite football team’s colours, say, Arsenal red.

First, you need to know what to target. This is where your browser’s “Inspect” tool comes in handy (we’ll cover that in a moment!). Using it, you find that your theme wraps all blockquotes in an HTML tag called <blockquote>.

So, you go to the “Additional CSS” box and add this code:

blockquote {
  background-color: #f5f5f5; /* A nice light grey */
  border-left: 5px solid #EF0107; /* Arsenal Red! */
  padding: 15px;
}

As you type, you will see the changes appear live in the preview on the right! It’s brilliant. Once you’re happy, just click the blue “Publish” button at the top. This change will now apply to every single blockquote across your entire website, now and in the future. It’s clean, efficient, and the correct way to manage site-wide styling.

Method 4: The Danger Zone – Editing Theme and Plugin Files

Okay. Take a deep breath. We are now leaving the safe, comfortable world of the editor and venturing into the engine room of your website.

I cannot stress this enough: you should avoid editing these files unless you absolutely have to and you know what you are doing. A mistake here can and will take your site down.

Have you made a backup? Do you have a child theme active if you’re changing the theme? Yes? Okay, proceed with caution.

The WordPress Theme File Editor

WordPress, in a move that gives web developers heart palpitations, provides direct access to your theme’s core files from the dashboard.

You can find it under Appearance > Theme File Editor.

The first time you visit, WordPress will show you a big, scary warning that says, “Heads up! You appear to be making direct edits to your theme…”. It’s trying to save you from yourself. Heed its warning.

If you click “I understand,” you’ll be shown a text editor on the left and, on the right, a list of all the files that make up your theme. These are files like header.php (which controls the top part of your site), footer.php (for the bottom part), and style.css (the theme’s main stylesheet).

So, when might you ever need to be in here?

To add a tracking script: Some older tracking services (like Google Analytics or Facebook Pixel) ask you to paste a snippet of code just before the closing </head> tag in your site’s HTML. This tag is located in the header.php file. (Though these days, it’s far better to use a plugin or Google Tag Manager for this).
To change the footer credits: Some themes have hard-coded copyright notices in the footer.php file that you might want to change.

The massive, glaring problem with editing files here is that all your changes will be completely erased the next time your theme has an update. This is the number one reason to use a child theme.

A Safer Alternative: Editing Files via FTP or a File Manager

The way professional developers work is by accessing the files directly on the web server. They don’t use the risky dashboard editor. They connect to the server using software called an FTP (File Transfer Protocol) client, or they use the “File Manager” tool provided in their web hosting control panel.

Think of it like using Windows Explorer or macOS Finder, but for the files that make up your website. This approach is safer because you can easily download a copy of a file to your computer before you edit it. If you make a mistake and break the site, you can simply re-upload the original, unedited file to fix it instantly.

Exploring FTP is a bit beyond the scope of this guide, but it’s important to know that it exists as the proper, professional way to handle direct file edits.

Your Secret Weapon: The Browser’s “Inspect” Tool

This last tool isn’t part of WordPress at all. It’s built right into your web browser (Chrome, Firefox, Safari, Edge—they all have it), and it’s the most useful secret weapon a budding website tinkerer can have.

It allows you to see the live HTML and CSS of any website, including your own, and to test out changes temporarily without actually saving anything. It’s like having X-ray vision for web pages.

Here’s how to use it:

Go to any page on your website.
Find an element you want to know more about—a heading, a button, a link.
Right-click on that element.
From the menu that pops up, choose “Inspect” or “Inspect Element”.

A new panel will open up, usually at the bottom or side of your screen. It will look complex, but don’t panic. On one side, you’ll see the page’s HTML structure. As you move your mouse over the lines of code, you’ll see the corresponding parts of the page light up.

On the other side, you’ll see the CSS rules that are being applied to whatever element you have selected. You can even click on the values there—like a colour code or a font size—and type in a new one. The page will change right before your eyes!

[Image showing a website with the browser’s Inspect Element tool open, highlighting a heading’s HTML and its corresponding CSS]

Crucially, these changes are temporary. They only exist in your browser. As soon as you refresh the page, everything will go back to normal.

This makes it the perfect, risk-free playground. You can use it to:

Figure out exactly which CSS rule is making that button the wrong shade of blue.
Test what a heading would look like if it were a bit bigger.
Find the right “class” or “ID” of an element that you need to target with your code in the “Additional CSS” section.

Once you find a style change you like in the Inspector, you can copy the CSS rule you wrote and paste it into Appearance > Customise > Additional CSS to make it permanent.

Conclusion: You’re in Control

And there we have it. What might have seemed like a dark art is hopefully a lot clearer now. You don’t need to be a coding genius to take more control of your WordPress website. The most important thing is knowing where to look and which tool is right for the job.

Let’s quickly recap the safe order of operations:

For embedding widgets, forms, or maps: Use the Custom HTML block. It’s your best friend.
For small formatting tweaks inside your content: Use the “Edit as HTML” option on an individual block.
For making site-wide style changes (colours, fonts, spacing): Use the Additional CSS panel in the Customiser. It’s clean, safe, and efficient.
For everything else: Stop and think! Do you really need to edit the core theme files? Is there a plugin that could do this job more safely? Only venture into the Theme File Editor as a last resort, with a backup in hand.

The best way to learn is by doing. So go and make a backup of your site right now. Then, try something small. Grab the embed code for your favourite YouTube video and pop it into a Custom HTML block. Play around with the “Inspect” tool on your homepage.

You’ve got this. The toolbox is open.

The UK Guide to Editing HTML in WordPress: From Simple Tweaks to Full Control

What is HTML, and Why Should You Care? A 60-Second Refresher