While WordPress makes it easy for non-coders to manage a website, there will probably come a time when you want to edit code in WordPress to get a little more control over how your site looks or functions.
To help you do that, this post will show you how to safely edit code in WordPress in a few different ways:
- Editing WordPress HTML for Individual Posts or Pages
- Editing Your Theme’s HTML/PHP Code
- Adding Custom CSS to Your Site
If you already know what you want to do, you can click one of the links above to jump straight to that specific section. Otherwise, let’s get editing!
Prefer to watch the video version?
How You Can Edit WordPress Code:
To get more control on how your WordPress site looks and functions, you can edit your WordPress code to customize different areas:
- The new block editor and the classic editor allow your 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 Customizer or a plugin like “Simple CSS”.
How to Edit WordPress HTML for Individual Posts/Pages
Let’s start off with the simplest way to edit WordPress HTML – accessing the source code for individual WordPress posts, pages, or other post types.
You can do this in both the new WordPress block editor (Gutenberg), as well as 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 just want to add your own HTML code to a piece of content, I would recommend not trying to edit the entire source code of your post, as that makes things needlessly complicated.
Instead, you can just use the dedicated Custom HTML block and paste the HTML that you want to use there:
However, there also might come a time where you need to directly edit the HTML of a different block. For example, if you want to add a nofollow tag to a link in the block editor, you’ll need to edit the HTML of that block.
There are two ways that you can do this…
First, you can click on the options for an individual block and choose the Edit as HTML option:
This will let you edit the HTML for just that individual block:
Or, if you want to edit the HTML for your entire post, you can access the Code Editor from the main Tools & Options dropdown. Or, you can also just use this keyboard shortcut to toggle between code and visual editing – Ctrl + Shift + Alt + M:
Keep in mind that, 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 Classic Editor (TinyMCE)
If you’re still using the Classic WordPress editor (TinyMCE), you can edit HTML for your entire post by going to the Text tab:
How to Edit the Source Code in Your WordPress Theme
Now, let’s get into the bigger topic, which is how to edit code in your WordPress theme. 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? Well, quite simply, it’s because you can break your site if you mess something up here!
In recent releases, WordPress has made it a lot harder for you to accidentally do this, but editing the source code of your site is always going to open the door to issues, so you want to make sure you do it safely.
Use a Child Theme for Any Direct Code Edits
If you plan to directly edit any of the code in your theme’s files, you need to use a child theme rather than editing the “parent” theme.
Without a child theme, any code changes that you make will be overwritten the next time you update your theme. When you use a child theme, however, you’ll be able to promptly update the parent theme without losing the changes you’ve made in your child theme.
If you’d like to learn more about the benefits of child themes, as well as how to create one, check out our full guide to WordPress child themes.
Consider Using a Plugin Instead of Editing Code in Child Theme
If you’re planning to modify how your theme works, you’ll likely need to work by directly editing your child theme’s source code.
However, if you want to edit code in WordPress for a different reason – 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.
For example, the Head, Footer and Post Injections makes it easy to inject code snippets where needed. And because these code snippets are all segregated into the plugin’s interface, it’s also easier to manage them in the future.
Similarly, if you’re adding a code snippet that could go in your 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 to add snippets to your theme’s…
<head>section- Functions.php file
…then you should consider using a plugin instead of directing editing your theme’s files, as it will make it simpler to manage those snippets and ensure that they don’t get overwritten when you update your theme.
If you need to make other edits, let’s dig into how to edit the source code for your theme.
Use the In-Dashboard WordPress Code Editor
If you’re planning 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).
Once you’ve done that, you can access the in-dashboard theme code editor by going to Appearance → Theme Editor. Here, WordPress will first give you a warning similar to what you learned above:
Then, you’ll be able to use the sidebar on the right to navigate between different theme files and the code editor itself to make your actual edits:
Use SFTP to Edit Code in WordPress
As an alternative to the in-dashboard code editor, you can also edit theme files via SFTP. There are two benefits to this approach:
- You can use your preferred code editor.
- If you accidentally break something, you can fix the issue right away. In contrast, if you edit code via your WordPress dashboard, there’s always a chance that you could break something that locks you out of your WordPress dashboard, which means you’d need to connect via SFTP to fix the issue (though again – this is less likely thanks to recent changes).
Here’s how to connect to your site via FTP.
Once you’ve done that, navigate to your theme’s folder – …/wp-content/themes/child-theme-name. Find the file that you want to edit and right-click on it. Most FTP programs will give you an option to edit the file, and will automatically re-upload the file once you make your changes.
However, we’d highly recommend that you download an original version of the file to your desktop before making any changes. That way, you can just re-upload that original version if you accidentally break something:
How to Add Custom CSS to WordPress
If you only want to add custom CSS to WordPress, rather than editing WordPress’ HTML or PHP code, you don’t need to use the in-dashboard code editor or SFTP methods.
Instead, you can use the WordPress Customizer. Beyond being a simpler option, another benefit of going with this approach is that you’ll be able to preview your changes in real-time.
To get started, go to Appearance → Customize in your WordPress dashboard:
Then, look for the Additional CSS option in the WordPress Customizer:
That will open a code editor where you can add your desired CSS. As you add CSS, the live preview of your site will automatically update according to those changes:
Another good option for adding CSS is the Simple CSS plugin from Tom Usborne. It gives you a similar option in the WordPress Customizer, and it also lets you add custom CSS to individual posts or pages via a meta box.
Finally, if you want to add a ton of custom CSS – like hundreds or thousands of lines – another option is to create your own custom CSS stylesheet and use wp_enqueue_scripts to add it to your theme.
Summary
If you want to edit code in an individual WordPress post or page, both the new block editor and the classic editor give you options for directly editing HTML.
On the other hand, if you want to edit your WordPress theme’s source code, there are a few things to consider:
- Always use a child theme instead of making code edits directly to the parent theme.
- Consider using a plugin to manage snippets that you add to the <head> or functions.php file, as these plugins can offer a simpler, more manageable approach.
If you still need to make direct code edits after those considerations, you can edit your child theme’s source code from your WordPress dashboard by going to Appearance → Theme Editor. Or, you can connect to your site via SFTP and edit code that way.
Finally, if you just want to add some custom CSS, you don’t need to edit your theme’s code directly. Instead, you can just use the Additional CSS area in the WordPress Customizer or a plugin like Simple CSS.
Any questions about how to edit code in WordPress? Ask away in the comments!
