How to Edit WordPress Code – HTML, CSS, PHP

This post will explain you how to change code in WordPress securely in a few different methods:

• Editing HTML for Individual Posts or Pages
• Editing Your Theme’s PHP Code
• Adding Custom CSS to Your Website

Editing HTML for Individual Posts or Pages

Let’s begin by accessing the source code for individual WordPress posts, pages, or other post types, which is the simplest method to modify WordPress HTML.

Edit WordPress HTML in 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 content, I would advise against editing the full source code of your article, since this would only confuse things more. Alternatively, you may use the dedicated Custom HTML block to paste the HTML you wish to use.

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

You may use the Code Editor from the main Tools & Options menu if you wish to alter the HTML for your entire article. You may also use the keyboard shortcut Ctrl + Shift + Alt + M to switch between code and visual editing.

Edit WordPress HTML in Classic Editor or TinyMCE

You can modify HTML for your whole article in the Text tab if you’re still using the Classic WordPress editor (TinyMCE).

Editing Your Theme’s PHP Code

Let’s move on to the more important topic of how to change code in your WordPress theme. Because the stakes are a little greater, 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 editions, but changing your site’s source code is always going to open the door to problems, so be sure you do it securely.

• Use a child theme for any direct code edits
• If you wish to modify code in WordPress for a different purpose, such as adding a tracking script to the head> section of your site or adding a snippet to your theme’s functions.php file, consider using a plugin instead of changing code in your child theme.
• Use the In-Dashboard WordPress code editor
• Use SFTP to edit code in WordPress

Adding Custom CSS to Your Website

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

You may use the WordPress Customizer instead. This technique has the added benefit of allowing you to preview your changes in real time, in addition to being a simpler alternative.

Go to Appearance → Customize in your WordPress dashboard to get started. After that, look for the Additional CSS option in the WordPress Customizer. 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 immediately to reflect those changes.

In conclusion

Both the new block editor and the traditional editor provide direct HTML editing capabilities if you wish to alter code in a single WordPress post or page.

If you wish to modify 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 adding a plugin to handle snippets added to the or functions.php file, since these plugins can provide a more straightforward and controllable solution.

If you still need to make direct code modifications following those considerations, go to Appearance → Theme Editor in your WordPress dashboard and modify your child theme’s source code. You may also use SFTP to connect to your site and edit code that way.