First, before you make any changes to the backend files like updating the css, modifying the theme or plugin files, it is important to take a backup. If you don’t have a backup solution yet, here is a post with step-by-step instructions on setting up Updraft Plus.
What theme are you using?
Do you know which theme you are currently using? If not, login to WordPress and go to “Appearance”, then click on “Themes”
Make note of which theme is Active and if it says “child”, if not, I strongly recommend that spend some time now and create the Child theme, this post here gives step-by-step instructions on setting up a Child Theme the easy way.
If you are running into road blocks with setting up the child theme or you don’t want to take the time to set it up, skip below to the option to add the code using the Plugin Method, note this method is only available for modifying the header or footer on your site.
I do not recommend to add code to your “Parent” Theme files, as one update to your theme or if you change themes, then your hard work is gone and by that time you may forget that the modifications were in place. This frequently happens to bloggers that add the Google Analytics code to their “Parent” theme files, they lose days of analytics till they catch that it happened.
Adding code to the (Child) Theme files directly in WordPress
You can add the code directly in WordPress if you have access to the theme editor.
To check if you have access click on “Appearance”, then you see the option “Theme Editor” usually at the bottom of the menu.
If you have this option, click on Theme editor.
Don’t have access to the editor? Jump to logging into your host or if you prefer, you can jump down to the Plugin Method (only available for applying code to the header or footer).
When it opens, Click on the theme file you want to edit; such as the “Theme Header”.
Make your changes and then save the file. Clear your caches (host cache, wordpress caching plugin, minify plugin, browser cache are possible caches that may need to be cleared), and check your site to make sure the page looks correct.
If you do not see a specific file that you need to edit from your theme then you will need to add it using either FTP or your host’s File Manager usually cPanel.
Editing (Child) Theme files via cPanel
If you prefer, you can jump down to the Plugin Method (only available for applying code to the header or footer).
**Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus
First, you will need to login to your cPanel or FTP site on your host.
The instructions contain examples from the Bluehost cPanel.
Jump to Siteground Instructions
- Login to your Bluehost account
- Click Advanced
- Select the File Manager
- Navigate to your wordpress install theme folder
- Open a new tab and login to your host.
- Click on “My Accounts”, then the “Go to cPanel” red button.
- Scroll down till you see the Files portion of the cpanel, click on ‘File Manager’
- You will see this popup, select ‘document root’ and make sure the document root drop-down is pointing to your domain, click ‘Go’.
- Navigate to your wordpress install theme folder
This is the location of the default install folder, yours may be slightly different.
“public_html/wp-content/themes/”
Then Open your theme Folder, if you are using the default theme “twentynineteen” and have setup and activated the “twentynineteen-child” theme, you would open the “twentynineteen-child” folder and look for the file you need to modify, for example if you want to make changes to the “header.php” file, do the following.
If the header.php file is not there, you will need to copy it over. Click on the “Parent” theme folder in this case “twentynineteen”.
Right-click on header.php and select copy.
You will see this popup
Add -child to the end of the folder name, and click Copy File
Now go back to the Child Theme folder, clicking on twentynineteen-child under themes.
Right-click on the header.php file and select download to save a copy as a backup. Don’t skip this step it is important for if anything goes wrong.
Next Right-click on the header.php file and select edit.
Make your changes and then save the file. Clear your caches (host cache, wordpress caching plugin, minify plugin, browser cache are possible caches that may need to be cleared), and check your site to make sure the page looks correct.
Instructions on Siteground
This will open to the File Manager to the root of your domain.
This is the location of the default install folder, yours may be slightly different.
“public_html/wp-content/themes/”
Then Open your theme Folder, if you are using the default theme “twentynineteen” and have setup and activated the “twentynineteen-child” theme, you would open the “twentynineteen-child” folder and look for the file you need to modify, for example if you want to make changes to the “header.php” file, do the following.
If the header.php file is not there, you will need to copy it over. Click on the “Parent” theme folder in this case “twentynineteen”.
Right-click on header.php and select copy.
You will see this popup
Add -child to the end of the folder name, and click Copy File
Now go back to the Child Theme folder, clicking on twentynineteen-child under themes.
Right-click on the header.php file and select download to save a copy as a backup. Don’t skip this step it is important for if anything goes wrong.
Next Right-click on the header.php file and select edit.
Make your changes and then save the file. Clear your caches (host cache, wordpress caching plugin, minify plugin, browser cache are possible caches that may need to be cleared), and check your site to make sure the page looks correct.
Adding code to your WordPress Header/Footer using a Plugin
If you do not already have a header/footer plugin installed, I recommend to install the Header Footer Code Manager from here.
Once installed, click on HFCM on the WordPress menu.
Click the Add New Snippet button.
The example below shows adding the Facebook Pixel using the Plugin Method
Save your snippet, confirm its active, then clear your caches (host cache, wordpress caching plugin, minify plugin, browser cache are possible caches that may need to be cleared) and check that your site looks correct and that the code is applied.
Conclusion
There you have it, three methods to choose from for modifying your theme files. Sometimes one option or another may not be available, so you it is good to know multiple methods for accessing your WordPress files.
