How to Edit WordPress Source Code (HTML, CSS, PHP, JavaScript)

Become a WordPress Buff
How to edit WordPress code
Share on twitter
Share on email
Share on facebook
Share on linkedin

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.

matrix GIF

Our team at WP Buffs helps website owners, agency partners and freelancer partners solve problems like this maintenance mode-related one and more. Whether you need us to manage 1 website or support 1000 client sites, we’ve got your back.

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.

Can you do CSS edits with WordPress? What about PHP changes? JavaScript? Yes, yes, and yes!

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.

There are two main ways to access the raw theme files (PHP), JavaScript (JS), and Cascading Style Sheets (CSS) of your WordPress website:

  1. Using the included WordPress Code Editor, which allows you to edit WordPress source code files online using any web browser
  2. 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 your Theme Editor, you can access the PHP theme files, the Cascading style sheets, the JavaScript files, and all other development-related files that make up your theme.

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.

Before you can use JavaScript anywhere in your WordPress site, you’ll need to have a file containing your JavaScript code. Most, if not all, themes ship with a couple of JavaScript files, and adding JavaScript to WordPress pages is a simple process.

Note that this obviously means there’s a JavaScript file elsewhere that is being called by the header.php or the footer.php file you’re working in.

You can add JavaScript to WordPress at any time. If you are writing your own JavaScript, you have access to your work within the WordPress editor, where WordPress shows you a list of your files. You can open up any of these files and make your desired changes directly using the WordPress editor.

If you’re including JavaScript because you’re using a third-party plugin, then you’re simply making a call to that external file that is hosted elsewhere.

To use the JavaScript that’s written, you’ll need to “call” the file wherever you want the file used. You’ll call JavaScript by putting the following script on any page where you want the JavaScript file loaded, which directs your page to the location of your file:

<script type="text/javascript" src="/scripts/myJavaScript.js"></script>

The best place to call your JavaScript file depends on whether you want to use the script multiple times across multiple pages, or if you want to use the script just once or twice.

Adding JavaScript WordPress Header or Footer

If you want to make changes to the header across your website, including using JavaScript in multiple places, you can open the header.php or footer.php files.

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 /head tag.

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 /head tag.

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).

The /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 /head tag.

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.

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.

How to Add JavaScript to WordPress

Instead of adding your JavaScript to the header.php or footer.php files for use across your entire website, you can choose to add JavaScript to WordPress posts or pages individually. To do this, you’ll need to:

  1. Add your JavaScript to a file to your WordPress environment
  2. Call the file from your post

So, how do you call your JavaScript file from your post? One way is to use the Custom Fields feature as a WordPress JavaScript widget of sorts.

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.

Provide a Name for your field, as well as the Value. The value is where you will input your JavaScript snippet. When done, click Add Custom Field to save your changes.

Now, you can use your custom JavaScript anywhere in the page. To do so, you’ll need to use the template tag that customizes the theme you are using. You may also opt to use a plugin that manages custom fields on your behalf.

How to Edit Your WordPress Site’s CSS

The process to edit your WordPress site’s CSS is pretty similar to editing your site’s JavaScript. There are two ways of customizing your WordPress site’s CSS:

  1. Using the Theme Editor
  2. 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:

  1. Add a unique identifier for your FTP username. Your FTP username will be uniqueidentifier@primarydomain.com, so copy/paste it to a secure location.
  2. 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.
  3. For the Directory extension, always use public_html.
  4. Your Quota should always be Unlimited.
  5. 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.

Share this post:
Share on twitter
Share on email
Share on facebook
Share on linkedin
Did you enjoy this post? Subscribe for more

Our
Blog

No thanks, I'll tackle all my WordPress issues myself.

Schedule a private call with our team to discuss our 24/7 WordPress care plans for serious website owners or 24/7 white-label site management for agencies and freelancers

Honed and proven strategies we've used successfully 500+ times to help you sell your first care plans. Action steps you can implement in minutes.

No thanks, I can already sell as many care plans as I want.
How to Sell Your Very First Care Plans Cover

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

Finally, an email list that helps make WordPress simple and effective for you.

Speed & security optimization tips and detailed how-to guides with advice you can implement today.

No thanks, I already know everything about WordPress.
Speed checklist eBook cover

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

Case study eBook cover (Rigorous Digital)
Case study eBook cover (MEP Publishing)
How to Sell Your Very First Care Plans Cover

Finally, get your website 99.9999% secure and loading in under 1 second.

Our free eBooks and easy-to-follow checklists will have your website fully optimized in just a few hours.

No thanks, my website is as fast and secure as I want it.

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

How to Sell Your Very First Care Plans Cover

Read about how we increased Rigorous Digital's profit margin by 23% and helped remove all website issues for MEP Publishers and their 3 complex websites.

Case study eBook cover (MEP Publishing)
No thanks, I don't need more profit and I can tackle all my WordPress issues myself.
Case study eBook cover (Rigorous Digital)

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.