Edit and View Source Code of WordPress

Last updated on June 26th, 2022 at 11:41 am

Viewing the source code of your WordPress site is an excellent way to better understand how your site works and what are the code modules and scripts that are used for its creation. At some point it is necessary to understand better the code structure of your site. Let’s have a look at the easiest three methods of viewing a WordPress site’s source code.

View the source code of my WordPress site from a browser

This is the easiest way to check the source code of your site. If you’re using one of the most popular web browsers such as Chrome, Firefox, Safari or Internet Explorer, do the following to inspect your site’s source code.

1. Using your favorite Internet browser, open the page that you want to check the source code for. I will use GoDaddy’s home page for this tutorial, but you can do this for your own WordPress site too.

2. Right-click anywhere on the page so that you can get the option View Page Source Code and click on it. Note that the wording for this option is different with the different browsers – it can be just View source or something similar.

3. A new tab will open containing the source code of that specific page of your site.

View the source code of my WordPress site from Editor in WP Dashboard

Viewing the source code from the browser is useful if you need to have a look at the code of a specific page of your WordPress site. However, if you want to inspect the source code of every PHP module of your site such as header.php or page.php, you can do so by navigating to WP Dashboard > Appearance > Editor. Note that the Editor option’s location may be different depending on the theme you use for your site.

To access the source code of a standard WordPress theme such as Twenty Seventeen, do the following.

1. Log in to you WordPress site.
2. Click on Themes > Editor.

3. Select the php module that you’re interested in in order to check or edit its content.

View the source code of my WordPress site from File Manager in cPanel

The steps are as follows.

1. Access your cPanel account.
2. Open File Manager and navigate to the installation folder of your WordPress site.
3. Open the wp-content folder.
4. Open the themes folder.
5. Open the folder of your current theme for the site.

The various PHP modules can be found here. To open a specific PHP module such as header.php, right-click on the file and select View or Edit.

View WordPress source code from an FTP client (FileZilla)

If you have access to the hosting account where your site’s files reside, you can go ahead and connect to it from an FTP client such as FileZilla. Depending on the default installation directory, once connected to the hosting server, you can find the PHP modules containing the source code of your WordPress site in public_html > wp-content > themes > your-theme.

1. Connect to your hosting account with your preferred FTP client. I used FileZilla for this.

2. Navigate to public_html > wp-content > themes > your-theme.
3. Find the needed PHP module and right-click on in for options such as Download, Edit, etc.

Author: wpbackend

Content creator at wpbackend.com

Leave a Reply

Your email address will not be published. Required fields are marked *