Skip to content 
One of the reasons people love WordPress is because you can use it without knowing how to code. However, if you are a WordPress developer or if you know how to design websites with code, being able to edit the source code can be incredibly helpful. If you want to know how to edit page source code in WordPress, this post will explain how to do it.
In general, most of the source code for WordPress can be edited under the appearance section of the WordPress dashboard. The PHP, CSS, and javascript files can all be accessed through the WordPress theme editor which is located under Appearance. The HTML code can also be edited on individual pages or posts.
Why do you need to know how to edit WordPress source code?
WordPress is much more customizable than other website builders. Although you don’t really need to code to use WordPress, if you know how to code, you can do just about anything with a WordPress site. Being able to edit the source code allows you to customize your site in ways you can’t always do with a theme or plugin.
WordPress themes allow you to change the colors, fonts, and position of elements, but sometimes you might want to change the design in a way that isn’t built into the theme. Have you ever had a problem with a WordPress theme? For example, the header of your site has a little extra white space that you can’t get rid of. You can fix this by editing the source code or adding custom CSS to your site.
In addition, knowing how to edit the source code can improve your site’s performance and speed. Although there are tons of plugins out there to add functionality to your site, many of them are unnecessary if you know how to edit the source code. The more plugins you add, the slower your site will run, and the more likely you are to have compatibility issues that can break your site.
Before you edit page source code in WordPress
Editing page source code in WordPress is easy. But, before you play around with the code on your site, understand that editing your WordPress theme files can break your website. This is why WordPress always gives you a warning before you edit any theme files or source code.
There are a couple of things that you should do before you edit any source code in WordPress. First of all, back up your WordPress site This will save you a lot of headaches. If you should break anything you can simply restore the backup.
Back up WordPress
There are a couple of ways to backup your WordPress website. Your hosting company may provide a Cpanel backup or regular backups. Check with your hosting company to see what options they provide. Or, you can backup your website with a WordPress plugin.
Updraft Plus is a free WordPress plugin you can use. To install Updraft go to Plugins>>Add New. Then search for Updraft Plus.
Install and activate the Updraft Plus plugin. Then navigate to the settings for Updraft Plus under plugins. Once you are there all you have to do is click on the backup button and it will create a backup of your website.
Keep in mind that if you edit the page source code, it could potentially break the site in such a way that you can’t get to the dashboard. This is why many WordPress developers edit the source code offline using a local server.
Create a child theme
A child theme is essentially a copy of the main theme (or parent theme). It inherits all the functionality and features of the parent theme so that you can edit your theme without making changes to the parent theme.
The reason it is best to create a child them is because if you edit the main theme files and later update your theme, all the changes you made will be overwritten. If you use a child theme, your changes will be saved in the child theme so whenever you update the parent theme, your customizations won’t be lost.
Creating a child theme is easy with WordPress. You can do this with or without a plugin, but if you are just learning how to use WordPress, the easiest way to create a child theme is with a plugin. Install the plugin Child Theme Configurator.
Go to Plugins>> Add New and search for Child Theme Configurator. Install it and then activate it. Once you have it activated, you can create a child theme by going to Tools>> Child Themes.
Select the parent theme to analyze. In this case, the parent theme is Astra.
You will see quite a few settings for customizing the child theme. You can change the name, author, and description of the child theme as well as how you want WordPress to handle the style sheet. Unless you are a WordPress developer, just use the default options.
Make sure you check the box under section 8 that says “This option replaces the Child Theme’s existing Menus, Widgets and other Customizer Settings with those from the Parent Theme. You should only need to use this option the first time you configure a Child Theme.”
Now your child theme should be in the theme manager. Navigate to Appearance >> Themes and activate the child theme.
Now you can edit the HTML, CSS, javascript, or PHP files without worrying about losing any customizations when you update your theme.
How to edit page source code with Google Developer Tools
Before you edit the source code in WordPress, you can edit the code with Google Developer Tools. This gives you an opportunity to see any of your changes before you try them on a live site. To see what this looks like, open your website in Google Chrome. Then right-click on the page and click inspect. This will bring up the developer tool panel.
From there, you can click on any CSS class or ID and change the properties right in the panel. You can see any changes you make on the live page. In this example, <header id=”site-header” class=”header-footer-group”> This allows you to edit the CSS properties for the ID “site-header” and class “header-footer-group”
You can see the text in the header is now blue. By using Google’s Developer Tools first, you can see what changes you need to make without making changes to your actual website. It allows you to edit the page source code directly in Google Chrome. These changes are only taking place when you have the inspect tool open. Once you refresh the page, the changes will disappear.
How to edit HTML in pages and posts
Editing the HTML for pages and posts is easy. You can edit the entire page in HTML or just sections of it using the Gutenberg editor. Keep in mind if you are using a page builder like Divi, Elementor, or WP Bakery, editing a page with the Gutenberg editor may remove the functionality of your page. This is because Gutenberg doesn’t have the same functionality as your page builder. It is best to design and edit your pages with one editor or the other.
How to edit HTML pages and posts with Gutenberg
If you want to add one section of HTML to your page or post, you can add a custom HTML block to your page. Toggle the block editor by clicking on the plus sign inside the post editor screen or at the top of the editor screen.
Then copy and paste your HTML code. In this case, we used a table from W3 Schools. To see what the HTML looks like, select preview.
You can also edit any block on your page or post in HTML by clicking on the block and selecting options (the three dots). The options menu will expand. Select Edit as HTML to edit the block in HTML
You can also edit the entire page or post in HTML by toggling the code editor. Click on options at the top of your WordPress editor (the three dots at the top). Then select code editor. Now you can edit the page in HTML.
Edit the page source code in the WordPress theme editor
You can also edit the source code of your theme by going to Appearance>> Theme editor. The theme editor contains all of your theme’s files including the CSS style sheet and PHP templates. When you go to the theme editor, WordPress will automatically give you a heads-up notice (as mentioned earlier). Click I understand to edit the theme files.
You can edit the theme files directly in the theme file editor, but it’s better to edit the files with your preferred code editor (such as Brackets or Sublime Text). Before you edit, copy and paste the entire code from the theme editor into a text file and save it. Or use an FTP program to save the original file on your computer. This way you have a backup of the original in case you make a mistake.
Each theme may contain different files but all themes will contain at least two files, a styles.css file, and a function.php file
- styles.css is your theme’s style sheet. It contains all the design features of your theme such as colors, fonts, and other design elements.
- functions.php controls all the functionality of your WordPress site.
You can edit your WordPress site’s CSS, javascript, or any of the template files using the theme editor. If you have never edited theme files before, it’s best to try this on a local server first so you can see how it works without worrying about breaking your site.
How to edit CSS without using the theme editor
If you want to add CSS to your website, you don’t have to edit your theme files. You can use the WordPress customizer. This is an easier and better option than editing your theme files. If you want to add custom CSS to your website, go to Appearance >> Customizer. Then click on Add custom CSS.
Then you will see a CSS editor where you can add any CSS to your site. You can see a preview of the CSS when you add it. If you like the way it looks click on publish at the top to save your changes.
Another option for adding CSS or javascript is to use the plugin Simple Custom CSS and JS. This plugin allows you to add custom CSS, custom HTML, and custom javascript to your website’s header, footer, or after the body <body> tag. With the premium plugin, you can add custom CSS or JS to individual pages and posts on your site. The advantage of using this plugin is that it will save your customizations even if you change themes.
