WPBeginner» Blog» Beginners Guide» Beginner’s Guide to Pasting Snippets from the Web into WordPress

Beginner’s Guide to Pasting Snippets from the Web into WordPress

Last updated on March 6th, 2018 by Editorial Staff

Special WordPress Hosting offer for WPBeginner Readers

Beginner’s Guide to Pasting Snippets from the Web into WordPress

At WPBeginner, we often publish tutorials asking users to add code snippets into WordPress. Copying and pasting code in WordPress theme files may seem easy to experienced users, but it is quite tedious and intimidating for beginners. Due to unfamiliarity with coding, beginners may end up making a mistake that could crash their website. In this step by step guide, we will show you how to copy and paste code snippets from web into WordPress.

How to safely copy and paste code snippets in WordPress

Why Add Code Snippets to Your WordPress Site?

WordPress is the best website builder in the world due to the flexibility it offers. It is super easy to add new features and functionality to your WordPress website.

WordPress resource sites, like WPBeginner share tips and hacks that you can add to improve your website. While adding custom code snippets to your website is optional, and you can often find plugins to do the same task, sometimes a simple snippet is more efficient.

Some code snippets can be very handy and can help you fix many common WordPress errors, improve WordPress security, and even add new features to your website.

That being said, let’s take a look at how to safely add code snippets into your WordPress website.

What are The Best Ways to Add Code Snippets in WordPress

First thing you must do on every WordPress website is install a WordPress backup plugin. This keeps your WordPress site safe, and you can always restore it from backup in case anything goes wrong.

Sometimes you may find instructions to add code snippets in WordPress theme templates like index.php, single.php, header.php, and more. These code snippets are useful only in those particular templates, so you will have to add them directly to your theme files or create a child theme.

However, most custom code snippets are added into your WordPress theme’s functions.php file. While the tutorial may recommend you to add it in the theme’s functions.php file, there is a much better alternative that works the same way as a functions file.

Let’s take a look at some of the ways you can add custom code snippets in WordPress.

1. Use The Code Snippets WordPress Plugin

Code Snippets plugin

This is the safest and most recommended method for beginners. Code Snippets is a WordPress plugin which allows you to easily add and manage custom code snippets on your website.

It comes with a fail-safe switch which immediately deactivates a code snippet if it causes an error. This protects you from losing access to your website when adding a custom code snippet.

For detailed instructions, see our guide on how to easily add custom code snippets in WordPress.

Note: Code snippets method is useful for snippets that need to be added in a functions file. If you are asked to add a code snippet in other theme files, then this method will not work.

2. Create a Child Theme to Save Custom Code

Using child theme to add custom code snippets in WordPress

The second approach is to create a child theme. Using child theme will keep your changes intact when you update your theme. It will also allow you to add code to other theme files if needed without worrying about updates undoing your changes.

For more details, see our guide on how to create a child theme in WordPress.

Note: This method will also work for code snippets that are needed to be added in other theme templates.

3. Use a Site-Specific Plugin for Custom Code

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 it 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.

See our guide on how to make a site-specific plugin for your website for detailed instructions.

Note: This method is only applicable for code snippets that need to be added in functions file.

4. Add Code Directly To Functions File

It is OK to add code snippets in your theme’s functions.php file. However, there are some downsides to it.

Your changes will be wiped off when you update your WordPress theme
Your code 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.

How to Edit WordPress Files?

There are different ways to edit WordPress files depending on which method you choose to add custom code snippets on your website.

1. Adding Custom Code in Code Snippets Plugin

If you are using the Code Snippets plugin, then you can easily add code snippets from WordPress admin area. Simply go to Snippets » Add New page to add your custom code.

Adding a new snippet in Code Snippets plugin

2. Adding Custom Code in Site-Specific WordPress Plugin

If you are adding custom code in a site-specific plugin, then you can use the built-in WordPress plugin editor to add custom code.

Editing a site specific plugin using the WordPress plugin editor

First, select your site-specific plugin from the drop down menu labeled ‘Select plugin to edit’. The editor will load your plugin file, and you will be able to add code snippets in it.

Once you are done, click on the ‘Update File’ button to save your changes.

If there is something missing in your code or it has potential to break your website, then the plugin editor will automatically undo your changes.

Another method to add custom code in a site-specific plugin is by using FTP.

Simply go to the plugin folder using your FTP client. Right click on the plugin file and then select View/Edit file.

Edit site-specific WordPress plugin using FTP

3. Adding Custom Code to functions.php or Other Theme Templates

If you are adding code snippets to your theme’s functions.php file or any other template, then you can add code directly by visiting Appearance » Editor. You can select the file where you need to add the code from the right column.

Theme editor

The instructions you are following will tell you where to paste the code, but if they don’t, then you need to add the code at the bottom of the file.

A better alternative way would be to use FTP to add custom code in theme files. Simply connect your FTP client to your website and go to /wp-content/themes/your-theme-folder/ and right click on the file that needs editing.

Edit theme files via FTP
Select View/Edit file option to open the file in the text editor.

Troubleshooting PHP Errors when Adding Custom Code

There are some common mistakes that beginners make when adding custom code snippets to their websites. Let’s take a look at some of them and how to avoid 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 how 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 becomes more important in files that switch back and forth in HTML. This includes most WordPress themes files which use PHP tags alongside HTML.

You need to make sure that if you are pasting your code at a location where 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 incorrect placement of PHP end or start tags. Studying the code will allow you to understand whether or not you need to add the PHP begin or end tags in your custom code snippet.

Many WordPress theme files particularly functions.php file 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.

<?php
// Lots of code in your theme's functions file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

Remember that tutorial writers may sometime assume that you already know how to use PHP start and end tags. They may simply show you a code snippet without those tags.

function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

Since the tutorial author doesn’t know where you will be adding this code, they have skipped the PHP end and start tags. Now 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 logics, 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 wpbeginner_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 wpbeginner_tutorial() { 
echo "Hello World!"; 
} 
// Your custom code 
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/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 caused by adding a custom code in WordPress often result in a detailed error message. Most of them are syntax error, parse errors, or fatal errors due to unexpected characters.

The good part is that these errors will tell you which line in your code caused the error.

PHP error message

You can then go to the exact line to review the code and figure out what you missed. For this purpose 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 don’t panic. Simply connect to your website using a FTP client or File Manager app in cPanel. Next, locate the file where you added the code that caused the error and edit it.

You can try and fixing the issues with the code snippet. If you are unable to fix those issues, then remove the code and save your changes.

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.

Upload the file where you made the changes from your computer to your website while overwriting the old file.

For more ways to solve these issues, see our guide on 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. Need some code snippets that you can try on your website? See our list of extremely useful tricks for the WordPress functions file.

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.