WordPress guide: How and where to paste PHP, JS, CSS codes and functions

Surely many times you’ve found out fantastic codes to add to your WordPress with which to add features or fix problems but you have not known or have not been “brave enough” to put them on your website.

Right here I’m very fond of sharing all kinds of codes, snippets they call them, recipes sometimes too, with which to modify aspects of WordPress, WooCommerce, plugins and themes.

But many of you tell me sometimes that you don’t use them, either for fear of not knowing where to paste the code, or for not knowing how to do it without risk.

And that’s what I intend to solve today, to help you and encourage you to take advantage of all those fantastic codes that are out there, on the net, and that can help you improve your WordPress site.

WordPress customizer for CSS codes

If the code you have found and would like to use on your website is CSS then the best way(easiest too) to do it is from the “Additional CSS” tool in the WordPress customizer.

You can access it in 2 ways:

• In your WordPress administration, from Appearance → Customize → Additional CSS.
• From your website, from the Customize icon, and then going to the Additional CSS section.

Once in the customizer, already in the additional CSS section you have a box – initially empty – where to paste your CSS code.

The best thing about using the WordPress customizer is that the CSS codes you paste here are immediately activated in the preview, so you can immediately check if you get the result you expected. Also, they are as easy to remove as you created them.

Advantages of the customizer

• You see the changes in real time in the page preview.
• The changes do not affect the visitor until you publish them.
• Changes are made in the WordPress database.
• You are not affected by theme and plugin updates.
• Additional CSS tool has instant programming help: it shows you the available parameters as you type code.
• Additional CSS tool has code error detection and shows you in real time.
• Some codes will still work even if you change theme, if the CSS identifier matches, and if not just change the identifier.

Disadvantages of the customizer

• By WordPress loading sequence, the CSS of the customizer is activated later than if it were in the stylesheet.
• It is a less optimal way to load CSS as it requires database queries.

Stylesheet for CSS codes

The other, more traditional way to add codes, in this case talking about CSS, is to use the stylesheet (styles.css) of the currently active theme.

What you must keep in mind is that you must add CSS codes to the stylesheet of the child theme, because if you do it to the parent theme, if you have not created and activated a child theme, when you update the theme all the CSS you add to the stylesheet of the theme will be lost.

The stylesheet will be in the child theme folder, that is, in a path similar to: /wp-content/themes/child-theme-folder/style.css.

To take advantage of the CSS code simply paste it into the style.css file in the child theme folder, save the changes and the new code will be applied.

You can add the different CSS codes one below the other. I do recommend that you add a comment explaining what it does first, for future code revisions.

Comments are added by putting the text like this */ This is a comment that explains the code */

Advantages of the stylesheet

• The codes affect only the current active theme.
• By WordPress loading sequence the child theme’s stylesheet is activated very early, earlier than if it were in the database.
• This is the most optimal way to load CSS as it does not require database queries.
• You use your own code editor or the hosting editor.
• If you add the CSS code to the child theme it is not affected by updates to the parent theme.

Disadvantages of the stylesheet

• You don’t see the changes in real time, you have to save the changes and go to the web to see them.
• The changes affect the visitor, everyone will see the change at the same time as you.
• You need to familiarize yourself with a code editor or the hosting editor, which do not always have programming help(autocomplete).
• Code editors don’t always warn of programming errors.
• If you add the CSS code to the parent theme it will be lost with theme updates.

Theme’s functions.php file

Leaving CSS codes aside, what you will find most to copy and paste are PHP, JavaScript and WordPress functions.

In the case of WordPress functions, i.e. hooks, actions and filters, you have 2 possibilities, depending on their purpose:

• Add them to the theme’s functions.php file – If the function is specific to the active theme.
• Add them to a custom plugin – If the function is not specific to the active theme, if it affects WordPress or plugins.

So, having said the above, if you want to take advantage of a WordPress function whose purpose is to apply changes to the active theme, you must paste them into the functions.php file of the child theme.

You will find this file in the child theme folder, that is, in a path similar to: /wp-content/themes/child-theme-folder/functions.php.

As before, paste the code into the functions.php file in the child theme folder, save the changes and the new code will be applied. In this case it is important that you get into the habit of always pasting them at the end of the file.

In this file it is especially important that you add comments explaining what each code does, as in the example above.

Advantages of the functions.php file

• The codes affect only the current active theme.
• By WordPress loading sequence the functions.php file of the child theme is activated very early, earlier than if it was in the database.
• You use your own code editor or the hosting’s code editor.
• If you add the code to the child theme it is not affected by updates to the parent theme.

Disadvantages of the functions.php file

• You don’t see the changes in real time, you have to save the changes and go to the website to see them.
• The changes affect the visitor, everyone will see the change at the same time as you.
• You need to familiarize yourself with a code editor or the hosting editor, which do not always have programming help.
• Code editors don’t always warn of programming errors.
• If you add the code to the parent theme it will be lost with theme updates.
• They will stop working if you change theme, so remember to use them only for features that affect the current theme.

Custom Plugin

As we have seen before, there are two ways to add WordPress functions, and when the code is not theme specific the perfect way to take advantage of it is by adding it to a custom plugin, for your customizations.

This doesn’t mean that a function intended for WordPress or plugins won’t work in the functions.php file, some will work, but it’s not the proper and safe way to add them.

That said, making your own plugin is very easy:

• 1. With a code editor(Notepad++) create a new file and call it whatever you like, but with a .php extension(When you save add the extension at the end of the file name). For example: my-plugin.php (avoid spaces, capital letters, etc., something simple).

• 2. Add to your plugin file the base strings to make it work as a plugin, these:

<?php
/*
Plugin Name: My customizations plugin.
Plugin URI: https://wphelp.com/
Description: My customizations plugin that dont go on the file <code>functions.php</code> because they're not from the theme.
Version: 1.0
Author: Powerful 
Author URI: https://me:).com
*/Code language: HTML, XML (xml)

• 3. After these strings, essential for WordPress to identify the file as a plugin, add your codes, those fantastic WordPress functions that you have found out there and that will be so useful. For example:

<?php
/*
Plugin Name: My customizations plugin.
Plugin URI: https://wphelp.com/
Description: My customizations plugin that dont go on the file <code>functions.php</code> because they're not from the theme.
Version: 1.0
Author: Powerful 
Author URI: https://me:).com
*/
/* Disable lazy load WordPress */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
/* Remove marketing menu admin WooCommerce */
function disable_features( $features ) {
$marketing = array_search('marketing', $features);
unset( $features[$marketing] );
return $features;
}
add_filter( 'woocommerce_marketing_menu_items', '__return_empty_array' );
add_filter( 'woocommerce_admin_features', 'disable_features' );Code language: HTML, XML (xml)

• 4. Save the PHP file of your plugin in a new folder. Call it, for example, folder-of-my-plugin, or whatever you want (again, avoid spaces, Ñ’s, etc.).
• 5. ZIP the folder(required to upload it to WordPress).
• 6. Install your plugin like any other, from the WordPress plugin installer, choosing the “Upload plugin” option.
• 7. Activate it.

As you can see, easier than you imagined.

Advantages of a custom plugin

• You can create several plugins, each one for a functionality, and thus activate or deactivate as needed.
• They are independent of the theme, if you follow my instructions.
• They are not deactivated when you change theme.

Disadvantages of a custom plugin

• Any web administrator user can deactivate it.
• By WordPress loading sequence is activated after the theme and the necessary plugins.

Must-have plugin (mu-plugin)

The procedure to create the plugin is almost the same, easier actually. It would look like this:

• 1. With a code editor create a new file and call it whatever you like, but with extension .php. For example: my-plugin.php (avoid spaces, capital letters, etc., something simple).
• 2. Add to your plugin file the base strings to make it work as a plugin, these:

<?php
/*
Plugin Name: My customizations plugin.
Plugin URI: https://wphelp.com/
Description: My customizations plugin that dont go on the file <code>functions.php</code> because they're not from the theme.
Version: 1.0
Author: Powerful
Author URI: https://me:).com
*/Code language: HTML, XML (xml)

• 3. After these strings, essential for WordPress to identify the file as a plugin, add your codes, those fantastic WordPress functions that you have found out there and that will be so useful. For example:

<?php
/*
Plugin Name: My customizations plugin.
Plugin URI: https://wphelp.com/
Description: My customizations plugin that dont go on the file <code>functions.php</code> because they're not from the theme.
Version: 1.0
Author: Powerful
Author URI: https://me:).com
*/
/* Disable lazy load WordPress */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Code language: HTML, XML (xml)

• 4. Create a folder called mu-plugins inside the wp-content directory and upload the PHP file of your plugin to that folder. It would be in this path: /wp-content/mu-plugins/my-plugin.php.

That’s it. The plugin is automatically installed and activated, in the list of essential plugins.

One of the great things about mu-plugins is that they are activated automatically, and they cannot be deactivated from the WordPress administration, only by deleting or renaming the file.

Advantages of a must-have mu-plugin

• They are independent of the theme, if you follow my instructions.
• They are not deactivated when you change theme.
• They cannot be deactivated from the administration.
• By WordPress loading sequence is activated before the theme and the rest of plugins.

Disadvantages of a must-have mu-plugin

• To disable it, the file must be physically deleted.
• To modify it or add functionalities you have to use a code editor or the hosting.

Snippets Plugin

If none of the above convinces you to paste WordPress functions or even CSS in your website, you can also choose to use a plugin like Code Snippets, a real gem for these things.

It is a totally free plugin, and as soon as you install it, it offers you a very simple way to add all kinds of codes, even showing you some sample codes, which I think is a total success.

If you have to add a code the interface is very simple.

But I recommend you review the example code snippets, to see how the code scoping (where it will be executed) and priority is used.

The great thing about this plugin is that it allows you to add any kind of code, also JavaScript and PHP, not only WordPress functions and CSS.

On top of that, you can download the codes or export them, to use them on another website, maybe with your own function plugin? come on, go for it!

Advantages of the snippets plugin

• You don’t have to learn how to use code editors.
• You don’t have to upload files to the server.
• You can define the scope of the codes.
• It works for all types of codes.

Disadvantages of the snippets plugin

• It always loads unnecessary resources, even if you don’t have any active snippet.
• By WordPress loading sequence is activated after the theme and essential plugins or codes.
• Any web administrator can deactivate the plugin, disabling all code snippets and their functionality.

And that was it.