Have you ever wanted to edit WordPress source code but aren’t sure how to do so without breaking your site?
Let’s talk about how to edit WordPress code using various methods so that you can find the one that works best for you. If you are a beginner to intermediate level WordPress user and want to learn how to edit WordPress source code like HTML, CSS, PHP, JavaScript, etc. Then this is your option.
In the beginning make sure that you have a reliable backup before you start making edits, or consider working on a staging or testing environment first and then pushing your changes live.
First, let’s talk about how to edit HTML in WordPress on an individual page or post. We’ll start with using Gutenberg block editor, you can use the custom HTML block to add a brand new HTML or if you want to edit the HTML of an existing block then select the “options” for that block, and then select the “Edit as HTML” option. This will enable you to edit the HTML just for that block. However, if you want to edit the HTML for that entire page, go to the “tools and options” drop-down and select “code editor” and now you will be able to see the HTML for the entire page.
You may be wondering about editing the HTML on your home page that appears in the form of widgets in your sidebar’s footers etc. From the WordPress dashboard go to “Appearance” and then select “widgets” in the “sub-menu” option, from here you can toggle to the text tab to edit the HTML of that widget area.
Now let’s talk about how to edit WordPress code across the entire website.
So, the first option is to use the WordPress code editor for your theme CSS and this area is also known as the customizer or the CSS customizer and this comes included in with your theme. To find it from your WordPress dashboard select “appearance” from the navigation menu and then choose the submenu item – ‘customize’.
You’ll be redirected to a page that has a preview of your site on one side and a navigation menu on the other side and at the bottom of this menu select ‘Additional CSS’. You can now edit your custom CSS in this section and any CSS that you add here will update your preview over on the other side although it won’t be published to the live version of your website until you select ‘publish’.
Remember that this option is specific to your theme so if you switch WordPress themes this code will no longer be active so always remember to use a child theme to preserve all of that hard work that you’ve done.
The second option is to use a plug-in to manage your code snippets and depending on what sort of code you want to add and where it needs to go, you’ll need to find different plugins.
Once it’s installed and activated you can navigate to the Settings submenu and select “Insert headers and footers” and will bring you to the settings page for this plugin and here you can paste in any code snippets that you need to use. For example, if you’re trying to install a Google Analytics.
Snippet, you can paste it directly from Google Analytics right into the scripts and header box.
Save your changes and that code is now going to be active on the site, and if you don’t need it anymore you simply highlight it and delete it, or if you don’t need any of the code that you’ve inserted into this plug-in you can simply deactivate and delete the plug-in altogether.
Now, this isn’t just for JavaScript, you can also use plugins to add CSS instead of using the customizer as mentioned in the option above.
Option number three will enable you to edit your code directly in the dashboard using the Gutenberg code editor and this way you can edit PHP theme files, CSS, JavaScript, and almost anything that you want.
It’s added directly to the code files and it’s not dependent on a third-party plug-in which is indeed a plus point. However, this method can be a little bit riskier as there is no preview to show what you’re doing, so you need to be certain to take appropriate safety measures as we have guided you throughout this post before trying this method.
To get to the Gutenberg code editor start from the “Dashboard” – select “Appearance” and then the “Theme Editor” submenu, use the links along the side to locate the file that you want to edit, and just click on it to open it up and start editing.
Note: You can only edit files here however, you cannot remove or add them, but once you’ve found the file that you want to edit and have made your edits, select “Update File” and now your changes are live.
So, here we have given you a brief on the three ways to edit the WordPress source code for your website. Always remember to take backups as a safety precaution before you begin editing code.
WordPress themes are on sale at our website, grab them all today.
