How to open source code in wordpress

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.

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.

Further Reading:

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.

Our team at WP Buffs helps website owners agency partners and freelancer partners fully get acquainted with their site’s source code. Whether you need us to manage 1 website or support 1000 client sites, we’ve got your back.

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.

bold-html-source-code-tags

  • CSS: CSS is short for Cascading Style Sheets. These are the guiding code that tells the 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.

css-source-code

  • 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!

javascript-source-code

Why Would You Want to Access Source Code?

There are a few reasons why finding your source code might be helpful:

  1. 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.
  2. 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!

google-analytics-tracking-code

  1. 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 per 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.

wp-buffs-homepage-source-code

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.

  1. On the keyboard, simultaneously press CTRL+F (on PC) or CMD+F (on Apple) to pull up a webpage search.
  2. Type in the keyword phrase or specific words you are searching for on that webpage.
  3. 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!

find-the-sentence

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!

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

SaveSave

Written by Jane