alex_aldo / stock.adobe.com
The source code of a website can be a mysterious and intimidating concept for a WordPress beginner.
If you don’t have the most technical skills, you might think that accessing the source code could harm your website or even result in the white screen of death!
While editing source code has its risks, simply finding and accessing it won’t actually make any changes to your website.
What Is Source Code?
When you open an internet browser and view a website, you’re looking at the fully-rendered interpretation of that webpage. Simply put, this is the human version of the page.
But there’s a lot of complex code working underneath that human version. It’s working hard to show you a well-designed website and give you functionality like dropdown menus and hover effects.
This underlying code is what we call the source code and it’s made up of three unique programming languages.
- HTML: HTML is short for Hyper Text Markup Language. It was originally developed by Tim Berners-Lee and his team at the European Organization for Nuclear Research (commonly known as CERN) to act as the foundational architecture of a webpage. Let’s say you want some text to be bold – the webpage must be given specific instructions that tell the browser to make certain text bold. HTML tags wrap around the specified text that needs to be bolded. Imagine you’re building a skyscraper. The HTML is the raw material, the iron and concrete, the construction team builds with.
- CSS: CSS is short for Cascading Style Sheets. These are the guiding codes that tell HTML how to style and color a webpage. Let’s keep going with the skyscraper analogy. The CSS are the detailed blueprints that the construction team follows. They tell the workers what shape, color, and size the materials need to be.
- JavaScript: This is a dynamic computer programming language because it creates real-time effects on a web page. Most motion you see in a dropdown menu or popup that appears on your screen is built using JavaScript – today, it’s everywhere within WordPress sites!
Why Would You Want to Access Source Code?
There are a few reasons why finding your source code might be helpful:
- There’s an error on your site and you want to see exactly what’s going wrong. Finding and checking your source code will help you take a closer look at exactly what’s happening so you can troubleshoot the problem.
- You may want to confirm that a specific plugin is active on your site or that your Google Analytics code has been inserted correctly. This is how you can check!
- Accessing the source code is a way for you to see exactly what’s going on under the hood of any website. You may want to access the source code of your competition or another website you like to see exactly what they have going on.
How To Find The Source Code
Accessing the source code of any website or webpage is actually extremely straightforward!
Simply right-click on any webpage and click View Page Source, Show Page Source, or an option that includes the word “source.” This can vary depending on the browser (Google Chrome, Firefox, Safari, Opera, Internet Explorer, etc.).
In a new tab, the source code for that specific webpage will appear! You can view and click around this source code without worrying about damaging the website.
Using Search to Navigate the Source Code
Now that you’ve found the source code of a webpage, it’s time to use it to your advantage.
Most of the time, the source code will be long and complex, even for a small website. That means your best bet to find something specific is to simply search the source code for a specific keyword or phrase.
- On the keyboard, simultaneously press CTRL+F (on PC) or CMD+F (on Apple) to pull up a webpage search.
- Type in the keyword phrase or specific words you are searching for on that webpage.
- If the words appear in the source code, they will be automatically highlighted so you can find all instances of them.
If I want to find this sentence in the source code, just do a search for “find this sentence” and voila!
Editing Source Code
If you want to take it a step further and make changes to your source code, you’ll need to either access the Editor in the WordPress backend panel or go through File Transfer Protocol (FTP).
That will give you access to everything from theme files to plugin code. You can make any changes you want, but be sure you make a full backup of your website before making any major changes just in case something goes wrong!
