Adding custom code to WordPress by copying and pasting snippets from the web can be daunting for beginners, but it is possible with the right guidance. In this article, we will show you how to do it safely and effectively.
Why Add Code Snippets to Your WordPress Site?
WordPress is a powerful and flexible website builder that can be used to create nearly any type of website. It is easy to add new features and functionality to your site, making it a great choice for both beginners and experienced users.
We offer a variety of suggestions and techniques to help you improve your website. Some of these tips may require you to add code to WordPress.
Adding custom code snippets to your website is not always necessary, as there are often plugins that can do the same thing. However, in some cases, a simple snippet may be more efficient than a plugin.
Code snippets can be a quick and easy way to fix common WordPress errors, improve security, and add new features. They can be used to disable plugins, add custom functionality, and more. However, it is important to use code snippets carefully, as they can also break your site if not used correctly.
With that said, let’s take a look at how to add code snippets to your WordPress website safely.
What are the Best Ways to Add Code Snippets in WordPress?
It’s important to mention that before you start adding code snippets to your WordPress website, you should install and use a WordPress backup plugin.
This keeps your WordPress site safe, and you can always restore it from a backup in case anything goes wrong.
When adding snippets to WordPress, you may find instructions to add them to WordPress theme template files, like index.php, single.php, and more.
These snippets are only useful for those specific theme files, so you will have to add them directly or create a WordPress child theme.
However, most code snippets will be added to your WordPress theme’s functions.php file. Some tutorials might recommend adding it directly to the file, but there are much better alternatives that allow you to future-proof your changes.
This way if you ever change a theme, your custom functionality will not be removed.
There are different ways to edit WordPress files depending on which method you choose to add custom code snippets to your WordPress blog or website.
With that said, let’s take a look at some of the most beginner-friendly ways to add custom code snippets in WordPress.
Table of Conten
Method 1: Adding Custom Code with the WPCode Plugin (Easy)
Using a code snippets plugin is the safest and most beginner-friendly way to add code to WordPress.
The WPCode plugin lets you add and manage custom code snippets on your website easily, without having to edit your theme files.
It comes with smart code snippet validation to help you prevent common code errors. This protects you from breaking your website when adding code snippets.
WPCode also has a built-in code library that makes it easy to find all of the most popular WordPress code snippets. You can add these expert-written code snippets in just a few clicks.
The best part is that it lets you manage all code snippets from one central screen, and you can even organize them using tags.
Note: The WPCode method is useful for snippets that need to be added to the functions.php file. If you are asked to add a code snippet in other theme files, then this method will not work.
How to Edit and Add Code to WordPress with WPCode
If you’re going to use the WPCode plugin to add code to WordPress, then you’ll be adding code directly in your WordPress admin dashboard.
First, you need to install and activate the free WPCode plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.
Upon activation, simply go to Code Snippets » + Add Snippet in your WordPress admin dashboard. Then, click the Add New button.
This brings you to a screen where you can choose a snippet from the pre-made library or add your custom code.
To add custom code, click on the Use snippet button under the ‘Add Your Custom Code (New Snippet)’ option.
On the next screen, start by giving your snippet a name to help you remember it. Then, paste your code into the box. Be sure to choose the correct code type from the drop-down menu on the right.
Next, scroll down to the ‘Insertion’ section. Here you can choose to use the code snippet as a shortcode that you can manually copy and paste anywhere on your site. Or, select the ‘Auto Insert’ method to choose a location (WordPress function) where the code snippet will be automatically inserted.
The best part about WPCode is that aside from the various Auto-Insert options, it also comes with beginner-friendly conditional logic option. This lets you select when your code should load.
Once you’re done adding the code, toggle the switch from ‘Inactive’ to ‘Active’ in the top right corner.
Then click the Save Snippet button.
Once the snippet is active, it will be added automatically or displayed as shortcode, depending on the insertion method you chose.
How to Add Code to the WordPress Header and Footer
Sometimes you may only need to add code to your theme’s header.php or footer.php files. The WPCode plugin can also help you do this easily.
This comes in handy when you need to add a tracking code for Google Analytics, Google AdSense, Facebook Pixel, and more to your website.
Plus, it lets you manage all of your header and footer codes in one place, prevents any manual errors, and lets you upgrade or change your theme without worries.
Note: This method works best for tracking scripts, custom CSS, and JavaScript code.
Go to Code Snippets » Header and Footer and then enter your code snippet into the header, body, or footer, section of your website.
Make sure you click the ‘Save Changes’ button, and your code snippets will be live on your website.
Method 2: Adding Custom Code in Site-Specific WordPress Plugin
Another flexible option is to use a site-specific WordPress plugin. This is a custom plugin that you can create for your own website and use to save all your custom code.
The advantage of this method is that your code is not dependent on your theme, and it will remain active even when you change themes. It is also not affected by any WordPress updates on your website.
Note: This method is only applicable for code snippets that need to be added to the functions.php file.
If you’re using a site-specific plugin, then you can use the built-in WordPress plugin editor to add your custom code.
First, you’ll need to go to Plugins » Plugin Editor and then select your plugin from the drop-down menu labeled ‘Select plugin to edit:’.
The editor will load your site-specific plugin. Then, you can simply add code to the page.
Once you’re finished, make sure to click on the ‘Update File’ button to save your changes.
If something is missing in your code or can break your website, then the plugin editor will automatically undo your changes.
Another way you can add custom code to a site-specific plugin is by using FTP. For more details, see our beginner’s guide on how to use FTP to upload files to WordPress.
Simply open up your website using your preferred FTP client, and then right-click on the plugin file and select the ‘View/Edit’ option.
This will open up the file so that you can add your code snippets. When you save and upload the file again, then changes will automatically show up.
Method 3: Adding Custom Code to Functions.php or Other Theme Templates
Finally, it is okay to add code snippets directly to your theme’s functions.php file. However, we recommend using the other options above, since there are some downsides.
First, if you update your WordPress theme, then all of your changes will be gone.
Next, the code you added will only work if you are using that particular theme.
That being said, let’s take a look at how to properly copy and paste code snippets and avoid breaking your website.
If you are adding code snippets directly to your theme’s functions.php file or any other page template, then you can add the code by navigating to Appearance » Theme Editor in your WordPress admin panel.
Then, you can select the file from the right-hand column, and it will open up in the editor.
The tutorial you’re following will tell you where you can add the code snippet, but if not, then you need to add the code at the bottom of the file beneath all the code that’s present.
Another alternative is to use FTP of your WordPress hosting file manager to add custom code to your theme files.
Simply connect to your FTP client to your website and then go to wp-content » themes » your-theme-folder and right-click on the file that needs editing.
Then, click the ‘View/Edit’ option to open the file in the text editor and add your code snippet.
Troubleshooting PHP Errors when Adding Custom Code
There are some common mistakes that beginners make when adding custom code snippets to their WordPress websites. Luckily, most of these errors can be avoided and fixed easily.
Let’s take a look at these errors and the best ways you can fix them.
1. Incorrect Usage of PHP Begin and End Tags
WordPress is written mainly in the PHP programming language which has a specific syntax that tells your server that the following code needs to be processed by PHP. Here is what a typical PHP code snippet looks like:
// PHP Begin Tag
<?php
// Rest of the code goes here
// PHP End Tag
?>
All your PHP code needs to be inside the <?php and ?> tags.
The PHP end tag is very important in files that switch back and forth between PHP and HTML. This includes most WordPress theme files that use PHP tags alongside HTML.
You need to make sure that if you are pasting your code at a location where the PHP start tag is not closed, then you need to add your code without the starting PHP tag.
<?php
// Some pre-existing code
// your custom code
?>
If you are pasting your custom code outside or after the PHP end tag, then you need to add the PHP begin tag as well.
<?php
// Some pre-existing code
?>
// Your custom code snippet
<?php
?>
Almost 90% of all errors are caused by the incorrect placement of PHP start or end tags. Looking at your code will help you understand whether or not you need to add the PHP start or end tags in your custom code snippet.
However, many WordPress theme files like functions.php may not have a PHP end tag at all. This means that you can add your code at the bottom of the file without the start or end tags.
Here’s an example of what that looks like.
<?php
// Lots of code in your theme's functions.php file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'https://cdn.garudeya.com/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');
Remember that some tutorials may assume that you already know how to use PHP start and end tags. So, they may simply show you a code snippet without those tags in place.
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'https://cdn.garudeya.com/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');
Sometimes when code snippets are given they can be added to multiple locations, so the PHP end and start tags won’t be included.
When you are adding such a code snippet in your theme files, you need to make sure that it is inside the PHP tags.
2. Incorrect Nesting Errors
PHP has a particular syntax for functions, conditional logic, and loops. This syntax depends on curly brackets which indicate when a function begins and when it ends.
For example, here is a simple PHP function:
<?php
function garudeya_tutorial() {
echo "Hello World!";
}
?>
Now if you want to add a custom code snippet that has nothing to do with this function, then you will need to put it outside this function like this:
// Pre-existing code in your theme file
<?php
function garudeya_tutorial() {
echo "Hello World!";
}
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'https://cdn.garudeya.com/images/login_logo.png) !important; }
</style>';
}
?>
If you miss the starting or ending curly brackets, then this will break the code, and you will end up with an error page.
Understanding PHP Errors in WordPress
Errors that are caused by adding custom code to WordPress will often result in a detailed error message. Most of them are syntax errors, parse errors, or fatal errors due to unexpected characters.
The good news is that these errors will tell you which line in your code caused the error.
Then, you can then go to the exact line to review the code and figure out what you missed.
For this, we recommend using a proper text editor for code editing because they have line numbers and syntax highlighting which can help you fix the issue easily.
What to do When Your WordPress Site is Inaccessible?
First of all, take a deep breath and don’t panic. All of your website’s files are still there and you can access them.
Simply connect to your website using an FTP client or the file manager app in cPanel in your WordPress hosting account.
For more details, see our beginner’s guide on how to use FTP to upload files to WordPress.
Next, locate the file where you added the code that caused the error and open it to edit it.
Then, you can try and fix the issues with the code snippet. If you are unable to fix those issues, then simply remove the code snippet you added and save your changes.
Now, your site should be back to normal again. If it is still showing some error, then download a fresh copy of your WordPress theme and extract the zip file to your computer.
After that, locate the file where you made the changes earlier, and upload it to your server while overwriting the old file.
For more ways to solve these issues, see our guide on the most common WordPress errors and how to fix them. If that doesn’t help, then follow our WordPress troubleshooting guide to perform a step by step diagnosis.
We hope this article helped you learn how to paste code snippets from the web into WordPress. You may also want to see our guide on how to create a free business email address and our picks of the best live chat software for small businesses.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
