How to Edit WordPress Code – HTML, CSS, PHP (Easy Guide)

Home Guides How to Edit WordPress Code – HTML, CSS, PHP (Easy Guide)

December 11, 2020 December 11, 2020 / By Tooba Nadeem

For non-technical users, WordPress is an easy-to-use platform. You can create and customize a WordPress website with relative ease using the highly efficient Content Management System.

But there will be certain moments where you might need to add a code snippet within your site. This would involve you getting in touch with the WordPress codebase. But how can you edit WordPress code?

In this post, we’ll be showing how you can do just that.

So, let’s begin.

How to Edit WordPress HTML for Individual Posts/Pages

Let’s look at the most elementary to edit HTML code on WordPress. The method is simple: all we have to do is visit individual WordPress posts, custom post types, and pages, and make changes from there.

Note: You can perform this action on the Gutenberg block editor, as well as the Classic Editor.

How to Edit WordPress HTML in Block Editor on Gutenberg

Let’s see how we can edit code on Gutenberg.

If you want to add your own HTML code (WordPress iFrames, being a prime example), then we would suggest you use Custom HTML blocks on Gutenberg. This is infinitely better than editing the entire source code, and doesn’t complicate things too much for you.

You can find the Custom HTML Gutenberg block by clicking on the (+) icon at the top-right. It will display a dropdown that shows the Custom HTML block. Use this to add an HTML block.

Through this method, you can add a new Custom HTML block. But what if you wanted to edit the HTML code of an existing block?

Well, there are two methods you can use for that purpose.

The first method involves you selecting a particular text block. Click on the three dots as shown below and from there, it will display an “Edit as HTML” option.

With this, you can edit an individual block of code with ease.

If you wish to edit the entire HTML document, you do so by toggling the code editor. On the top right-hand of your editor, click on the three dots to open up the sidebar. Then, under the Editor section, click on Code Editor to toggle the HTML version of your WordPress post.

Keyboard Shortcut (Windows): Ctrl + Shift + Alt + M

Keyboard Shortcut (Mac): Cmd + Shift + Alt + M

We would recommend that unless you’re a WordPress developer, you should stick to editing regular WordPress code. The reason behind this is that when you’re working with the Code Editor, you’ll have to work around the HTML markup.

If you’re not careful, a single mistake can ruin your WordPress post or page.

How to Edit WordPress HTML in Classic Editor on Classic Editor

For one reason or another, if you’re using the WordPress Classic Editor by TinyMCE, then you can edit HTML code through the following method.

Inside the post editor, click on the Text option as illustrated below:

This is the only thing you need to do with the Classic Editor. Since you can’t add blocks on the editor, you’ll have to make all the adjustments from the WordPress Text Editor.

How to Edit the Source Code in Your WordPress Theme

Now that we’re done with editing HTML for a post, it’s time we look at editing a WordPress theme.

Disclaimer: There is a lot more involved in editing a WordPress theme. Since you’ll be editing something that might break your website, it’s best to have a backup at the ready. You can create either a manual cloud backup or use a plugin for creating one.

It’s better to be safe than having your site break because you forgot to enter a semi-colon after a particular piece of code. With that in mind, let’s dive deep into editing our WordPress theme.

Consider Using a Plugin Instead of Editing Code in Child Theme

Now, this might sound like sort of a buzzkill, but really, it’s in your best interest to use a plugin.

If you want to modify and improve the elements of your WordPress theme, it’s better to do it using a plugin. This statement holds even more true if you’re editing a child theme.

For example, if you want to add a tracking code on your WordPress site like Google Analytics, then you can use a plugin instead of manually adding the code inside the <head> section.

There are plugins like MonsterInsights that let you add the Google Analytics code without having to touch a single piece of code. Also, you can use built-in options from WordPress theme providers like BeTheme that you can use to add code easily. The latter, however, is a premium theme so you might not find that option in a regular theme.

Use the In-Dashboard WordPress Code Editor

To edit the HTML code on your website, you can use the in-dashboard code editor as well. While we don’t recommend this method since it involves using the code-editor, it is worth knowing that it is an option you can use.

You can access the WordPress code editor by going to Appearance > Themes.

See the warning? It’s present because many times, webmasters edit the code through this method only to see this site break. Unless you have a WordPress developer current with you, you should avoid it.

For this article, click on the “I Understand” button to continue.

When you’re inside the Theme Editor, you can edit the various WordPress code files by using the sidebar navigation.

Summary

In this post, we showed how you could edit the code of WordPress page or post on Gutenberg and the Classic Editor.

To conclude this article, we’ll leave you with a few best practices that you can look at:

Instead of making direct edits to the parent theme, make edits to the child theme. This helps you avoid breaking certain elements on your WordPress site.
If you want to edit the HTML of your WordPress website, then always look for a plugin solution that can help edit for you. While you’re adding a dependency, it’s better than editing the codebase of your site without the presence of a developer.
Whenever you’re editing the theme of your website, keep a backup of your website to revert back to in the event something goes wrong.
If you want to edit the CSS code of a particular theme, you can use a plugin like Simple CSS.

Editing the codebase can seem like a tricky job. With the right tools, however, you can get up and running with editing code and customize your site to a significant degree.

Don’t want to tinker with the code yourself? Get the help of professional WordPress developers.

Read Also

Tooba Nadeem

Tooba Nadeem is an experienced technical writer with 5 years of expertise in technical writing. Her extensive research and knowledge enable her to provide comprehensive insights into various interesting topics. She excels at presenting complex information in simplified language, ensuring clarity for the audience.