This article only applies if you’re running a self-hosted WordPress website. It does not apply for wordpress.com sites!
One of the reasons WordPress is so popular is because of the plugins that offer your website advanced functionality. With the support of the plugin library and keeping these plugins updated, you’re able to do advanced digital work with minimal effort – that’s a win for everybody!
But there may be times you have to access the source code of your website. If your site is attacked with malicious malware, you update a plugin, and it crashes your website or you just want to make some advanced customized changes, editing your source code may be the next step for you.
There are many ways to access and edit the source code of your WordPress website. If this is overwhelming for you, we are available to help with this at any time.
How to Edit HTML Code in WordPress 💻
First things first: let’s discuss how to access your HTML code in WordPress. NOTE: You can do more harm than good to your website by updating source code incorrectly. Please be careful!
How to Add HTML Code to a WordPress Page
You actually don’t need to access the source code of your website if you want to edit the HTML on a WordPress page or post or add HTML code to WordPress page or post. All you have to do is move from the Visual Editor to the Text Editor on the backend of any page or post and it will show the HTML working behind the scenes.
From the Text Editor, you can access, change, and update the HTML on any page or post with just a few clicks. You can view your changes at any time by toggling back to the Visual Editor, and when done, be sure to save your changes by clicking Publish or Update.
Or if you’re using the new Gutenberg editor, you can add an HTML block and paste any on-page or in-post HTML right in that block.I'm so excited to learn how to edit my source code from this WP Buffs article. Every #WordPress site is so different. This info is priceless! 👍 Click To Tweet
How to Edit HTML in WordPress Homepage
But what about editing the HTML on your homepage? Don’t be scared as it is not editing WordPress CSS! You can usually do this under Appearance > Widgets and adjust the content there in the individual widget areas.
In some themes, the homepage acts as it’s own individual page so if you can’t edit it in the Widgets area, you may be able to find the homepage content under Pages. Editing WordPress CSS is quite a bit different!
If the homepage acts as an individual page, you can also click Edit Page in the top admin bar from the homepage.
If neither of those options work for editing the HTML on your homepage, you may be using a page builder or theme with a built-in homepage editor. If this is the case, you can reference the documentation provided to you with the theme or page builder.
Editing WordPress Themes for Beginners: A Starter Guide 🏁
Together, these files, which are called template files, are what forms your theme. Sometimes, we also refer to these template files as your WordPress source code.
So if you can do it, how exactly do you go about editing WordPress themes (yes, you can even edit the default template in WordPress) when it comes to these components? Where do you find your WordPress source code? Let’s take a look.
- Using the included WordPress Code Editor, which allows you to edit WordPress source code files online using any web browser
- Via FTP, where you edit WordPress source code files locally, then upload your changes to your WordPress hosting environment.
Option 1: Edit WordPress Source Code Directly 🎯
WordPress ships with a built-in editor that allows you to edit your theme’s files online using the web browser of your choice.
If your WordPress site is still up and running and you’re able to access the backend, you can find the site’s source code via the WordPress Editor under Appearance Appearance > Theme Editor. Don’t search for a WordPress edit page template, as you won’t need one!
1. The WordPress Code Editor
If your WordPress site is still up and running and you’re able to access the backend, you can find the site’s source code via the WordPress Editor under Appearance. If Editor doesn’t appear under Appearance, your theme may be functioning a bit differently; check to see if your site is using a theme-specific WordPress code editor located somewhere else in your dashboard.
Issues with the WordPress Appearance Editor Missing
If Theme Editor doesn’t appear under Appearance, your theme may be functioning a bit differently; check to see if your site is using a theme-specific WordPress code editor located somewhere else in your dashboard.
Alternatively, your theme may have disabled the use of the functionality found in the missing WordPress Appearance editor; for example, some security plugins hide this option from users to “harden” WordPress and make it less likely for your site to become compromised should unauthorized users get access to your environment.
There may also be other reasons why your WordPress theme editor is missing or otherwise inaccessible; we recommend reaching out to others in the WordPress community, especially those with access to the themes or plugins you use, and see if there’s something unique to your environment that hides these options.
Using the Theme Editor: How to Edit WordPress Theme Source Code
In this editing area, you can make any changes you see fit to the design and structure of your website. Be sure you know what you’re doing before making changes to anything in this area, as a wrong move can easily cause your website to crash!
If you have multiple themes installed or are using the combination of an adult/child theme, you can switch between your different themes in the upper right-hand corner of the Editor.
To select specific theme files to edit, you can choose from the list on the right side of the Editor. Did you ask yourself ‘is my WordPress theme editor missing’? Nope, you just have to know where to find it! Also, this is different than learning how to edit default templates in WordPress.
Furthermore, many 3rd-party tools want you to add their code to the header of the site. But what exactly do they mean?
In short, you’ll be working with the header.php file (this should be listed in your theme editor’s file list), specifically the area enclosed by the <head></head> tags.
Alternatively, you can edit the footer in the same way as the header; just select footer.php instead of header.php.
The header of the site starts with the
head tag in the header.php file we mentioned above. It ends with the
That means any tool that wants you to add the code to the header file needs you to add it after (below) the
head tag but before (above) the
The best practice here is to add some space above the
/head tag, paste your code there and update the file (careful not to change anything else in the file).
/head tag can be hard to find, but it’s easy if you do a Command + F after clicking in the file code to search for it by simply typing in
head into the search bar.
Here’s an example of how we added both the Google Tag Manager code and an Ahrefs verification code just above the
The last step is to double check to make sure your code has been added. To do this, just go to your homepage and view the source code.
You can do another Command + F to find the
/head tag and check right above it to make sure your code has been added. You may need to clear cache on your site or in your browser for everything to appear correctly.
Insert header and footer WordPress plugins
Manually adding header and footer scripts isn’t the only option; there are plugins to assist with these tasks, and some themes and frameworks come with such functionality built-in.
If you’re using something like the Genesis framework, adding header and footer scripts is simply done through their editor.
If you are not using Genesis, you can get the same functionality using an effective plugin that will work on any WordPress site. For example, the Insert Headers and Footers plugin is a free way to easily add simple code to your WordPress site’s header or footer.
Whether you’re trying to add Google Analytics code, Adsense code or any 3rd-party integration codes to your site’s header or footer, this plugin can add it with just a few clicks.
The biggest reason why you might be interested in using something like this is that your header.php file gets overwritten by WordPress during updates. By using a plugin (or some external functionality that mimics such plugins), you are guaranteeing less work for yourself; you can update the WordPress core and not worry about having to manually re-add your code.
- Call the file from your post
When you are editing your post, click the three horizontal dots to launch the dropdown menu and then, click Options.
At the bottom of the Options menu, under Advanced Panels, make sure the box next to Custom Fields is checked.
Beneath your post editor, you will now see the space where you can add Custom Fields.
How to Edit Your WordPress Site’s CSS
- Using the Theme Editor
- Using your theme’s built-in CSS editor
Editing Your Site’s CSS using the Theme Editor
All of the CSS files used for your WordPress site’s theme can be found in the Theme Editor (available by going to Appearance > Theme Editor). The file list on the right displays a full list, and what you’re looking for are the files that end with the .css extension.
You can make your desired changes using the Theme Editor. Just make sure to click Update File when done to save your changes.
Editing Your Site’s CSS using Your Theme’s Built-In Editor
In addition to using the WordPress Editor, you can use the theme’s built-in editor. This is available to you by going to Appearance > Customize.
Then, click Additional CSS at the bottom of the left-hand navigation pane.
This will open up a coding area where you can add CSS that you have written.
When done, click Publish to save your changes.
Option 2: Changing Your Source Code by Downloading and Uploading Files via FTP 📥
In addition to using the WordPress Code Editor, you can use FTP to access the entire source code of your WordPress site. This allows you to make changes to your file, then upload the modified files back to your WordPress environment
It’s also pretty necessary when you’re doing any PSD > WordPress work. Here’s how to get started.
1. Create FTP Credentials
First, you’ll need to create FTP login credentials through your hosting provider. You can usually create them in your cPanel under FTP Accounts.
To create FTP credentials in cPanel, open this checklist and launch FTP Accounts. Then:
- Add a unique identifier for your FTP username. Your FTP username will be firstname.lastname@example.org, so copy/paste it to a secure location.
- Create a unique and strong password. We recommend using the password generator to create a password that scores 100/100 on a strength score. This will be your FTP password, so copy/paste it to a safe location as well.
- For the Directory extension, always use public_html.
- Your Quota should always be Unlimited.
- Click Create FTP Account and you’re done!
If you have trouble creating FTP login information, reach out to your hosting provider via livechat or email support and have them help you create it.
Feel free to Google “[your hosting provider] FTP” and a helpful article should pop up. For instance, SiteGround provides a ton of support in this area.
2. Download FileZilla (or Your Choice of FTP Solution)
You will need to download FileZilla, a free FTP solution that allows you to transfer files back and forth using the FTP protocol. There are options other than FileZilla, so feel free to use the option that best fits your needs.
3. Log Into Your Web Hosting Account Through FileZilla
Open FileZilla, otherwise known as a WordPress source code editor, and enter your FTP host, username, and password. Your username and password you’ve already created and your hostname should be listed somewhere in your cPanel.
If your cPanel lists an IP Address, you can use that as the host as well.
Click Quickconnect and you’re in!
4. Edit Your Files
Once you’ve logged in, you now have access to your WordPress source files and can make HTML, CSS, and PHP edits as you see fit. Simply right-click on any file you want to edit and select View/Edit.
Once you’ve made the changes you want (again, be careful not to white screen your website), you can save the new file and FileZilla will upload it so that it can be used in place of the old one.
How to Edit WordPress Themes Without Coding 🚫
If you are comfortable with manipulating WordPress’ source code, you can change everything about your WordPress site. The openness of the platform is extremely powerful, but we understand that (for some), this can be daunting. And so, we remind you:
You can edit WordPress themes as a beginner and without coding.🎬 Fun fact: You can edit #WordPress themes as a beginner and without coding. Did you know that? Our minds were blown at first, too. Click To Tweet
Granted, you won’t be able to change as much, but there’s still a lot you can do with your WordPress theme’s built-in editor, which is available via Appearance > Customize.
In this area, you’ll see a guided method of customizing the WordPress theme you’ve chosen. You can begin with high-level items under Site Identity, which allows you to change your website’s name, tagline, and icon, or you can work on your site’s colors, menus, widgets, and homepage settings. For each option, WordPress has provided you with a minimal set of options to help you customize your site.
How the WP Buffs Train to Edit WordPress Source Code
We’ve spent a lot of time covering how you might edit the source code for your WordPress site, and (for those who are less comfortable with coding) we’ve taken a brief look at the built-in theme customization features perfect for beginners.
But we understand that depending on the task you’re trying to accomplish, you may feel like you are in over your head. If so, WP Buffs can help you with customizing your WordPress themes.
At WP Buffs, we are all WordPress experts; none of us are contractors, and we began our WP Buff journey with an extensive onboarding and technical training process. We promise that we can help you with whatever customization you want to make — regardless of whether your idea hit you at 3 AM or 3 PM…we work around the clock!
We also created this free eBook for you. The 21-Step Checklist to Ensure a 99.9% Secure WordPress Website download it now and secure your website after you edit the source code.
Wrapping Up 🌯
You just learned a lot of information! Feeling overwhelmed? We’ve got your back.
The WordPress Theme Editor and FTP access to your WordPress site are the best ways to access the source code of your WordPress website and make core changes to HTML, CSS, and PHP. Alongside the power of the seemingly endless plugin library, this will give you the ability to fully customize everything about your site.
And if you’re looking for additional technical help with this, here are 15 WordPress maintenance companies that can do the job.
If, however, the thought of editing WordPress source code is daunting, and the built-in theme editor isn’t quite powerful enough for your needs, you can reach out to WP Buffs for 24/7 support, any time!
Want to give your feedback or join the conversation? Add your comments 🐦 on Twitter.