I need custom HTML CSS code

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

WordPress plugins help expand the functionality of your website and do advanced digital work with minimal effort. However, knowing how to edit HTML in WordPress, as well as your website's other source code, comes in handy in a variety of situations.

Let's say your website is attacked with malicious malware or you update a plugin and it crashes your website. Maybe you just want to make only some advanced adjustments. In any of these cases, coding in WordPress can be the next step. Fortunately, there are many ways you can go about it.

In this post, we'll walk you through the different ways you can access and edit the source code of your WordPress website, and how you can change your WordPress theme without coding. Let's get started!

Also read: Editing WordPress Footer - Step-by-Step Instructions

Why it is important to know how to edit your WordPress source code πŸ‘ˆπŸ»

By default, WordPress is an extremely intuitive and easy-to-use platform. Thanks to themes and plugins, there are many ways to customize and change your website without touching a line of code.

Technically, you don't need to access any of your website files or code to have a fully functional and well-designed website. The WordPress dashboard, plugins, and themes make customizing and personalizing your website quick and easy.

However, there are times when you want to implement more control and make advanced customizations. Perhaps the change you want to make is not an option for the design or the plugins you use.

Another possibility is your website crashing or some other error preventing you from accessing your admin dashboard. Chances are you'll need to edit your WordPress source code to fix the problem.

In such cases, it is helpful to know how to edit HTML in WordPress and how to safely and effectively access and modify other source code, including PHP, CSS, and JavaScript. Put simply, learning some basic WordPress coding techniques will enable you to have more control and flexibility in the design, management, and maintenance of your WordPress site.

How to edit HTML in WordPress πŸ’»

First things first, let's discuss how to access your HTML code in WordPress. Be aware that making changes to your website's code always involves some risk. Editing your HTML is relatively safe compared to other techniques we'll discuss in this post, but it's still wise to proceed with caution and back up first.

How to edit HTML in the WordPress Classic Editor

If you want to add or edit the HTML of a WordPress page or post, you don't really need access to your website's source code. In the classic editor, you only have to switch from the visual editor to the text editor on the backend. This shows you how the HTML works behind the scenes:

From the text editor, you can access, change, and update the HTML code of any page or post with just a few clicks. You can view your changes at any time by switching back to the visual editor. When you're done, make sure to save your post or page.

Also read: OptimizePress 3 Test & Experience

How to edit HTML in the WordPress block editor (Gutenberg)

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. However, you also have several options for editing your HTML, including changes to the entire page or post, or to individual blocks.

To edit the HTML of the entire page or post, click the three vertical dots in the top right corner of the editor, then select Code Editor:

This WordPress HTML editor opens. To switch from the visual editor to the text editor within a certain block, click the three vertical dots in the block toolbar and then select Edit as HTML.

Another way to add HTML to a page or post is to use a custom HTML block:

You can write your HTML code right in the block and then click Preview to see how it will look on the front end.

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

How to edit HTML for your homepage in WordPress

How about editing the HTML on your homepage? There are topics for which the homepage functions as a separate page. It is therefore the same process of editing HTML as described above. Simply select the appropriate page from the list on your dashboard:

You can also click Edit Page in the top management bar on your home page to go to the Classic or Block Editor.

If neither of these two options work for editing the HTML on your homepage, you might be using a page builder or a theme with a built-in homepage editor. If so, you can refer to the documentation for the relevant tool.

Also read: Create WordPress line break [manually with HTML]

How to edit HTML in a WordPress widget

Finally, you might want to add HTML to your WordPress sidebar or footer. Many WordPress themes also use the widget section to control the content on your website's homepage.

You can make these adjustments to the homepage, header and footer using a custom HTML widget:

Just navigate to Appearance> Widgets, add the Custom HTML widget to your sidebar or footer, and edit it however you want. Click the blue Save button to publish it on your website.

Get started editing the source code of your WordPress theme 🏁

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

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

  • Via the WordPress Theme Editor, which allows you to edit WordPress source code files directly in your dashboard with any web browser.
  • Via the File Transfer Protocol (FTP), where you edit WordPress source code files locally and then upload your changes to your WordPress hosting environment.

We'll walk you through each of these methods in a nutshell, starting with the WordPress Theme Editor. However, there are two steps we recommend before you get started.

The first is to make a backup of your website. This will ensure that you have an updated version of your content and settings that you can refer to in case something goes wrong while editing your source code.

The second is to create a sub-topic. Whenever you modify your WordPress theme, it is best to make your changes on a sub-theme. Otherwise, your changes will be overwritten the next time you update your topic.

Once you have completed these steps, you are ready to start working. First, let's see how to edit your WordPress theme right from your dashboard.

How to edit your WordPress source code using the theme editor 🎯

In case you are not familiar with WordPress, an integrated editor is included with which you can edit the files of your topic online. The Theme Editor is where you can access the PHP, CSS, JavaScript, and any other development-related files that make up your theme. Here's how to do it.

If your WordPress site is still up and running and you can access the backend, you can find the source code of your site under Appearance> Theme Editor:

This editing area is where you can make any changes to the design and structure of your topic that you think fit.

If you have multiple themes installed or are using an adult / child theme combination, you can switch between themes in the upper right corner of the editor.

To select certain topic files for editing, you can choose from the list to the right of the editor.

The exact files available here will depend on your subject, but at least you should see them:

  • style.css: This is your stylesheet, which includes many design-related features like the fonts and color scheme of your theme.
  • functions.php: The functions.php file of your topic contains PHP code that modifies the standard WordPress functions.

When you're done editing your WordPress source code in the theme editor, make sure to save your changes. To do this, simply click the Update file button at the bottom of the screen.

WordPress will stop you from saving your changes if it finds that there are bugs in the code. This is part of what makes using the theme editor a little more secure than editing your WordPress code via FTP, which we will get into later.

Also read: WordPress Customizer loads and doesn't work

What to do if your theme editor is missing

If the theme editor doesn't appear under Appearance, your theme might work a little differently. This does not necessarily mean that you cannot edit the topic files directly. You just have to know where to look.

Check to see if your website is using a WordPress themed code editor that is somewhere else on your dashboard. Alternatively, the use of the theme editor may have been disabled for your site. For example, some security plugins hide this option to β€œharden” WordPress and make it harder for attackers to compromise your website.

There could also be other reasons why your WordPress theme editor is missing or inaccessible. We recommend reaching out to other members of the WordPress community, especially those who have access to the themes or plugins you are using, to find out if there is anything unique in your environment that hides this feature.

How to edit your WordPress JavaScript files ✍🏻

Before you can use JavaScript anywhere on your WordPress site, you need a file with your JavaScript code. Most, if not all, of the topics come with a few JavaScript files that may be hosted elsewhere and "accessed" by code in your Header.php, Footer.php, or other template files.

Writing your own JavaScript gives you access to your work in WordPress, where you can see a list of your files. You can open any of these files and make your desired changes directly using the theme editor. All JavaScript files end with the .js extension:

If you're adding JavaScript using a third-party plugin, you're simply going to an external file hosted elsewhere. To use the written JavaScript you need to invoke the file wherever you want to use it.

You can invoke JavaScript by adding the following script (which will direct your page to the appropriate file location) anywhere you want the code to load:

The best place to access your JavaScript file depends on how you plan to use the script. For example, it can be implemented multiple times on your website, or only once.

How to add JavaScript to your WordPress header or footer

If you want to make changes to the header or footer of your website, including using JavaScript in multiple places, you can do so in your topic's header.php and footer.php files.

Many third-party tools require you to put code in the header of your website. In a nutshell, this means that you are working with the header.php file (which should be listed to the right of your topic editor), specifically the area enclosed by the tags:

When adding JavaScript to your header file, make sure that the code is placed somewhere between these two tags (after or below the opening tag and above or before the closing tag).

The day can be hard to find. It can be difficult to find it. If you're having trouble finding it, press Command (or Control) + F after clicking in Notepad. It can then be found simply by typing "head" in the search bar.

You can edit the footer in the same way - just select your footer.php file instead of header.php.

After you've saved your changes, the last step is to double-check that your code has been added. To do this, go to your homepage and look at the source code.

Again, you can use the keyboard shortcut Command + F to find the tag and then see right away to see if your code was added successfully. You may need to clear your browser's cache for everything to show up correctly.

Also read: What are Trackbacks and Pingbacks?

How to add header and footer scripts with a plugin

Adding header and footer scripts manually is not your only option. There are plugins to help you with these tasks, and some themes and frameworks come with such features.

For example, if you are using the Genesis Framework, adding header and footer scripts is easy via the integrated editor. However, you can use the same functionality for each theme via a plugin.

This method is beneficial because WordPress will usually overwrite your header.php file when it updates. If you use a plugin (or some external functionality that mimics such plugins) you guarantee yourself less work. You can update the WordPress core without worrying about manually re-adding your code.

If this solution sounds appealing, we recommend the Insert Headers and Footers plug-in.

It provides a free way to easily add simple code to the header or footer of your WordPress site. Whether you're trying to add Google Analytics scripts, Adsense code, or third-party integration code, this plugin can do it all with just a few clicks.

Once you've installed and activated the plugin, you can access the JavaScript editor by navigating to Settings> Insert Insert Headers and Footers:

There will be text boxes where you can add scripts to the header, body and footer of your website. When you're done, click the Save button.

How to Add JavaScript to WordPress Posts and Pages

Not only can it be incorporated into the header.php or footer.php files for use across your entire website, but you can also insert JavaScript into WordPress posts or individual pages. To do this, you need to do this:

  • Add your JavaScript to one of your WordPress theme files (or create a new one)
  • Access the file from your post or page

So how do you access your JavaScript file from within your post? One possibility is to use the Custom Fields function as a kind of WordPress JavaScript widget. In the Block Editor, click the three vertical dots to bring up the drop-down menu, then select Options:

At the bottom of the Options menu under Advanced Areas, check the box next to Custom Fields.

Below your post editor you will now see an area where you can add custom fields:

Enter a name for your field. Then enter your JavaScript snippet as a value. When you're done, click Add Custom Field to save your changes.

Now you can use your custom JavaScript anywhere on the page. To do this, you need to use the template tag which will customize the theme you are using. You can also choose to use a plugin that will manage custom fields on your behalf.

How to edit the CSS of your WordPress site πŸ–‹οΈ

The process of editing the CSS of your WordPress site is pretty similar to changing your JavaScript. There are three methods you can use to:

  • Edit your CSS files in the theme editor.
  • Use the built-in CSS editor of your theme within the WordPress Customizer
  • Add CSS with a plugin

Which method works best for you depends on how extensive the editing you plan to do and how often you want to make changes.

How to edit your WordPress CSS via the theme editor

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

You can make your changes within the editor. When you're done, click Update File to save your changes.

How to edit your WordPress CSS using the WordPress Customizer

In addition to the WordPress Theme Editor, you can also modify your CSS with the WordPress Customizer. It can be accessed via the WordPress dashboard under Appearance> Customize:

Then click Additional CSS in the left navigation bar at the bottom:

A code editor will open where you can add custom CSS.

As you can see, this editor is quite small and mostly intended for minor modifications rather than extensive rewriting of the style of your website. It will likely be easier to make large changes in the theme editor or with a plugin.

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

How to edit your WordPress CSS with a plugin

If you want to customize the look of your website without editing your theme files directly, you can also use a plugin. This method is especially useful if you have limited knowledge of CSS. It's also ideal if you plan to make regular changes to the style of your website as it makes it easier to organize your additions.

For example, CSS Hero is an intuitive tool that allows you to edit all aspects of the design and style of your website without changing your theme files:

It's a live editor for WordPress themes that allows you to save snapshots of your changes, including different versions, and broadcast them live. It creates an additional CSS stylesheet that overwrites the original stylesheet that came with your theme. Hence, you don't have to worry about permanent damage by editing your CSS files directly.

The CSS Hero features include:

  • Pre-made, editable style snippets
  • Integration and support of Google Fonts and TypeKit
  • A visual front-end editor to preview your changes as you make them

To get started, you can try a live demo. When you're ready to buy CSS Hero, you have several pricing plans to choose from.

After you've downloaded the plugin, you can upload it and install it on your WordPress site like you would otherwise. All you need to do is enter your license key that you received when you purchase your plan.

How to edit your WordPress source code via FTP πŸ“₯

As you may recall earlier in this post, using the WordPress theme editor is just one method of accessing and modifying your website's source code. Another is to use an FTP client like FileZilla. These types of tools allow you to connect to your website's server to access the files stored there.

With this approach, you make changes to your file locally and then upload the changed files again to your WordPress hosting environment. This is key when you can't access your website's backend or when you're doing PSD> WordPress work.

Here's how to get started with FTP in four easy steps.

Also read: The 6 best slider plugins for WordPress

Step 1: Find or create FTP access data

To connect to your server via FTP, you first need your FTP access information, including a username, password and host name. You should find these listed in your hosting account.

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

Click this icon and then select Add FTP Account:

On the Add FTP Account page, do the following:

  • Add a unique identifier for your FTP username. Your FTP username will be [email protected], so copy / paste it somewhere safe.
  • Create a strong password. We recommend using the password generator to create a password that will receive a 100/100 strength rating. It will be your FTP password, so copy / paste it to a safe place as well.
  • Always use public_html for the directory extension.
  • Your quota should always be unlimited.

Click Create FTP Account and you're done! If you're having trouble creating the FTP credentials, you can google "[your hosting provider] FTP".

If you can't find support documentation, you can always contact your hosting provider directly for help.

Step 2: Load an FTP client like FileZilla

Once you've got your FTP login credentials in order, the next step is to download an FTP client like FileZilla.

This is a free FTP solution that allows you to transfer files back and forth between your computer and your website's server. However, there are other FTP clients out there too, so don't hesitate to use the one that best suits your needs.

Step 3: Log into your web hosting environment via FileZilla

After FileZilla finishes downloading, open it and enter your FTP host name, username and password. You should have gathered all of this information in Step 1:

If your cPanel lists an IP address, you can use that as a host too. After you have entered these login data, click the Quickconnect button:

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

Step 4: edit your files

Once logged in, you'll have access to your WordPress source files and be able to do HTML, CSS, PHP, and JS edits as you see fit. Just right click on any file and choose View / Edit:

When you've made your changes (again, make sure your website doesn't appear with a white screen), you're ready to save the file. Then FileZilla will automatically upload them again and replace the old version.

How to edit your WordPress theme without coding 🚫

WordPress is an open source platform, which makes it extremely flexible and powerful. However, we understand that coding WordPress can be daunting for some. Fortunately, if you are comfortable manipulating your website's source code, you can still make extensive changes.

While you won't be able to change as much as you would with custom code, there is still a lot you can do with the WordPress Customizer. You can also find this under Design> Customizer.

In this section you will see instructions on how to customize the WordPress theme you have chosen. You can start with high-level items under Site Identity - which allows you to change your website's name, tagline, and icon - and then change your website's colors, menus, home page, and so on.

However, if you want to do more than what the customizer provides, you can also use additional plugins. Let's take a look at some of the most helpful plugins out there.

Also read: Edit WordPress Headers

Plugins for editing your WordPress theme without coding

As we mentioned earlier, there are plenty of plugins and tools that you can use to customize the look and feel of your website without any coding. We've already highlighted some of them in the sections on editing JavaScript and CSS above.

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

With this WordPress CSS style editor plugin, you can customize the design of your website quickly and easily. You can make changes to any page or topic without programming. You can also preview the changes in real time. There are free and premium versions available.

Another option to consider is the Microthemer WordPress CSS editor:

This plugin is a live CSS editor for WordPress that has design-oriented grids and point-and-click editing features that allow you to precisely and easily customize your website. This is a solid option if you're using a page builder like Elementor or Beaver Builder as it comes with built-in integration.

If you want to do more than just change the style and look of your website, you can use 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.

Also read: Thrive Architect review & experience report

Conclusion 🌯

WordPress plugins allow you to do a lot of things on your website. However, there are some instances when it may be necessary to access and edit your website's source code.

As we discussed in this post, the WordPress Theme Editor and FTP are the best ways to access the source code of your WordPress website and make changes to HTML, CSS, PHP, and JavaScript. Aside from the power of the seemingly endless plugin choices, this gives you the ability to fully customize everything about your website.