How to Open the Source Code of a Website

There are plenty of times when you may want to open up the source code of a website. Maybe you’re working with a new CMS or just trying to get into website development. It can be very useful in order to better understand how everything works and sometimes it can be fun too. There’s one major problem though: how the heck do you do that?

A website is the most important asset of a business. When you are creating a website, it helps if you know how to modify the source code, so that you can fix technical issues and make the site run faster. This article will shed light on some basic steps for opening the source code of a website.

Chrome, Firefox, Edge, and Internet Explorer

  1. Open your web browser. The process for viewing source code on Chrome, Firefox, Microsoft Edge, and Internet Explorer is the same.
  2. Navigate to a webpage. It should be a page whose source code you wish to view.
  3. Right-click the page. If you’re using a Mac computer with a one-button mouse, you can hold down Control and click instead. If you are on a laptop with a trackpad, you can use two fingers to click the page instead. This will invoke a drop-down menu.
    • Don’t right-click a link or a photo when doing this or else the wrong menu will appear.
  4. Click View page source or View Source. Doing so will display your browser’s source code in a new window or at the bottom of the current window.
    • You’ll see View page source for Chrome and Firefox, and View Source for Microsoft Edge and Internet Explorer.
    • You can also press Ctrl+U (PC) or ⌥ Option+⌘ Command+U (Mac) to display the source code.

Viewing the Source Code of a Webpage

Nearly every webpage you come across uses HTML to structure and display HTML pages. You can inspect the source code of any webpage by using a web browser like Firefox or Chrome. On Firefox, navigate to the “Tools” menu item in the top menu and click on “Web Developer/Page Source” like so:

Gif of how to inspect source code using Firefox

On Firefox, you can also use the keyboard shortcut Command-U to view the source code of a webpage.

On Chrome, the process is very similar. Navigate to the top menu item “View” and click on “Developer/View Source.” You can also use the keyboard shortcut Option-Command-U.

Try inspecting the source code of the demo website that we will build in this tutorial series. You should receive a page with many more HTML tags than our example above. Don’t be alarmed if it seems overwhelming. By the end of this tutorial series, you should have a better understanding of how to interpret HTML source code and how to use HTML to build and customize your own websites.

Note: As mentioned above, you can inspect the source code of any webpage using tools from the Firefox or Chrome web browser. Try inspecting the code of a few of your favorite websites to get a sense of the underlying code that structures web documents. Though the source code of these sites will likely contain more languages than HTML, learning HTML first will help prepare you to learn additional languages and frameworks for creating websites later on if you wish.

You should now have a general understanding of the format of an HTML document and know how to inspect HTML source code using a browser tool. To better understand how HTML works, let’s inspect its key components. In the next tutorial, we will learn more about HTML elements, the building blocks that are used to create HTML documents.

  1. Visit the website which you want to view it’s source code.
  2. Click inside the address bar and append view-source: before the url of the website.
  3. Click the send button and the page will load with the source code of the file.

NB: Even though I used Chrome’s mobile browser, the method is the same in all the major browsers.

How to Edit WordPress Source Code Files?

WordPress source code files

WordPress is known for its ease of use and customizability right out of the box. A person with no coding experience can set up a WordPress site in minutes, it’s that simple! Despite the functionality that it offers, there may be times when you need to access the source code of your site. It could be to make your plugins compatible with installed themes, debugging or making customizations beyond those offered by themes and plugins. So we are going to go over the steps to follow to make edits to your WordPress source code files.

What does WordPress run on?

WordPress is a PHP and MySQL based free and open source content management system. Mostly used for blogging, it can be used to run almost any type of website. Even multi-billion dollar companies like Sony Music use WordPress to power their sites.

What makes WordPress truly the best is the plugin and template add-on style simplicity when it comes to adding extra functionality. Powering over 30 percent of the top 10 million sites, WordPress is the most popular content management system out there.

WordPress is written mostly in PHP but HTML, CSS, and JavaScript are used too. Every WordPress site has a theme and this theme is powered by HTML, CSS, and JavaScript. So when we say ‘making changes to the source code of a WordPress site’, we mean editing PHP, HTML, CSS. Being able to access and edit these files will give you complete control over your WordPress site.

Making a backup:

The changes being made to your WordPress source code files can break your site if you make a mistake. Hence, always make a backup before you edit any files. In case you make any mistake, you can simply replace the files with your backup. You can use one of the many backup plugins like UpdraftPlus or simply copy over the files from your FTP client.

How to Edit WordPress Source Code Files?

Here is a video to help you understand the process step by step.
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Editing HTML:

Accessing the HTML of your WordPress site is pretty straight forward. If you wish to edit posts on your WordPress site, you can simply access the HTML by switching from the Visual editor to the Text editor. You can make changes and update the post.

Should you need to edit the HTML of your homepage, you can do so from the Appearance tab in your Dashboard. Under Appearance choose Widgets and pick ‘Manage with Live Preview’ to view your homepage edits in real time. 

Editing PHP and CSS:

You can access the PHP and CSS WordPress source code files through the Appearance Editor or by using an FTP client. Inside your WordPress dashboard, you can access the Editor under Appearance.

You can access different theme files you’ve installed from the Editor. Navigate to the file you need to edit and after making all the changes to your WordPress source code files, click on ‘Update File’. The changes are then live.

File Transfer Protocol (FileZilla):

You can use a file transfer protocol client to connect to your WordPress server and make changes. FileZilla and Cyberduck are two opensource clients that you can download and install. You will also be needing FTP login credentials for your site. Web hosting providers usually send this information when you sign up for a server. If you don’t have your FTP credentials, you’ll have to contact your hosting provider.

Using FileZilla FTP client, first connect to your WordPress server: You need to give the site address, username, and password to log in. The default port for FTP servers is 21. Next, click on Quickconnect.

And you’re in. You can navigate through the files on your server from this window.

When you find the file you need to edit, right-click and choose View/Edit. This downloads that file locally on your machine. FileZilla lets you choose your own program to open the file with. So you can configure FileZilla to open your WordPress files with an editor or IDE as well.

After you’ve made all the necessary changes, when you close the file, FileZilla uploads the file back to the server automatically. If you’ve downloaded the file instead of choosing ‘View/Edit’ you will have to upload the file manually for the changes to take effect.

So these are the two ways you can access and edit WordPress source code files. Doing this gives you complete control over your site. Between this and the thousands of plugins and themes available, you can make your WordPress site do what you wish.

Conclusion

I love the internet, but there’s no information regarding how to get into a website’s source code – something that I find completely fascinating. It’s not difficult to learn, but there are little nuances that makes it hard for me without help. Having said that, this article will tell you everything you need to know about opening the source code of any website

0 Comments

No Comment.