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

Do you want to learn how to paste snippets from the web into WordPress?

We publish a lot of WordPress tutorials that ask users to add code snippets to WordPress.

Copying and pasting code in WordPress theme files might seem easy for experienced users, but it can be intimidating for beginners.

In this article, we’ll show you how to copy and paste code snippets from the web into WordPress without breaking your site.

Beginner's guide to pasting snippets from the web into 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’s super easy to add new features and functionality to your site and can help build nearly any type of website.

We share all kinds of tips and tricks you can use to make your website better. Some of these tips will ask you to add code to WordPress.

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.

Often, adding code snippets can be an easy way to fix many common WordPress errors, improve your WordPress security, and add new features to your website.

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.

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.

WPCode code snippets plugin

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

Click 'Add New Snippet' in WPCode

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.

Add custom code in WPCode

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.

Paste custom snippet and choose code type

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.

Choose insertion option for code snippet

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.

WPCode Smart Conditional Logic

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.

Save and activate code snippet

Once the snippet is active, it will be added automatically or displayed as shortcode, depending on the insertion method you chose.

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

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, Facebook Pixel, Google AdSense, 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.

Add code to header and footer with WPCode

Make sure you click the ‘Save Changes’ button, and your code snippets will be live on your website.

For more details, see our guide on how to add header and footer code in WordPress.

Method 2: Adding Custom Code in Site-Specific WordPress Plugin

Create site specific 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.

Add code to site specific plugin

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.

Edit site-specific WordPress plugin using FTP

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.

For more details, see our guide on how to create a site-specific plugin for your website.

Method 3: Adding Custom Code to Functions.php or Other Theme Templates

Add code to functions.php example

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.

Add code to functions.php and other templates

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.

Edit theme files via FTP

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.wpbeginner.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.wpbeginner.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 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').'https://cdn.wpbeginner.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.

PHP error code example

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.