How to add custom code to your web site.

There are various methods to add custom code such as CSS, JavaScript and PHP to your web site. To affect the web site functions and how the web site is seen.

Option 1.
Adding CSS.
We can use the Appearance -> customize -> Additional CSS and add CSS. We will be able to immediately see what it looks like in the preview window to the right.

Here I have added code with a background color that affects the body tag in the about page (page-id-44).

Adding CSS to the Customize. See the adjustments immediately in the right preview area.

Option 2.
Adding CSS, JavaScript (JS) or PHP.
Another option is through the child theme add CSS to the style.css file. JavaScript to a JS file. Or PHP to the functions.php file or another PHP file.

Appearance -> Theme Editor – edit theme files, or add code.

NB! If one adds code directly to a parent theme files this code will be erased upon an update of the theme. Be sure to add custom code to a child theme. As we have more control over the child theme. In the above example we see the parent theme Blocksy. Which I am using on this site. Notice the notification. WordPress gives the suggestion to add CSS through the customize instead of in the style.css file. I want to add CSS and Php code, so I will instead go with the third option.

Option 3.
Adding custom code into an external plugin.
Adding code to a plugin makes it independent of the theme that is in use. As switching a theme the custom code added through the Customize or in a child theme style.css will be lost and not brought over to the new theme. Adding the code into a plugin makes the code more secure.

Two plugin options are:

Code Snippets plugin to add CSS.
Code Snippets plugin to add CSS.
CodeKit- Custom Codes plugin to add CSS, PHP, JS, HTML or SASS.
CodeKit- Custom Codes plugin to add CSS, PHP, JS, HTML or SASS.

Code snippet plugin for Php code.
Custom Codes plugin for CSS, JavaScript, PHP, HTML or SASS code.


Leave a Reply

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