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

Time to time, we share tutorials on Technical Janu that involves users adding code snippets to their theme’s functions.php file. While this process is fairly easy for those who know how PHP works, it seems a bit tedious for new users. Often beginners want to accomplish the final result of the tutorial, but they lack the PHP knowledge to understand how to properly paste the code without breaking the site. There is nothing wrong with that, and if you are reading this article because you broke your site doing that, then we want to assure you that you are not the only one. All of us started at that point, and we have all made this mistake. In this article, we will show you how to avoid the most common mistakes while pasting PHP code from tutorials into your WordPress theme’s functions.php file.

Note: Theme’s functions.php file is located in /wp-content/themes/yourthemename/ folder. This is NOT the same as the core functions.php file located in the /wp-includes/ folder.

To understand how to properly paste the code, you need to understand the basic semantics of PHP.

1 2 3 4 5

//This is the opening tag of a PHP Code <?php //This is the closing tag of a PHP Code ?>

The reason why you need to familiarize yourself with this is because over 95% of the issues we have fixed for our users involve pasting the code in a wrong spot. So knowing the PHP semantics are very helpful. Below are some of the most popular mistakes we see.

1st Most Common Mistake

User finds a code on the website that is wrapped around with PHP like the one below, and they paste it on a wrong spot.

1 2 3 4 5 6

<?php add_filter( 'login_headerurl', 'custom_loginlogo_url' ); function custom_loginlogo_url($url) {     return 'http://technicaljanu.com'; } ?>

Example theme’s functions.php file code (Note usually theme’s functions.php file has a lot more code, but the idea is the same):

1 2 3 4 5 6 7 8 9 10 11 12

<?php //Tons of mumble jumble PHP code that already exists in your PHP file is here //User would copy and paste the snippet they found on the web like this: <?php add_filter( 'login_headerurl', 'custom_loginlogo_url' ); function custom_loginlogo_url($url) {     return 'http://technicaljanu.com'; } ?> ?>

Now this will obviously freak WordPress out because you have a PHP tag opening without closing an existing PHP tag. There are two ways of going about and fixing this issue. The first method is that we paste the item on the right spot:

1 2 3 4 5 6 7 8 9 10 11 12

<?php //Tons of mumble jumble PHP code that already exists in your PHP file is here //See how we properly closed the first open PHP tag ?> //Now we can open the PHP tag. <?php add_filter( 'login_headerurl', 'custom_loginlogo_url' ); function custom_loginlogo_url($url) {     return 'http://technicaljanu.com'; } ?>

Notice, how we properly pasted the PHP code after the previous one was closed.

Another method is to simply strip out the opening and closing tags from your new WordPress function. So the example would look like this:

1 2 3 4 5 6 7 8 9 10

<?php //Tons of mumble jumble PHP code that already exists in your PHP file is here   // New code just goes here (Notice how we stripped out the opening and closing PHP tags from the new code) add_filter( 'login_headerurl', 'custom_loginlogo_url' ); function custom_loginlogo_url($url) {     return 'http://technicaljanu.com'; } ?>

2nd Most Common Mistake

Each tutorial writer has their own style of writing. Some keep their snippets wrapped around with PHP tag which you saw in the example above. Other authors do not wrap their snippets around with PHP tags. This brings us to the second problem. If you have a code like this:

1 2 3 4 5 6

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');

The author is assuming that you know that this code is supposed to go within the PHP tags. Some even suggest that you place their code at the bottom of your theme’s functions.php file. Example of a rookie mistake is:

1 2 3 4 5 6 7 8 9 10 11 12

<?php //Tons of mumble jumble PHP code that already exists in your PHP file is here   ?> //Then the user paste the code here (Notice the PHP tags are already closed above): 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');

If you notice the user has pasted the code outside the PHP tags. WordPress doesn’t know what the code is, thus it break. A proper code would look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13

<?php //Tons of mumble jumble PHP code that already exists in your PHP file is here   //The new goes here 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'); //PHP End Tag ?>

3rd Most Common Mistake

Now that we have covered the opening and closing PHP tags issue, the last most common mistake that we see involves user pasting new snippets within an existing function.

Anatomy of a function usually looks like this:

1 2 3 4 5

function custom_function_name() { // This is the opening tag of a function // code specific to the function goes here } // This is the closing tag of a function

If you paste another function inside a function, then it will cause your site to break. Example of this mistake would be like:

1 2 3 4 5 6 7 8 9 10 11 12

function custom_function_name() { // This is the opening tag of a function // code specific to the function goes here 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'); } // This is the closing tag of a function

You cannot do this. Each functions are independent, so you cannot put the two together. Proper way of pasting would be like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function custom_function_name() { // This is the opening tag of a function // code specific to the function goes here } // This is the closing tag of a function 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');

The above three mistakes is probably the reason why your theme broke when you copied and pasted a snippet from web into your WordPress theme’s functions.php

Other Tips

There are times when we ran into issues just to find out that the pasted code had errors. Some are really careless errors like the developer not putting ; or closing a quote. Whereas others were functional errors with the code itself or user not following the instructions properly.

It is crucial that you have the plugin activated if it is being used in the tutorial. Some tutorial authors just call the plugin function directly in their snippet without having the conditional statement to check if the plugin exists. You can blame both the user and the author for this. The author should have had the conditional statement in place, but the user should also have read the article properly and installed the required the plugin.

There are times when you encounter long snippets that you really want. . Authors have a tendency of explaining the code to their users (which is a good thing), but it also causes errors in the code. So one thing that we do is scroll down or up to get the final code snippet rather than putting the pieces together by ourselves.

Have you encountered these mistakes? How did you dealt with them? Did you encounter an issue that we didn’t mention above? If so please share it in the comments with us.