How to Correctly Add Custom Code in WordPress

WordPress is a content management system. Currently, 29.1% of websites run on WordPress. With its increasing popularity, site owners and administrators are always looking to modify the themes and plugins that WordPress provides, to suit their needs.

Table of Contents

But additional functionalities are often required which cannot be provided by these themes and plugins. However, you should Add Custom Code in WordPress in such a way that

it can stand the test of time. These kinds of changes shouldn’t be made to your parent theme, because the update will override the changes. So how should you go about making custom code changes to your WordPress? Let us take a look.

Create a Child Theme

If you wish to Add Custom Code in WordPress to change the basic functionalities of a theme, then you should go for a child theme. This involves overriding the styling using CSS. There are two ways you can create a child theme:

Using custom plugin:

Install the Child Theme Configurator plugin. This allows you to build a child theme from one of your existing themes. After installation, go to Tools and click on the Child Theme submenu. Select the parent theme you wish to change and click on Analyze.

Click on the Create New Child Theme button to create a new child theme. It’ll be placed in your wp-contents folder. Click on the Query/Selector tab to add custom CSS code.

Clicking on Save brings up a confirmation screen where you can see the changes you have made and confirm them. Clicking on Save Child Values confirms the changes. You can view the CSS you added in the Child Styles tab.

Traditional method:

In the Parent Theme folder, create a new folder with a name ending in ‘-child’. Next, a style.css file needs to be created with the following values:

Theme Name: Twenty Seventeen Child
Theme URI: https://WordPress.org/themes/twentyseventeen/
Description: Twenty Seventeen Child Theme
Author: The WordPress team
Author URI: https://WordPress.org/
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-seventeen-child

In the last step, the parent and child theme stylesheets should be enqueued. In the child themes folder, the following code should be added to the functions.php file:

You can also copy template files and modify them accordingly, to Add Custom Code in WordPress.

Add Custom Code Using a Plugin

If you not that familiar with the backend of WordPress, you can opt for a plugin that will let you Add Custom Code in WordPress. Using a plugin eliminates the chances of losing your modifications due to an update, or things getting deleted accidentally. Here, we will take a look at two plugins that will help you achieve this:

Insert Headers and Footers:

This plugin lets you add code to your site’s header and footer. This plugin comes with a simple interface that allows you to write scripts in one place. It’s quick to install and lets you add custom CSS, Facebook Pixel, and Google Analytics code, along with Javascript and HTML to your header and footer.

Code Snippets:

This plugin lets you make custom code changes without worrying about them getting wiped out by an update. Installing this plugin adds a new menu to your site, called Snippets.

Using this menu, you can add new code snippets and name them. It has a box where you can write the code and a description box below where you can state what function it serves.

There is an option to enable or disable these snippets, which makes debugging easier. You can also export them to PHP files. If your snippets are causing issues with other themes or plugins, you can always disable them to identify the cause.

Add Custom Code By Creating a Custom Plugin

If you wish to modify your site without changing the functionality, then your best option is to create a custom plugin.

By building a custom plugin you can Add Custom Code in WordPress, to change a small feature that remains in place even when the theme is updated. You can create a new WordPress plugin in five simple steps:

Access the site using FTP:

Acess your site using a File Transfer Protocol. Those who are not familiar with FTP should learn about it first before proceeding.

Go to WordPress Plugins folder:

Navigate to the plugins folder located at /wp-content/plugins.

Create a new folder: Create a new folder inside the plugins folder. Give a unique name such as ‘number-one-plugin’ to the folder and then enter it.

Create a PHP file:

In your new plugin folder, create the main PHP file. Name it as ‘number-one-plugin’, i.e. same as the plugin folder. Next, you need to open and edit this file.

Setup plugin information:

Finally, you need to copy the plugin information into your main PHP file. You need to edit the details such as Plugin Name and Plugin URL.

&lt;?php

/**

* Plugin Name: Number One Plugin

* Plugin URI: http://www.abcd.com/number-one-plugin

* Description: The very first plugin that I have ever created.

* Version: 1.0

* Author: Your Name

* Author URI: http://www.abcd.com

*/

Now you can activate the plugin and make changes as necessary. Let us look at a simple task you can accomplish using your custom plugin. This code adds a text below all your posts:

add_action( 'the_content', 'my_thank_you_text' );

function my_thank_you_text ( $content ) {

return $content .= '&lt;p&gt;Thank you for your attention!&lt;/p&gt;';

}

So to Add Custom Code in WordPress is no big deal and anyone can do it using the above-mentioned methods. If the manual code is confusing you, it is better to use a plugin. However, you need to decide which is the best method for you depending on your situation.