How to Edit WordPress Code

WordPress is an incredibly powerful and versatile platform for building and managing websites. It’s also open source, which means that anyone can access and modify the code. If you’re comfortable with HTML, CSS, and PHP, you can make changes to your WordPress site’s code to customize it and add new features. In this article, we’ll show you how to edit WordPress code to make changes to your site.

What You’ll Need

Before you start editing WordPress code, there are a few things you’ll need:

A text editor. We recommend using a code editor like Sublime Text or Atom.
FTP access to your WordPress site. You’ll need this to access the files on your server.
A basic understanding of HTML, CSS, and PHP.

Now that you have the necessary tools, let’s take a look at how to edit WordPress code.

Connect to your WordPress site using an FTP client. This will allow you to access the files on your server.
Navigate to the folder where your WordPress files are stored. This is usually the “public_html” folder.
Open the file you want to edit in your text editor. You can edit any of the core WordPress files, as well as any theme or plugin files.
Make your changes to the code and save the file.
Upload the file back to your server using your FTP client.
Test your changes to make sure everything is working as expected.

Tips for Editing WordPress Code

Here are a few tips to keep in mind when editing WordPress code:

Always back up your site before making any changes. This will ensure that you can restore your site if something goes wrong.
Be careful when editing core WordPress files. If you make a mistake, it could break your site.
If you’re not comfortable editing code, consider using a plugin or theme to make the changes you need.
If you’re making changes to a theme or plugin, make sure to use a child theme or a custom plugin so your changes won’t be overwritten when the theme or plugin is updated.

Conclusion

Editing WordPress code can be a great way to customize your site and add new features. Just make sure you have the necessary tools and a basic understanding of HTML, CSS, and PHP. We hope this article has helped you learn how to edit WordPress code.

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:

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:

How to edit HTML in WordPress block — How to edit a single block as HTML

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

Example of editing a block's HTML — Example of editing a block’s HTML

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:

How to access full code editor in Gutenberg

Keep in mind that, in the full code editor, you’ll have to work around all that markup for blocks – e.g. .

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 HTML in Classic WordPress editor

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:

The warning before accessing the in-dashboard code editor

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:

Where to find the Additional CSS option in 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!

Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

Easy setup and management in the MyKinsta dashboard
24/7 expert support
The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
An enterprise-level Cloudflare integration for speed and security
Global audience reach with up to 35 data centers and 275 PoPs worldwide

Get started with a free trial of our Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

What You’ll Need