Although WordPress and WordPress Hosting platforms makes it simple for non-coders to build, publish and manage a website, there will perhaps come a time when you want to edit code in WordPress to have control over the aesthetic quality and functionality of your site.

This guide will illustrate how to safely edit code in the WordPress editor for various ways:

Editing WordPress HTML for Individual Posts or Pages
Editing Your Theme’s HTML/PHP Code
Adding Custom CSS to Your Site

If you’re tech-savvy and well versed in these computer languages, you can click one of the links above to jump right to that specific section. Let’s dive in.

Table of Contents

How to Edit WordPress Code?

To have ease of control on what your WordPress site looks and functions, you can edit your WordPress code to customise different areas of your website:

Use the new block editor and the classic editor to edit HTML code for individual posts or pages.
If you want to edit your WordPress theme’s source code, use a child theme.
Consider using a plugin to manage code snippets that you add to the <head> or functions.php file of your theme.
If you just want to add custom CSS, you can use the Additional CSS area in the WordPress Customiser or a plugin like “Simple CSS”.

How to Edit WordPress HTML for Individual Posts/Pages

Let’s begin with the easiest mode to edit WordPress HTML – for accessing the source code for individual WordPress posts, pages, or other post types.

This can be achieved in both the new WordPress block editor (Gutenberg), and in the older classic TinyMCE editor.

How to Edit WordPress HTML in Block Editor (Gutenberg)?

There are a few ways that you can work with HTML in Gutenberg.

First, if you only need to add your own HTML code to a piece of content, we would recommend not trying to edit the entire source code of your post, as that makes things complicated and it’s not necessary.

Instead, you can just use the dedicated Custom HTML block and paste the HTML that you want to use there.

Though, there might come a time where you need to directly edit the HTML of a different block. For example, if you want to add a ‘no follow’ tag to a link in the block editor, you’ll need to edit the HTML of that specific block.

Two ways that you can do this:

Option A

Click the options for an individual block and choose the Edit as HTML option:

It will let you edit the HTML for just that individual block:

Option B

If you need to edit the HTML for an entire post, you can access the Code Editor from the main Tools & Options drop-down. Or, simply use this keyboard shortcut to toggle between code and visual editing – Ctrl + Shift + Alt + M:

Important to note: In the full code editor, you’ll have to work around all that markup for blocks –

e.g. <!– wp:paragraph –>.

How to Edit WordPress HTML in the Classic Editor (TinyMCE)

When using the Classic WordPress editor (TinyMCE), you can edit HTML for an entire post by selecting the Text tab:

How to Edit the Source Code in Your WordPress Theme

Alright, let’s get into the meatier topic; how to edit the code in your WordPress theme with personal customisations. The stakes are a little bit higher, so we need to cover a few preliminary questions before we get into the how-to.

Why are the stakes higher? You can break your site if you mess something up here and you’d have to start over with a brand-new theme—yikes.

In recent releases and updates, WordPress has made it a lot harder for this to happen even by accident, even so, when editing the source code of your site you leave room for error and issues—so you want to be sure you do it accurately as possible to ensure safety.

Tips for Editing the Source Code of Your Site

1. Use a Child Theme for Any Direct Code Edits

When directly making edits to any of the code in your theme’s files, you need to use a child theme as opposed to editing the “parent” theme.

Without the child theme, any code changes made to the parent theme will be overwritten the next time you update your theme— keeping your theme updates current is an important security step.

When using the child theme, however, it enables you to promptly update the parent theme without losing the changes you’ve made previously to the child theme.

2. Consider Using a Plugin Instead of Editing Code in Child Theme

If you’re planning to modify how your theme functions, you need to work by directly editing your child theme’s source code.

Though, if you want to edit code in WordPress for a different reason – by example, like adding a tracking script to the <head> section of your site or adding a snippet to your theme’s functions.php file – you might be better off using a plugin instead to avoid mistakes.

For example, the Head, Footer and Post Injections plugin simplifies injecting code snippets where needed. And since these code snippets are all isolated into the plugin’s interface, it becomes easier to manage them in the future.

Likewise, if you’re adding a code snippet for the child theme’s functions.php file, the free Code Snippets plugin makes a great option.

In summary, if you want to edit code in WordPress template to add snippets to your theme’s:

<head> section
Functions.php file

Then, consider using a plugin for accuracy instead of directly editing your theme’s files, because it simplifies the process. You can manage those snippets seamlessly and ensure that they don’t get overwritten during your next theme update.

In case you need other edits, let’s discuss how to edit the source code for your theme.

3. Use the In-Dashboard WordPress Code Editor

If you plan to edit your theme’s code directly, we highly recommend that you make a backup of your site before doing so—either your entire site or the file you’re editing to be on the safe side.

Next, access the in-dashboard theme code editor by clicking Appearance → Theme Editor.

Here, WordPress will first give you a warning about backing up your site in case things break.
Select I understand, then you’ll have access to the sidebar on the right to navigate between various theme files along with the code editor to make your actual edits.

4. How to Add Custom CSS to WordPress

You can customise the CSS in WordPress, as opposed to editing WordPress’ HTML or PHP code, you don’t need to use the in-dashboard code editor.

Simply use the WordPress Customiser. Beyond being the easy option, another benefit is previewing your changes in real-time as you edit.

To get started, go to Appearance → Customise in your WordPress dashboard.
Next, locate the Additional CSS option in the WordPress Customiser.
A code editor will open where you can add your chosen CSS. As you add new CSS, the live preview of your site will automatically update according to the new changes.

An alternative option for adding CSS is the Simple CSS plugin from Tom Usborne. It gives you a comparable option in the WordPress Customiser, and it also allows the addition of custom CSS to specific posts or pages via a meta box.

Finally, if a ton of custom CSS needs to be added – like hundreds or thousands of lines – an additional option is to create your custom CSS stylesheet and use wp_enqueue_scripts to add it to your theme.

Recap

Editing code in an individual WordPress post or page can be done in both the new block editor and the classic editor with options to directly edit HTML.

On the other hand, editing the WordPress theme’s source code requires a few considerations:
Always use the child theme rather than making code edits directly to the parent theme they will be overridden during an update.
To simplify the process then uses a plugin to manage snippets added to the <head> or functions.php file, these plugins can offer a safer, more manageable approach.
If you still need to make direct code edits after the above points, you can edit your child theme’s source code from within the WordPress dashboard by going to Appearance → Theme Editor.

In conclusion, a simple addition of some custom CSS requires no editing to the theme’s code directly. As an alternative, just employ the Additional CSS area in the WordPress Customiser or a plugin like Simple CSS.