How To Enter Source Code Into Template

WordPress plugins help with extending the functionality of your site and performing advanced digital piece of work with minimal try. However, knowing how to edit HTML in WordPress, as well as your site's other source code, comes in handy in a diversity of situations.

Allow'south say your site is attacked with malicious malware or you update a plugin and it crashes your website. Perhaps you lot simply want to make some avant-garde customizations. In any of these instances, WordPress coding may be the next footstep. Fortunately, there are many ways you tin become nigh it.

In this post, we'll walk y'all through the various ways yous can access and edit the source code of your WordPress website, also as how you can modify your WordPress theme without coding. Let's become started!

In This Article 🗂️

Why Information technology's Important to Know How to Edit Your WordPress Source Code
How to Edit HTML in WordPress
Getting Started With Editing the Source Code of Your WordPress Theme
How to Edit Your WordPress Source Code via the Theme Editor
How to Edit Your WordPress JavaScript Files
How to Edit Your WordPress CSS
How to Edit Your WordPress Source Code via FTP (In iv Steps)
How to Edit Your WordPress Theme Without Coding
Wrapping Upward

Plugins for editing WordPress lawmaking

CSS Hero
Visual CSS Manner Editor
Microthemer
Ultimate Tweaker for WordPress

Our team at WP Buffs helps website owners, bureau partners, and freelancer partners solve issues, including editing and maintaining your site's source code. Whether you need u.s. to manage one website or support 1,000 customer sites, we've got your dorsum.

Why It's Of import to Know How to Edit Your WordPress Source Lawmaking 👈🏻

By default, WordPress is an extremely intuitive and convenient platform. There are many ways to customize and alter your site without always touching a line of lawmaking thanks to themes and plugins.

Technically, yous don't need to access any of your website files or code to have a fully operation and well-designed site. The WordPress dashboard, plugins, and themes all make tweaking and personalizing your site quick and piece of cake

However, there are times when you may desire to implement more command and perform advanced customizations. Perhaps the modify yous're looking to make isn't an pick with the theme or plugins yous're using

Another possibility is that your site crashes or experiences another error that prevents y'all from accessing your admin dashboard. Yous'll likely need to edit your WordPress source code in order to troubleshoot the problem

In such instances, it's helpful to know how to edit HTML in WordPress, besides every bit how to safely and effectively access and modify other source code, including PHP, CSS, and JavaScript. Put simply, learning some basic WordPress coding positions you to exercise more control and flexibility for designing, managing, and maintaining your WordPress site.

How to Edit HTML In WordPress 💻

Kickoff things first: let's discuss how to access your HTML code in WordPress. Note that making changes to your site'southward lawmaking always presents some risk. Editing your HTML is relatively safe compared to other techniques we'll hash out in this post, just it'south still smart to keep with caution and create a fill-in beginning.

How to Edit HTML In the WordPress Classic Editor

If you lot want to add together or edit the HTML of a WordPress page or postal service, you actually don't need to access the source code of your website. In the Classic Editor, all yous have to exercise is move from the Visual editor to the Text editor on the back finish. This volition show the HTML working behind the scenes:

From the Text editor, you tin can access, change, and update the HTML on any page or mail with just a few clicks. You lot can view your changes at whatever fourth dimension by toggling back to the Visual editor. When you're done, be sure to save your post or page.

How to Edit HTML In the WordPress Cake Editor

If you're using the Block Editor (Gutenberg), switching from the Visual editor to the Text editor (or Code editor) requires a few more steps. Nevertheless, y'all also accept multiple options available for editing your HTML, including making changes to the entire page or mail, or for private blocks.

To edit the HTML of the entire folio or post, click on the iii vertical dots located in the height-right corner of the editor, then select Code editor:

This will open the WordPress HTML editor. To switch from the Visual editor to the Text editor within a specific block, click on the three vertical dots in the block toolbar, and then select Edit as HTML:

Another fashion to add HTML to a page or mail service is to utilise a Custom HTML cake:

You tin write your HTML code directly in the block, then click on Preview to see how it will expect on the forepart:

When you're done, save your changes to your post or folio.

How to Edit HTML for Your Homepage in WordPress

What nearly editing the HTML on your homepage? In some themes, the homepage acts as its ain private page. Therefore, the procedure of editing its HTML is the same as that described in a higher place. Simply cull the relevant page from the listing in your dashboard:

You lot can also click on Edit Page in the top admin bar from your homepage to access the Archetype or Block Editor:

If neither of those options works for editing the HTML on your homepage, you may be using a page architect or theme with a built-in homepage editor. If this is the case, yous can reference the documentation for the relevant tool.

How to Edit HTML In a WordPress Widget

Finally, yous may wish to add together HTML in your WordPress sidebar or footer. Many WordPress themes too use the widget department to control the content on your website's homepage.

You can make these homepage, header, and footer adjustments via a Custom HTML widget:

But navigate to Appearance > Widgets, add the Custom HTML widget to your sidebar or footer, and edit information technology as you please. Click on the blue Save push button to publish it on your site.

Getting Started With Editing the Source Code of Your WordPress Theme 🏁

Your WordPress theme is made upward of template files. Sometimes, we also refer to them as your WordPress source lawmaking. They include the raw theme files (PHP), also as the Cascading Mode Sheets (CSS) and JavaScript (JS) of your WordPress website.

If you want to edit these components (or the default template in WordPress), there are ii main ways to access the theme files:

Using the WordPress Theme Editor, which enables y'all to straight edit WordPress source lawmaking files in your dashboard using any web browser.
Via File Transfer Protocol (FTP), where y'all edit WordPress source code files locally, then upload your changes to your WordPress hosting environment.

We'll walk you lot through how to go about each of these methods soon, starting with the WordPress Theme Editor. Withal, there are 2 steps we recommend taking before yous get started.

The first is to support your site. This will ensure y'all have an updated version of your content and settings to roll back to in example annihilation gets messed up while y'all're editing your source code.

The second is to create a child theme. When you're modifying your WordPress theme, all-time practise is to make your changes to a kid theme. Otherwise, the next fourth dimension you update your theme, your changes will be overwritten.

Once y'all have taken these steps, you're fix to get started. Let'southward starting time look at how to edit your WordPress theme directly from your dashboard.

How to Edit Your WordPress Source Code via the Theme Editor 🎯

In example you're unfamiliar, WordPress ships with a built-in editor that enables you to modify your theme'south files online. In the Theme Editor, you can admission the PHP, CSS, JavaScript, and all other development-related files that make upwardly your theme. Here's how to do and then.

Accessing the Theme Editor

If your WordPress site is withal upwards and running and you're able to admission the back terminate, you can observe your site's source code nether Appearance > Theme Editor:

In this editing area, y'all tin make any changes you encounter fit to the design and structure of your theme:

If you have multiple themes installed or are using an adult/child theme combination, you tin can switch between themes in the upper right-hand corner of the Editor:

To select specific theme files to edit, you can choose from the list to the right of the Editor:

The exact files that are available here volition depend on your theme, but at minimum you should see:

manner.css: This is your stylesheet, which contains many design-related features such as your theme's fonts and color scheme.
functions.php: Your theme'south functions file includes PHP code that modifies WordPress' default features.

In one case you're done editing your WordPress source lawmaking in the Theme Editor, make certain to salvage your changes. But click on the Update File button at the lesser of the screen to practice so.

WordPress volition prevent you from saving your changes if it notices there are errors in the code. This is part of what makes using the Theme Editor slightly safer than editing your WordPress lawmaking via FTP, which nosotros'll discuss later.

What to Do If Your Theme Editor Is Missing

If the Theme Editor doesn't appear nether Appearance, your theme may exist performance a bit differently. This doesn't necessarily mean you can't edit the theme files direct. You only need to know where to look.

Check to meet if your site is using a theme-specific WordPress code editor located somewhere else in your dashboard. Alternatively, use of the Theme Editor may have been disabled for your site. For example, some security plugins hide this selection to 'harden' WordPress and go far more than difficult for attackers to compromise your site.

At that place may besides be other reasons why your WordPress theme editor is missing or inaccessible. Nosotros recommend reaching out to others in the WordPress community, specially those with access to the themes or plugins you use, to see if there'southward something unique to your environs that hides this feature.

How to Edit Your WordPress JavaScript Files ✍🏻

Before you tin use JavaScript anywhere on your WordPress site, you'll need to have a file containing your JavaScript lawmaking. Virtually, if not all, themes send with a couple of JavaScript files, which may be hosted elsewhere and 'called' past code in your header.php, footer.php, or other template files.

If you're writing your own JavaScript, you'll have access to your work within WordPress, where you lot can see a listing of your files. You lot can open any of them and make your desired changes directly using the Theme Editor. All JavaScript files end in the .js extension:

If you're calculation JavaScript using a third-party plugin, then you're simply making a call to an external file that is hosted elsewhere. To employ the JavaScript that's written, y'all'll need to call the file wherever you want to use it.

You lot can call JavaScript past putting the following script (which directs your folio to the location of the relevant file) anywhere you want the code to load:

<script type="text/javascript" src="https://wpbuffs.com/scripts/myJavaScript.js"></script>

The best identify to phone call your JavaScript file depends on how yous desire to use the script. For example, you tin can implement it multiple times beyond your site, or just once.

How to Add JavaScript to Your WordPress Header or Footer

If you lot want to make changes to the header or footer beyond your website, including using JavaScript in multiple places, you lot can do and then in the header.php and footer.php files of your theme.

Many tertiary-party tools crave you to add code to the header of your site. In curt, this means you'll be working with the header.php file (which should be listed to the right of your Theme Editor), specifically the surface area enclosed past the tags:

When you're adding JavaScript to your header file, be sure to place the code somewhere between these two tags (afterward or below the opening tag and in a higher place or before the closing tag).

The tag can exist difficult to find. If yous're having trouble locating it, press the Command (or Control) + F keys later on clicking in the editor. Then you tin can locate it by simply typing "head" into the search bar.

Here'due south an example of how we added both the Google Tag Manager code and an Ahrefs verification code just above the tag:

You can edit the footer in the same way – but select your footer.php file instead of header.php:

Once you save your changes, the terminal footstep is to double-check to make certain your code has been added. To do this, go to your homepage and view the source lawmaking.

Again, you can use the Command + F shortcut to find the tag, then bank check right above information technology to brand certain your code was added successfully. You may need to clear your browser cache for everything to appear correctly.

How to Add together Header and Footer Scripts Using a Plugin

Manually adding header and footer scripts isn't your but option. At that place are plugins to assist with these tasks, and some themes and frameworks come with such functionality congenital-in.

For example, if you're using the Genesis Framework, calculation header and footer scripts is only washed through its built-in editor. However, you can use the aforementioned functionality for any theme via a plugin.

This method is advantageous because WordPress normally overwrites your header.php file during updates. Past using a plugin (or some external functionality that mimics such plugins), you lot are guaranteeing less work for yourself. You lot can update WordPress Core without worrying near having to manually re-add your code.

It provides a complimentary fashion to easily add together uncomplicated code to your WordPress site's header or footer. Whether you're trying to add together Google Analytics scripts, Adsense code, or whatever third-party integration code, this plugin can exercise it with just a few clicks.

One time you install and activate the plugin, you can access the JavaScript editor by navigating to Settings > Insert Headers and Footers:

In that location volition exist text fields where yous can add scripts to your website's header, body, and footer. When y'all're done, click on the Save button.

How to Add JavaScript to WordPress Posts and Pages

Instead of incorporating it in the header.php or footer.php files for utilise across your entire website, you tin can also add JavaScript to WordPress posts or pages individually. To practise this, y'all'll demand to:

Add together your JavaScript to one of your WordPress theme files (or create a new i)
Call the file from your mail or page

So, how practise you call your JavaScript file from your post? 1 way is to use the Custom Fields feature as a WordPress JavaScript widget of sorts. In the Cake Editor, click the iii vertical dots to launch the dropdown bill of fare, and then select Options:

At the bottom of the Options menu, under Advanced panels, check the box side by side to Custom fields :

Beneath your post editor, you will at present run across a space where you can add Custom Fields:

Provide a Name for your field. Then, input your JavaScript snippet as the Value. When you're done, click on Add Custom Field to salve your changes.

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

How to Edit Your WordPress Site'south CSS 🖋️

The process of editing your WordPress site's CSS is pretty similar to that of modifying your JavaScript. There are 3 methods yous can use to do so:

Edit your CSS files in the Theme Editor
Apply your theme's congenital-in CSS editor within the WordPress Customizer
Add CSS using a plugin

Which method works best for you will depend on the extent of the editing you plan to do as well as how frequently you intend to make changes.

How to Edit Your WordPress CSS via the Theme Editor

All of the CSS files used for your WordPress site's theme can be plant in the Theme Editor (Appearance > Theme Editor). In the listing on the right, look for the files ending with the .css extension:

Y'all can make your desired changes within the editor. When you're done, click on Update File to salve your changes.

How to Edit Your WordPress CSS via the WordPress Customizer

In improver to the WordPress Theme Editor, you can besides modify your CSS using the WordPress Customizer. To access it, navigate to Appearance > Customize from your WordPress dashboard:

Next, click on Additional CSS at the lesser of the left-hand navigation console:

A code editor volition open where you can add custom CSS:

As you tin encounter, this editor is quite small and mostly intended for minor modifications, rather than extensive rewriting of your site's style. It will likely be easier to carry out large-scale changes in the Theme Editor, or using a plugin.

When you're done adding custom CSS to the Customizer, click on the Publish push button to save your changes.

How to Edit Your WordPress CSS Using a Plugin

If you desire to customize the wait of your site without straight editing your theme files, you can also apply a plugin. This method is particularly useful if you have limited CSS noesis. It's also ideal if y'all plan to make changes to your site's mode regularly, as it makes it easier to organize your additions.

For example, CSS Hero is an intuitive tool that enables y'all to edit all aspects of your site design and style without modifying your theme files:

Information technology'due south a live WordPress Theme editor that lets you shop snapshots of your changes, including different versions, and push them alive. It creates an extra CSS stylesheet that overrides the original i that ships with your theme. Therefore, you lot won't have to worry about causing any permanent damage by editing your CSS files directly.

CSS Hero features include:

Pre-made, editable mode snippets
Google Font and TypeKit integration and back up
A forepart terminate visual editor to preview your changes as you make them

After you download the plugin, y'all can upload and install information technology on your WordPress site the way you would any other. You lot'll just need to enter your license key, which you'll be provided with when you buy your plan.

How to Edit Your WordPress Source Code via FTP 📥

As you might recall from earlier in this post, using the WordPress Theme Editor is but one method of accessing and changing your website's source code. Another is to utilize an FTP client such as FileZilla. These types of tools enable you to connect to your website's server to achieve the files stored there.

This approach involves making changes to your file locally, then re-uploading the modified files to your WordPress hosting surround. This is key if you can't admission your site'south back end, or if you're doing whatever PSD > WordPress work.

Hither's how to get started with FTP in 4 steps.

Pace 1: Locate or Create Your FTP Credentials

First, in order to connect to your server via FTP, you'll need your FTP credentials, including a username, countersign, and hostname. Yous should exist able to find them listed in your hosting account.

If not, you can create your username and password in cPanel under Files > FTP Accounts:

Click on this icon, and so select Add FTP Account:

On the Add FTP Account folio, complete the following:

Add a unique identifier for your FTP username. Your FTP username will be uniqueidentifier@primarydomain.com, so copy/paste information technology to a secure location.
Create a strong countersign. We recommend using the password generator to create a password that scores a 100/100 strength rating. This volition be your FTP password, so copy/paste it to a safe location also.
For the Directory extension, e'er use public_html.
Your Quota should always be Unlimited.

Click on Create FTP Account and you're done! If you accept trouble creating FTP login information, y'all may desire to Google "[your hosting provider] FTP".

Typically, this volition offer at least a few helpful articles and guides. For instance, SiteGround* provides a ton of support in this area:

If yous're unable to find support documentation, you can always reach out to your hosting provider directly for assistance.

Footstep 2: Download an FTP Customer such as FileZilla

In one case y'all have your FTP login credentials squared abroad, the next step is to download an FTP customer such as FileZilla:

This is a gratis FTP solution that enables y'all to transfer files back and forth between your computer and your site'south server. Notwithstanding, at that place are other FTP clients, then feel free to utilise the ane that all-time fits your needs.

Pace 3: Log Into Your Web Hosting Surroundings Through FileZilla

Later FileZilla is finished downloading, open it and enter your FTP hostname, username, and countersign. You should have gathered all of this information in Step i:

If your cPanel lists an IP Accost, yous tin employ that every bit the host besides. After you enter these credentials, click on the Quickconnect button:

It should connect you to your server within a few seconds.

Pace 4: Edit Your Files

Once you lot're logged in, y'all have admission to your WordPress source files and tin make HTML, CSS, PHP, and JS edits as yous see fit. Merely right-click on whatever file and select View/Edit:

When you've fabricated your changes (over again, be careful not to white screen your website), you tin relieve the file. Then FileZilla will automatically re-upload it and supplant the old version.

How to Edit Your WordPress Theme Without Coding 🚫

WordPress is an open up-source platform, making it extremely flexible and powerful. Notwithstanding, we sympathise that, for some, WordPress coding tin be daunting. Fortunately, if yous aren't uncomfortable with manipulating your site's source code, yous can yet make extensive changes.

While you won't be able to change equally much as you can with custom code, there's still a lot you tin practice with the WordPress Customizer. Again, this is located under Appearance > Customize:

In this surface area, you'll encounter a guided method of customizing the WordPress theme you've chosen. Yous can begin with high-level items under Site Identity – which enables you to change your website'southward name, tagline, and icon – and then modify your site's colors, menus, homepage, etc.

However, if you're looking to practise more than than what the Customizer makes available, you can also employ additional plugins. Let's take a look at some of the most helpful ones out in that location.

Plugins for Editing Your WordPress Theme Without Coding

As we mentioned before, in that location are many plugins and tools that can assist you customize the advent of your site without whatsoever coding. Nosotros already highlighted a couple of them in the sections on editing JavaScript and CSS to a higher place.

If you're looking for a visual style editor, a powerful freemium option is the YellowPencil plugin:

This WordPress CSS way editor plugin makes customizing the blueprint of your site quick and easy. You tin make changes to whatsoever folio or theme without coding. Plus, you tin preview the changes in existent-time. There are free and premium versions bachelor.

This plugin is a alive CSS editor for WordPress that features design responsive grids and bespeak-and-click editing functionality that lets you customize with both precision and ease. This is a solid choice if you're using a folio builder such equally Elementor or Beaver Architect, since information technology comes with built-in integration.

Finally, if you want to change more than the fashion and advent of your site, you lot could utilize Ultimate Tweaker:

This premium plugin includes an HTML minifier tool, drag-and-drop interface, custom icons, and more. To get a better idea of the features and functionality, we recommend exploring the plugin demo.

Wrapping Upwardly 🌯

WordPress plugins let you handle many tasks on your website. However, at that place are some cases where it may exist necessary to access and edit your site's source lawmaking.

Equally we discussed in this mail service, the WordPress Theme Editor and FTP are the all-time ways to access the source code of your WordPress website and make changes to its HTML, CSS, PHP, and JavaScript. Alongside the power of seemingly endless plugin choices, this will give you the ability to fully customize everything about your site.

Withal, if the thought of editing WordPress source code is daunting or the Theme Editor isn't quite powerful enough for your needs, we're here to help. At WP Buffs, we offer Care Plans and 24/7 support to aid yous with all your maintenance and customization needs!

Want to give your feedback or join the conversation? Add your comments 🐦 on Twitter.

If you lot enjoyed this article, then you'll really enjoy the 24/seven WordPress website management and support services WP Buffs' has to offer! Partner with the team that offers every aspect of premium WordPress back up services.

From speed optimization services, to unlimited website edits, security, 24/7 support, or even white-label site direction for agencies and freelancers, our expert engineers have your back. Bring us in as role of your team to brand your site Bufftastic! Cheque out our plans

originally on July 17, 2020

Curious most what we do?