How to Add Custom Code on WordPress

Adding custom code to your WordPress site can add features, enhance functionality, and fine-tune the design in ways that go beyond the capabilities of standard themes and plugins. Whether you’re looking to implement custom scripts, modify the site layout, optimize performance, or integrate third-party services, adding custom code can be a powerful tool.

WordPress offers several methods for adding custom code, such as using plugins, modifying files or utilizing child themes. But before making changes, it’s important to remember that adding custom code can break your site or cause compatibility issues with other plugins and themes if done incorrectly.

Always take a backup before making changes to your website. Review our guide on How to Backup WordPress to have a safe copy when customizing.

• Using the Code Snippets Plugin
• Add Code Manually

Using the Code Snippets Plugin

Code Snippets is a WordPress plugin for effortless management of custom code and enhancements to your website. You’ll need to download and install the Code Snippets plugin within the dashboard. You can check out our guide on How to Install a WordPress Plugin.

After installing and activating, go into the “Code Snippets” plugin page from your left-side menu. Here you can manually add your custom code.

Adding Code Manually

Manually adding code can be a simpler, less-bloated way to customize your website. For WordPress websites, the caveat with this is that manual edits within a theme are overridden with theme updates. This means when your theme’s developer releases a new version and you upgrade to it, any edits will be replaced with the update’s files.

This is where building a child theme can help, allowing you to have everything from the main (or parent) theme while being able to make customizations. Read our article on How to Create a Child Theme to create your own sub-theme that survives any future theme updates.

Add Manually Within Dashboard

You can add code manually within your dashboard using the “Theme File Editor” or “Plugin File Editor” under Tools. Within the Theme File Editor, you can access your functions file and manually add code to the end of the file.

Add Manually To functions.php

You can also add codes by manually entering code within the functions file using a File Manager or FTP tool. Open your theme’s functions.php file (usually located at “wp-content/themes/yourtheme/functions.php) to edit. Any code you add should be at the end of file.

For custom code, you generally can use a base like this:

function wp_customcode1(){

 //Replace your code here

}
add_action('wp_head', 'wp_customcode1');

We named the function “wp_customcode1” which you can rename (avoid using default or already declared functions).

Add Code to Header or Footer

You can also add custom code to the header or footer tags of your page. You can replace “wp_head ” with “wp_footer” to include your custom code within the footer section of your page.

function wp_customcode1(){ ?>

 //Replace your custom code here

<?php
}
add_action('wp_footer', 'wp_customcode1');

If you need to add JavaScript or HTML such as an analytics tag, you’ll need to close out the file’s opening PHP tag, the reopen after your code:

add_action('wp_head', 'wp_customcode1');
function wp_customcode1(){ ?>

 //Replace your code here

<?php
}

To link to a JS file instead of including large pieces of code, you can utilize this code, where your script (script.js) is in the “js” directory within your theme:

function wp_customscript1() {
wp_enqueue_script('your-script', get_template_directory_uri() . '/js/your-script.js', array(), true);
}
add_action('wp_enqueue_scripts', 'wp_customscript1');

If your script has dependencies such as jQuery, you can include it within the array like:

get_template_directory_uri() . '/js/script.js', array('jquery'), false, true);

Add To Specific Post With Post ID

You can add code that appears only on specific posts or pages. You’ll first need to have the post’s ID handy. From your WordPress dashboard, find your post and press (or hover) the Edit link to view the ID in the URL.

In this code, you’ll replace “20” with your specific post ID and the line starting with “//Replace…” with your custom code:

function wp_customcode1() {
 if (is_single ('20')) {
  ?>

  //Replace your custom code here

  <?php
 }
}
add_action('wp_head', 'wp_customcode1');

Add To Specific Page With Page ID

This works similar to showing by post ID, but is specific to pages.

In this code,you’ll replace “20” with your specific page’s ID and the line starting with “//Replace…” with your custom code:

function wp_customcode1() {
 if (is_page ('20')) {
  ?>

  //Replace your custom code here

  <?php
 }
}
add_action('wp_head', 'wp_customcode1');

Adding custom code to your website can be efficient as a developer or growing website, or as a quick solution, but using a plugin may still be more convenient managing code as you add more.