How to add Custom Code (css/php/js) to your Theme


1. Add Custom CSS
Inserting Small Custom CSS Snippets (Premium Themes)
  1. In your wp-admin, go to Appearance > Customize
  2. In the Advance Options panel, go to Custom Code section
  3. You can add your css to the Custom CSS box. To add css for mobile only, use the Custom Responsive CSS box instead
Inserting Small Custom CSS Snippets (Free Themes)

Please use a plugin like Simple Custom CSS to insert your custom css code. If you are using Jetpack, you can use the CSS module for Jetpack.

Heavy CSS Modifications

For making heavy modifications, it is highly recommended you use a child theme instead.

  1. Download and install an empty starter child theme for your theme.
    1. Go to our Support Page, and click on the link to your theme’s documentation
    2. Click on the Customizations (Child Themes) section, and download the child theme for your free/premium version.
    3. Install the child theme as described in the section.
  2. In your wp-admin area, go to Appearance > Editor
  3. Select your child theme in the dropdown at top right of the screen (it will already be selected if you have activated the child theme)
  4. Click Stylesheet in right sidebar to edit the file
  5. Do not delete the code in stylesheet. Add your Custom CSS at the end of the file.

Note: You do not need to copy the entire style.css of main parent theme to child’s stylesheet. Our themes detect if a child theme is being used and automatically include the parent’s stylesheet. Only copy the CSS rules you want to add/modify in child’s stylesheet.

 


 

2. Add Custom PHP
Inserting PHP code to functions.php file
  1. Download and install an empty starter child theme for your theme.
    1. Go to our Support Page, and click on the link to your theme’s documentation
    2. Click on the Customizations (Child Themes) section, and download the child theme for your free/premium version.
    3. Install the child theme as described in the section.
  2. In your wp-admin area, go to Appearance > Editor
  3. Select your child theme in the dropdown at top right of the screen (it will already be selected if you have activated the child theme)
  4. Click Theme Functions in right sidebar to edit the file
  5. The first line of this file should always be <?php You should always copy paste your code at the bottom of this file.

 

Modifying Template File (Advance Users)

Once again, it is highly recommended you use a child theme for this. Lets assume you want to make changes to your header.php template file. This is how you should do it

  1. In your wp-admin area, go to Appearance > Editor
  2. Select your child theme in the dropdown at top right of the screen (it will already be selected if you have activated the child theme)
  3. See if your template file (header.php) already exists in the right sidebar. If it does, click it to edit it and then make the necessary changes.
  4. If your template file does not exist, you will need to copy it from your parent theme.The easiest way to do it is using an FTP client like Filezilla.
    1. Download and unzip the main them .zip file to your hard disk.
    2. Launch Filezilla
    3. In your Remote Server window, go to wp-content > themes > your-child-theme folder
    4. In your Local File window, locate the header.php file in your parent theme folder (main theme you downloaded from wphoot)
    5. Right click the local header.php file and click Upload