How to Edit your Header.php and other Theme files

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

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”
 
Screenshot of Check which theme is active
 

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.
 
Screenshot of finding the theme editor in WordPress
 

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

  1. Login to your Bluehost account
  2. Click Advanced
  3. Select the File Manager
  4. Screenshot of finding the Bluehost cpanel File Manager

  5. Navigate to your wordpress install theme folder
  6. This is the location of the default install folder, yours may be slightly different.
    “public_html/wp-content/themes/”
    screenshot of public html

    Screenshot of the WordPress Themes Folder
     
    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.
     

    Screenshot of Parent vs Child theme folder
     
    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.
     
    Screenshot Right-click copy
     
    You will see this popup
     
    Screenshot Before copy header
     
    Add -child to the end of the folder name, and click Copy File
     
    Screenshot after copy header
     
    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

     

  7. Open a new tab and login to your host.
  8.  

  9. Click on “My Accounts”, then the “Go to cPanel” red button.
  10.  

    Screenshot of Login to siteground click on My account then cpanel
     

  11. Scroll down till you see the Files portion of the cpanel, click on ‘File Manager’
  12.  

    Screenshot of Siteground File Manager further down page
     

  13. You will see this popup, select ‘document root’ and make sure the document root drop-down is pointing to your domain, click ‘Go’.
  14.  

    Screenshot of Siteground File Manager Popup
     

    This will open to the File Manager to the root of your domain.
     

  15. Navigate to your wordpress install theme folder
  16. This is the location of the default install folder, yours may be slightly different.
    “public_html/wp-content/themes/”
    screenshot of public html

    Screenshot of the WordPress Themes Folder
     
    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.
     

    Screenshot of Parent vs Child theme folder
     
    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.
     
    Screenshot Right-click copy
     
    You will see this popup
     
    Screenshot Before copy header
     
    Add -child to the end of the folder name, and click Copy File
     
    Screenshot after copy header
     
    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
    Add new snippet

     
    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.

    Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress
Avatar for Tara, WP Blogger Assist

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

Leave a Reply

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