How To Edit Wordpress Code

WordPress plugins help with extending the functionality of your site & performing advanced digital work with minimal effort. However, knowing how to edit HTML in WordPress, as well as your site’s other source code, comes in handy in a variety of situations. 


You can write your HTML code directly in the blochồng, then click on PReview to lớn see how it will look on the front end:

What about editing the HTML on your homepage? In some themes, the homepage acts as its own individual page. Therefore, the process of editing its HTML is the same as that described above. Simply choose the relevant page from the danh sách in your dashboard:

You can also click on Edit Page in the top admin bar from your homepage to lớn access the Classic or Blochồng Editor:

If neither of those options works 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 for the relevant tool.

Bạn đang xem: How to edit wordpress code

Finally, you may wish to add HTML in your WordPress sidebar or footer. Many WordPress themes also use the widget section to control the content on your website’s homepage.

Simply navigate to Appearance > Widgets, add the Custom HTML widget lớn your sidebar or footer, & edit it as you please. Cliông xã on the xanh Save button to publish it on your site.

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

If you want to edit these components (or the mặc định template in WordPress), there are two main ways to lớn access the theme files:

Using the WordPress Theme Editor, which enables you lớn directly edit WordPress source code files in your dashboard using any web browser.Via File Transfer Protocol (FTP), where you edit WordPress source code files locally, then upload your changes to your WordPress hosting environment.

We’ll walk you through how khổng lồ go about each of these methods shortly, starting with the WordPress Theme Editor. However, there are two steps we recommend taking before you get started.

The first is khổng lồ baông chồng up your site. This will ensure you have sầu an updated version of your content & settings khổng lồ roll baông xã khổng lồ in case anything gets messed up while you’re editing your source code.

The second is khổng lồ create a child theme. When you’re modifying your WordPress theme, best practice is lớn make your changes to lớn a child theme. Otherwise, the next time you update your theme, your changes will be overwritten.

Once you have taken these steps, you’re ready lớn get started. Let’s first look at how to lớn edit your WordPress theme directly from your dashboard.

In case you’re unfamiliar, WordPress ships with a built-in editor that enables you khổng lồ modify your theme’s files online. In the Theme Editor, you can access the PHPhường, CSS, JavaScript, và all other development-related files that Cosplay your theme. Here’s how to lớn vì so.

If your WordPress site is still up & running & you’re able to lớn access the baông xã end, you can find your site’s source code under Appearance > Theme Editor:

In this editing area, you can make any changes you see fit lớn the design and structure of your theme:

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

style.css: This is your stylesheet, which contains many design-related features such as your theme’s fonts và color scheme.functions.php: Your theme’s functions file includes PHP code that modifies WordPress’ mặc định features.

Once you’re done editing your WordPress source code in the Theme Editor, make sure lớn save your changes. Simply cliông xã on the Update File button at the bottom of the screen to lớn vày so.

WordPress will prsự kiện 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 code via FTP.., which we’ll discuss later.

If the Theme Editor doesn’t appear under Appearance, your theme may be functioning a bit differently. This doesn’t necessarily mean you can’t edit the theme files directly. You just need khổng lồ know where to look.

Cheông chồng khổng lồ see 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 option khổng lồ ‘harden’ WordPress and make it more difficult for attackers lớn compromise your site.

There may also be other reasons why your WordPress theme editor is missing or inaccessible. We recommover reaching out khổng lồ others in the WordPress community, especially those with access to the themes or plugins you use, lớn see if there’s something chất lượng to your environment that hides this feature.

Before you can use JavaScript anywhere on your WordPress site, you’ll need to have sầu a tệp tin containing your JavaScript code. Most, if not all, themes ship with a couple of JavaScript files, which may be hosted elsewhere and ‘called’ by code in your header.php, footer.php, or other template files.

If you’re writing your own JavaScript, you’ll have sầu access to lớn your work within WordPress, where you can see a menu of your files. You can open up any of them and make your desired changes directly using the Theme Editor. All JavaScript files kết thúc in the .js extension:

If you’re adding JavaScript using a third-các buổi party plugin, then you’re simply making a Call lớn an external file that is hosted elsewhere. To use the JavaScript that’s written, you’ll need to Hotline the file wherever you want lớn use it.

You can điện thoại tư vấn JavaScript by putting the following script (which directs your page to the location of the relevant file) anywhere you want the code to load:

The best place lớn Call your JavaScript tệp tin depends on how you want to lớn use the script. For example, you can implement it multiple times across your site, or just once.

If you want khổng lồ make changes khổng lồ the header or footer across your trang web, including using JavaScript in multiple places, you can vày so in the header.php & footer.php files of your theme.

When you’re adding JavaScript khổng lồ your header file, be sure to lớn place the code somewhere between these two tags (after or below the opening tag and above or before the closing tag).

The tag can be hard to lớn find. If you’re having trouble locating it, press the Command (or Control) + F keys after clicking in the editor. Then you can locate it by simply typing “head” inlớn the search bar.

Here’s an example of how we added both the Google Tag Manager code & an Ahrefs verification code just above sầu the tag:

Once you save your changes, the last step is lớn double-check to lớn make sure your code has been added. To vì this, go to lớn your homepage & view the source code.

Again, you can use the Command + F shortcut lớn find the tag, then kiểm tra right above it lớn make sure your code was added successfully. You may need khổng lồ clear your browser cabít for everything to appear correctly.

Xem thêm: Download Html/Css Website Inspector Pro Apk, Html/Css Website Inspector Pro

Manually adding header & footer scripts isn’t your only option. There are plugins lớn assist with these tasks, và some themes và frameworks come with such functionality built-in.

For instance, if you’re using the Genesis Framework, adding header and footer scripts is simply done through its built-in editor. However, you can utilize the same functionality for any theme via a plugin.

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

It provides a không tính tiền way khổng lồ easily add simple code to your WordPress site’s header or footer. Whether you’re trying to add Google Analytics scripts, Adsense code, or any third-buổi tiệc ngọt integration code, this plugin can bởi vì it with just a few clicks.

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

There will be text fields where you can add scripts to lớn your website’s header, body toàn thân, and footer. When you’re done, click on the Save button.

Instead of incorporating it in the header.php or footer.php files for use across your entire trang web, you can also add JavaScript lớn WordPress posts or pages individually. To vày this, you’ll need to:

Add your JavaScript lớn one of your WordPress theme files (or create a new one)Gọi the file from your post or page

So, how vị you Call your JavaScript file from your post? One way is to use the Custom Fields feature as a WordPress JavaScript widget of sorts. In the Bloông xã Editor, click the three vertical dots lớn launch the dropdown menu, then select Options:

Provide a Name for your field. Then, đầu vào your JavaScript snippet as the Value. When you’re done, click on Add Custom Field to save sầu your changes.

Now, you can use your custom JavaScript anywhere on the page. To bởi vì so, you’ll need lớn 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.

The process of editing your WordPress site’s CSS is pretty similar to lớn that of modifying your JavaScript. There are three methods you can use lớn vị so:

Edit your CSS files in the Theme EditorUse your theme’s built-in CSS editor within the WordPress CustomizerAdd CSS using a plugin

Which method works best for you will depend on the extent of the editing you plan khổng lồ bởi as well as how frequently you intkết thúc to make changes.

All of the CSS files used for your WordPress site’s theme can be found in the Theme Editor (Appearance > Theme Editor). In the các mục on the right, look for the files ending with the .css extension:

You can make your desired changes within the editor. When you’re done, click on Update File khổng lồ save your changes.

In addition khổng lồ the WordPress Theme Editor, you can also modify your CSS using the WordPress Customizer. To access it, navigate khổng lồ Appearance > Customize from your WordPress dashboard:

As you can see, this editor is quite small & mostly intended for minor modifications, rather than extensive sầu rewriting of your site’s style. It will likely be easier lớn carry out large-scale changes in the Theme Editor, or using a plugin.

When you’re done adding custom CSS khổng lồ the Customizer, clichồng on the Publish button lớn save sầu your changes.

If you want to lớn customize the look of your site without directly editing your theme files, you can also use a plugin. This method is particularly useful if you have sầu limited CSS knowledge. It’s also ideal if you plan lớn make changes to your site’s style regularly, as it makes it easier khổng lồ organize your additions.

For example, CSS Hero is an intuitive tool that enables you lớn edit all aspects of your site kiến thiết and style without modifying your theme files:

It’s a live WordPress Theme editor that lets you store snapshots of your changes, including different versions, and push them live. It creates an extra CSS stylesheet that overrides the original one that ships with your theme. Therefore, you won’t have to lớn worry about causing any permanent damage by editing your CSS files directly.

Pre-made, editable style snippetsGoogle Font & TypeKit integration và supportA front over visual editor to lớn preview your changes as you make them

To get started, you can try a live sầu demo. If you’re ready khổng lồ purchase CSS Hero, you have multiple pricing plans to choose from.

After you download the plugin, you can upload & install it on your WordPress site the way you would any other. You’ll just need lớn enter your license key, which you’ll be provided with when you purchase your plan.

As you might ređiện thoại tư vấn from earlier in this post, using the WordPress Theme Editor is just one method of accessing & changing your website’s source code. Another is khổng lồ use an FTPhường client such as FileZilla. These types of tools enable you to connect to your website’s server to lớn reach the files stored there.

This approach involves making changes to your tệp tin locally, then re-uploading the modified files lớn your WordPress hosting environment. This is key if you can’t access your site’s bachồng end, or if you’re doing any PSD > WordPress work.

First, in order to connect to your hệ thống via FTPhường, you’ll need your FTP. credentials, including a username, password, and hostname. You should be able to find them listed in your hosting account.

primarydomain, so copy/paste it to lớn a secure location.Create a strong password. We recommkết thúc using the password generator to create a password that scores a 100/100 strength rating. This will be your FTP. password, so copy/paste it khổng lồ a safe location as well.For the Directory extension, always use public_html.Your Quota should always be Unlimited.

Clichồng on Create FTPhường. Account and you’re done! If you have sầu trouble creating FTPhường login information, you may want lớn Google “ FTP”.

Typically, this will offer at least a few helpful articles và guides. For instance, SiteGround provides a ton of support in this area:

If you’re unable to find tư vấn documentation, you can always reach out to lớn your hosting provider directly for assistance.

Once you have your FTP.. login credentials squared away, the next step is to lớn tải về an FTPhường client such as FileZilla:

This is a free FTPhường solution that enables you to lớn transfer files bachồng và forth between your computer and your site’s hệ thống. However, there are other FTP clients, so feel không lấy phí to use the one that best fits your needs.

After FileZilla is finished downloading, open it and enter your FTP.. hostname, username, và password. You should have gathered all of this information in Step 1:

If your cPanel lists an IPhường Address, you can use that as the host as well. After you enter these credentials, cliông chồng on the Quickconnect button:

Once you’re logged in, you have sầu access to lớn your WordPress source files và can make HTML, CSS, PHP., & JS edits as you see fit. Simply right-click on any tệp tin and select View/Edit:

When you’ve made your changes (again, be careful not khổng lồ Trắng screen your website), you can save the file. Then FileZilla will automatically re-upload it và replace the old version.

WordPress is an open-source platkhung, making it extremely flexible & powerful. However, we underst& that, for some, WordPress coding can be daunting. Fortunately, if you aren’t uncomfortable with manipulating your site’s source code, you can still make extensive changes.