Can we see WordPress plugins codes

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

While WordPress makes it easier for non-programmers to manage a website, there will likely be a time when you'll want to edit code in WordPress to get a little more control over how your website looks or works.

In this post, you will learn how you can safely edit code in WordPress in different ways:

If you already know what you want to do, you can click any of the links above to jump straight to that particular section. Otherwise, let's start editing!

This is how you can edit WordPress code:

To get more control over how your WordPress site looks and functions, you can edit your WordPress code to customize different areas:

  • With the new block editor and the classic editor, you can edit HTML code for individual posts or pages.
  • If you want to edit the source code of your WordPress theme, use a sub-theme.
  • Consider using a plugin to manage snippets of code that you add to your theme's or functions.php file.
  • 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 with the easiest 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) and the older classic TinyMCE editor.

How to edit WordPress HTML for individual posts / pages

There are a few ways you can work with HTML in Gutenberg.

If you just want to add your own HTML to some of the content, I would recommend Not Editing all of the source code of your post as this makes things unnecessarily complicated.

Instead, you can just use the dedicated custom HTML-Block and paste the HTML you want to use there:

Gutenberg Custom HTML Block

However, there may be times when you need to edit the HTML of another block directly. For example, if you want to add a nofollow tag to a link in the block editor, you'll need to edit the HTML for that block.

There are two ways you can do this ...

First, you can click on the options for a single block and the option Edit as HTML choose:

Here's how to edit a single block as HTML

This way you can edit the HTML for just that single block:

Example for editing the HTML of a block

If you have the HTML for your entire post edit, you can use the drop-down list Tools & options on the Code editor access. Alternatively, you can simply switch between code and visual editing with this key combination - Ctrl + Shift + Alt + M:

How to access the full code editor in Gutenberg

Remember that in the full code editor, you need to bypass all markup for blocks, such as: B.

Editing code in WordPress doesn't have to be difficult! This simple guide will teach you how to optimize HTML, CSS, and PHP. 🤓Click to Tweet

How to edit WordPress HTML in the Classic Editor (TinyMCE)

If you're still using the classic WordPress editor (TinyMCE), you can edit HTML for your entire post by clicking the text clicks:

How to edit WordPress HTML in the Classic WordPress Editor

How to edit the source code in your WordPress theme

Now let's get to the bigger topic where you can edit code in your WordPress theme. The stakes are a bit higher, so we need to cover some preliminary questions before we get into how to do it.

Why is the stake higher? Quite simply because you can damage your website if you screw something up here!

In recent releases, WordPress has made it a lot harder for you to do this accidentally, but editing your site's source code will always open the door to problems so you want to make sure you do it safely.

Use a sub-theme for direct code editing

If you intend to edit the code in your theme's files directly, you'll need to use a child theme instead of editing the parent theme.

Without a child theme, any code changes you make will be overwritten the next time you update your theme. However, if you're using a child theme, you can instantly update the parent theme without losing the changes you've made to your child theme.

If you want to learn more about the benefits of child themes and how to create a theme, check out the full guide to WordPress child themes.

Consider using a plugin instead of editing code in the child theme

If you intend to change the way your theme works, you will likely need to edit the source code of your child theme directly.

However, if you want to edit code in WordPress for some other reason - for example, by adding a tracking script to the section of your page or to the file functions.php Add a snippet to your theme - you may be better off

Would you like to know how we increased our traffic by over 1000%?

Be one of the 20,000+ people who receive weekly newsletters with insider tips about WordPress!

Subscribe now

With the Head, Footer and Post Injections functions, you can, for example, easily insert code fragments if necessary. And since these code snippets are all separated in the plugin's UI, it will be easier to manage them in the future too.

If you add a snippet of code to the file functions.php of your sub-theme, the free Code Snippets plug-in is ideal.

To sum up, you should edit code in WordPress to add snippets to your themes ...

  • section
  • Functions.php file

... then you should use a plugin instead of controlling the editing of your theme's files, as this simplifies the management of these snippets and ensures that they are not overwritten when your theme is updated.

If you need to make additional changes, learn how to edit the source code for your theme.

Use the in-dashboard WordPress code editor

If you plan to edit your theme's code directly, we strongly recommend that you make a backup of your website beforehand (either your entire website or the file you are editing).

Once you've done this, you can access the code editor for the dashboard theme by clicking Appearance → Theme Editor click. In this case, WordPress will first give you a warning similar to the one described above:

The warning about accessing the in-dashboard code editor

You can then navigate between different theme files and the code editor in the right sidebar to make your actual changes:

The in-dashboard WordPress code editor

Use SFTP to edit code in WordPress

As an alternative to the in-dashboard code editor, you can also edit topic files via SFTP. This approach has two advantages:

  • You can use your favorite code editor.
  • If you accidentally break something, you can fix it right away. In contrast, when editing code through your WordPress dashboard, there is always the chance that you will detach yourself from your WordPress dashboard and have to connect through SFTP to fix the problem (although again it is) less likely due to recent changes).

Here's how to connect to your site using FTP.

Then navigate to the folder of your theme -... / wp-content / themes / child-theme-name. Find the file you want to edit and right click on it. Most FTP programs will give you the option to edit the file and will automatically re-upload the file once you've made your changes.

However, it is highly recommended that you download an original version of the file to your desktop before making any changes. This way, if you accidentally break something, you can easily re-upload the original version:

How to edit WordPress HTML via SFTP

How to add custom CSS to WordPress

If you just want to add custom CSS to WordPress instead of editing WordPress' HTML or PHP code, you don't have to use the built-in code editor or the SFTP methods.

Instead, you can use the WordPress customizer. Aside from being an easier option, another benefit of this approach is that you can preview your changes in real time.

To start, go to Appearance → Customize in your WordPress dashboard:

How to access WordPress Customizer

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

Where you can find the Additional CSS option in the WordPress Customizer

This will open a code editor where you can add whatever CSS you want. When you add CSS, your site's live preview will automatically update based on the following changes:

How to edit CSS in WordPress Customizer

Another great option for adding CSS is Tom Usborne's Simple CSS plugin. It gives you a similar option in the WordPress Customizer and you can add custom CSS to individual posts or pages via a meta box.

If you want to add a ton of custom CSS, such as: For example, hundreds or thousands of lines, you can also 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 a single WordPress post or a single WordPress page, both the new block editor and the classic editor offer options for editing HTML directly.

However, if you want to edit the source code of your WordPress theme, here are some things to keep in mind:

  • Always use a child theme instead of making code changes directly to the parent theme.
  • Consider using a plugin to manage snippets of code that you add to the or functions.php file, as these plugins can offer a simpler, more manageable approach.

If, after these considerations, you still need to make direct code changes, you can edit the source code of your child theme in your WordPress dashboard by clicking Appearance → Theme Editor click. You can also connect to your site via SFTP and edit the code that way.

If you just want to add custom CSS, you don't have to edit your theme's code directly. Instead, you can just use the area Additional CSS (Additional CSS) in the WordPress Customizer or a plugin like Simple CSS.

Still have questions about editing code in WordPress? Write them in the comments below!


If you enjoyed this tutorial, then you will love our support. All Kinsta hosting plans include 24/7 support from our seasoned WordPress developers and engineers. Chat with the same team that supports our Fortune 500 customers. Check out our packages here