Edit WordPress Code – HTML, CSS, PHP

While WordPress makes it simple for non-coders to maintain a website, you’ll definitely want to alter code in WordPress at some point to get greater control over how your site looks or performs.

This guide will explain to you how to safely edit code in WordPress in a few different methods to assist you in doing so:

Individual WordPress Posts or Pages HTML Editing
HTML/PHP Code Editing in Your Theme
Custom CSS for Your Website
If you already know what you want to do, you can jump to that area by clicking one of the buttons above. Otherwise, let’s go to work on the edits!

Do you like to watch the video?

How to Edit the WordPress Code?

You may alter your WordPress code to tweak several areas to get greater control over how your WordPress site appears and functions:

You can alter HTML code for individual articles or pages using the new block editor or the traditional editor.
Use a child theme to alter the source code of your WordPress theme.
Consider utilizing a plugin to keep track of code snippets you add to your theme’s head> or functions.php files.
You can utilize the Additional CSS tab in the WordPress Customizer or a plugin like “Simple CSS” if you merely want to add custom CSS.
Support

How to Edit WordPress HTML for Individual Posts/Pages

Let’s begin by reading the source code for individual WordPress posts, pages, or other post kinds, which is the simplest approach to updating WordPress HTML.

Both the new WordPress block editor (Gutenberg) and the older classic TinyMCE editor can be used for this.

How to Use the Block Editor in WordPress to Edit HTML (Gutenberg)
In Gutenberg, there are a number of different ways to work with HTML.

To begin, if you only want to add your own HTML code to a piece of material, I would advise against editing the complete source code of your post, since this would only muddle things more.

Alternatively, you may use the dedicated Custom HTML area to paste the HTML you want to use:

Custom HTML block in Gutenberg
However, there may be times when you need to alter the HTML of a different block directly. To add a nofollow tag to a link in the block editor, for example, you’ll need to alter the HTML of that block.

There are two ways to accomplish this…

To begin, select the Edit as HTML option from the options for each individual block:

What is the best way to change HTML in a WordPress block?

How to change a single HTML block?

This will allow you to edit the HTML for that specific block:

An example of HTML editing in a block
You can also use the Code Editor from the main Tools & Options dropdown if you want to edit the HTML for your entire article. You may also use the keyboard shortcut Ctrl + Shift + Alt + M to switch between code and visual editing.

How to use Gutenberg’s complete code editor?

Keep in mind that you’ll have to work around all of that markup for blocks in the complete code editor – for example,!— wp:paragraph —>.

It doesn’t have to be difficult to edit code in WordPress! Check out this simple guide on modifying HTML, CSS, and PHP.
HOW TO EDIT WORDPRESS HTML IN THE CLASSIC EDITOR CLICK TO TWEET (TinyMCE)
If you’re still using the Classic WordPress editor (TinyMCE), go to the Text tab to alter the HTML for your entire post:

In the Classic WordPress editor, how do I modify HTML?

How to Edit the Source Code in Your WordPress Theme

Let’s move on to the more important topic of how to alter code in your WordPress theme. Because the stakes are a little higher, we’ll need to answer a few questions first before diving into the how-to.

What makes the stakes so high? Simply put, it’s because if you make a mistake here, you risk breaking your site!

WordPress has made it far more difficult to do this by accident in recent releases, but altering your site’s source code is always going to open the door to problems, so be sure you do it safely.

Any direct code edits should be done in a child theme.
You should use a child theme instead of modifying the “parent” theme if you want to directly edit any of the code in your theme’s files.

Any code changes you make without a child theme will be overridden the next time you update your theme. When you use a child theme, on the other hand, you’ll be able to update the parent theme quickly without losing the modifications you’ve made in the child theme.

Check out our complete guide on WordPress child themes for more information on the benefits of child themes and how to develop one.

Instead of editing code in a child theme, consider using a plugin.
If you want to change the way your theme functions, you’ll probably have to edit the source code of your child theme directly.

Do you want to discover how we grew our traffic by over 1000%?
Join the 20,000+ people who receive our weekly email with WordPress insider secrets!

Now is the time to subscribe.
If you want to alter code in WordPress for a different reason, such as adding a tracking script to the head> section of your site or adding a snippet to your theme’s functions.php file, a plugin may be a better option.

The Head, Footer, and Post Injections, for example, make it simple to inject code snippets where they’re needed. It’s also easier to manage these code snippets in the future because they’re all separated into the plugin’s interface.

Similarly, the free Code Snippets plugin is an excellent choice for adding a code snippet to your child theme’s functions.php file.

In conclusion, if you wish to alter WordPress code to add snippets to your theme’s…

Section head> of the Functions.php file…

Then instead of directly altering your themes files, you should consider using a plugin, which will make it easier to maintain such snippets and ensure that they don’t get overwritten when you update your theme.

Let’s look at how to edit your theme’s source code if you need to make more changes.

Use the WordPress Code Editor in the Dashboard
If you’re going to directly alter your theme’s code, we strongly advise you to back up your site first (either your complete site or the file you’re editing).

After that, go to Appearance Theme Editor on the dashboard to access the in-dashboard theme code editor. WordPress will provide a warning identical to the one you received earlier:

Before using the in-dashboard code editor, there is a warning.
Then you can utilize the right-hand sidebar to navigate between different theme files and the code editor to perform your actual edits:

Do you have troubles with downtime with WordPress? We monitor the health of your website every 2 minutes at GreggHosting and our WordPress professionals are available 24 hours a day, 7 days a week. Take a look at our plans.

WordPress’s in-dashboard code editor
To edit code in WordPress, use SFTP.
You can edit theme files over SFTP instead of using the in-dashboard code editor. There are two advantages to this strategy:

You can use whatever coding editor you choose.
If you break something by accident, you can quickly rectify the problem. If you alter code through your WordPress dashboard, on the other hand, there’s always the risk of breaking anything that locks you out, requiring you to connect via SFTP to rectify the problem (though, thanks to recent revisions, this is becoming less probable).
Here’s how to use FTP to connect to your website.

After that, go to…/wp-content/themes/child-theme-name to find your theme’s folder. Right-click on the file you want to modify and select properties. Most FTP tools will allow you to edit the file and will automatically re-upload it once you’ve finished editing it.

However, before making any modifications, we strongly advise you to save an original version of the file to your desktop. That way, if you mistakenly ruin something, you can simply re-upload the original version:

How to use SFTP to modify WordPress HTML?

How to Add Custom CSS to WordPress
You don’t need to utilize the in-dashboard code editor or SFTP techniques if all you want to do is add custom CSS to WordPress rather than change the HTML or PHP code.

You can use the WordPress Customizer instead. This strategy has the added benefit of allowing you to preview your changes in real-time, in addition to being a simpler choice.

Go to Appearance Customize in your WordPress dashboard to get started:

How do I go to the WordPress Customizer?

Then, in the WordPress Customizer, look for the Additional CSS option:

In the WordPress Customizer, where can I find the Additional CSS option?
This will bring up a code editor where you can enter your CSS. As you make changes to CSS, the live preview of your site will refresh instantly to reflect those changes:

How to use the WordPress Customizer to alter CSS?

Tom Usborne’s Simple CSS plugin is another nice alternative for implementing CSS. It has a comparable option in the WordPress Customizer, and it also has a meta box that allows you to add custom CSS to individual articles or pages.

Finally, if you need a lot of custom CSS – hundreds or thousands of lines – you can write your own custom CSS stylesheet and upload it to your theme using WP enqueue scripts.

Summary If you wish to directly edit HTML in a single WordPress post or page, both the new block editor and the classic editor provide that option.

If you wish to alter the source code of your WordPress theme, however, there are a few things to keep in mind:

Instead of editing the parent theme’s code directly, always use a child theme.
Consider using a plugin to manage snippets added to the head> or functions.php files, as these plugins can provide a more straightforward and manageable solution.
If you still need to make direct code adjustments following those considerations, go to Appearance Theme Editor in your WordPress dashboard and edit your child theme’s source code. You can also use SFTP to connect to your site and edit code that way.

Finally, you don’t need to alter your theme’s code directly if you just want to add some custom CSS. Instead, you can utilize the WordPress Customizer’s Additional CSS box or a plugin like Simple CSS.

Do you have any questions on how to alter WordPress code? Please post your questions in the comments section.