Even if you don’t understand how to write basic HTML or CSS, learning how to edit code on your WordPress site is an extremely useful skill to learn. You might need this skill whenever you have to add custom scripts, want to remove a design element, or simply wish to change the color of a specific element on your blog.

And, in this article, we are going to cover multiple use cases on how to add or remove code from a WordPress site.

One of the reasons people love WordPress so much is because it requires little to no technical expertise. In fact, with the addition of blocks and full-site editing, website builders, and custom themes – you can go about using WordPress without ever worrying about needing to know how to program.

However, there are those few pesky use cases where you might need to know it. Take for example a custom button design. It’s very rare for WordPress themes to offer the ability to change details of a button element unless you go ahead and do it yourself. And, in this case, the solution would be to use the in-built Customizer feature and add Additional CSS.

You can access the Additional CSS code editor by first going to your WordPress homepage. You need to be logged in. Then, from the admin toolbar select Customise, and on the bottom-left of the sidebar, select Additional CSS. This will open a new panel where you can type in custom CSS snippets that will change the appearance of your site.

If you're looking for a theme that lets you customize your WordPress site without writing any code - check out our theme collection. All of FameThemes designs include robust and comprehensive tools to help you style and design site elements through in-built site editing features.

But, ultimately, where CSS is concerned – it is only useful to modify the visual appearance of your site. So, the question is – what other options are there to edit code? One of the more efficient ways is to use the official Theme File Editor. This option is available from the admin dashboard by going to the Appearance -> Theme File Editor tab.

Once you go to this page, you will see a screen just like the one shown above. So, this is also where you can do more in-depth optimization of your site by either adding or removing code snippets. And, to be fair – a lot of the tutorials online provide plenty of copy & paste solutions, so even if you’re not familiar with PHP or HTML – editing and adding pre-written code should be easy enough.

Let’s look at a specific example.

How to change the footer copyright text

Every single WordPress theme has an in-built copyright text, which says either “Powered by WordPress” or “Powered by {the theme you’re using}”.

For some people, it’s not a problem to leave that text there while others want to remove it to add a custom message at the footer. So, how exactly can you edit the code to change it yourself?

If you go back to the Theme File Editor, on this page you will see a list of files on the right-hand side. These are all the files that are included in your WordPress theme. And the specific file we want to edit is footer.php – the file that contains the footer copyright information.

In our case, when we open the file we are looking for a line that looks something like this:

<div class="site-info">
<p>
<?php printf( esc_html__( 'Copyright &copy; %1$s %2$s. All Rights Reserved.', 'boston' ), date('Y'), get_bloginfo( 'name' ) ); ?>
</p>
</div><!-- .site-info -->

This code is what shows the copyright text while also displaying the name of your blog. You have two options here:

1. You can remove it completely.
2. You can change it to display something else.

For the sake of the demo, we are going to change the snippet to a basic HTML footer that links back to our website.

<div class="site-info">
<p>
Copyright &copy; <a href="https://famethemes.com/">FameThemes</a>
</p>
</div><!-- .site-info -->

You can then copy and paste this back inside the footer.php file and click Update File. That’s it. Now your WordPress footer text will be what you specified for it to be. Worth noting is that this is a rather primitive example because most modern WordPress themes let you edit the footer text directly from the Customizer panel. (The same one where you can also customize the CSS as we saw earlier.)

Last but not least, we don’t recommend leaving your Update File function enabled at all times. It is a well-known WordPress security risk, and you can read our article on the topic to learn how to mitigate it.

Add HTML code with Gutenberg Blocks

The Gutenberg Editor uses a Blocks-based interface for writing and editing blog posts. And, one of the Gutenberg blocks is specific to adding HTML code to your pages. This HTML can be anything from a custom layout you saw on another website or a snippet that adds a creative style element you copy and pasted from a tutorial.

From your WordPress post editor dashboard, you can click on the + sign to open the available Blocks. Then select Custom HTML – and if the option isn’t there, you can search for “HTML” to find it.

This will add a new block that lets you type raw HTML inside of it. If it is a “creative” element, remember that you will need to specify the custom CSS for it, as well. And this can be done with the method we showed earlier.

How to add code snippets with a plugin

Understandably, for beginners, it might seem daunting to try and understand how code editing works in WordPress. So, if you want to avoid the risk of breaking something, an alternative solution is to use a plugin. And for adding code snippets to your WordPress blog, there is none better than the Code Snippets plugin.

The basic premise of the plugin is that it lets you add PHP code snippets without needing to edit the functions.php file manually. So, if you have been reading a tutorial about customizing WordPress but are not sure how to add the code yourself, this plugin will help to mitigate the issue.

Conclusion

Just from a few examples, you now know how to edit CSS, HTML, and PHP code in your WordPress site. What you wish to add or remove is dependent on your particular needs. As we mentioned earlier, popular website builders like Elementor and Visual Composer provide extensive tools to help you customize your site without needing to write any code.

But, there are definitely quite a few specific cases where knowing how to do it is going to come in handy. Even for simple things like applying verification snippets for various services, or adding the Google Analytics code to your website.