Custom code snippets are small pieces of code that you can add to your WordPress website to change its appearance or functionality. They are also useful for adding features that are not available in your theme or plugins.
For example, you can use custom code snippets to change the color of your site’s background, add a new widget area, create a contact form, etc.
However, adding custom code in WordPress can be tricky if you don’t know what you are doing. If you make a mistake, you might break your site or cause security issues. That’s why you need to be careful and follow some best practices when adding custom code snippets in WordPress.
In this blog post, we will discuss a complete step-by-step guideline on how to easilyadd custom code in WordPress without any breakdown of your website. So, start reading now!
- 1 The Key Issue with Custom Code in WordPress and How to Fix It:
- 2 How to Simply Add Custom Code in WordPress? [Step-By-Step Guidelines]
- 2.1 Step#1: Installing & Activating the WPCode Plugin:
- 2.2 Step#2: Clicking on the Code Snippets and then hit on the “Add New” option:
- 2.3 Step#3: Choosing the “Use Snippet” button to add the custom code:
- 2.4 Step#4: Creating the Custom Snippet:
- 2.5 Step#5: Inserting Your Preferred Code Snippet:
- 2.6 Step#6: Using the “Smart Conditional Logic” Section:
- 3 Step#7: Managing Your Custom Code Snippets:
- 4 Final Notes About How to Simply Add Custom Code in WordPress:
The Key Issue with Custom Code in WordPress and How to Fix It:
Sometimes you want to add some cool features to your WordPress site. You might find some tutorials online that tell you to copy and paste some code into your theme’s functions.php file or a site-specific plugin.
But there is a big problem with this. If you make even a small mistake in the code, you can break your site and make it stop working.
Also, if you update your theme, you will lose all the changes you made. Another problem is that if you add too many code snippets in one plugin, it can be hard to keep track of them.
But don’t worry, there is an easier way to add and manage the custom code snippets in WordPress.
WPCode is a plugin that lets you add custom code snippets in WordPress without touching your theme’s functions.php file.
WPCode also helps you add tracking codes for Google Analytics, Facebook Pixel, Google AdSense, and more to your site’s header and footer areas.
You don’t have to worry about breaking your website because WPCode checks your code for errors and warns you before saving it.
WPCode also has a library of ready-made code snippets that you can use for common WordPress tasks like disabling REST API, disabling comments, disabling Gutenberg, allowing SVG file uploads, and more. This way, you don’t have to install separate plugins for each feature.
One of the easiest parts is that you can see all your code snippets in one place and add tags properly to organize them. You can use WPCode for free and get all the basic features you need to add custom code in WordPress.
Now let’s see how to use WPCode to add custom code snippets in WordPress.
How to Simply Add Custom Code in WordPress? [Step-By-Step Guidelines]
Now, we’re going to talk about how to simply add custom code in WordPress by following step-by-step guidelines.
Let’s get started!
Step#1: Installing & Activating the WPCode Plugin:
The first and foremost thing, you have to install and then activate the free WPCode plugin on your WordPress website. If you don’t know how to install a plugin, see the below guidelines on how to install a WordPress plugin.
First of all, Go to your WordPress Dashboard. Click on the “Plugins” section and choose “Add New”
Then type “WP Code” in the top-right search bar. Click on the “Install Now” button.
Look at the below image. It will take some time to install the WordPress plugin.
Now, click on the blue “Activate” button.
Finally, the WP Code plugin has been successfully activated on your site.
After activating the plugin, you will see a new menu item called ‘Code Snippets’ in your WordPress dashboard.
Step#2: Clicking on the Code Snippets and then hit on the “Add New” option:
Now, click on the “Code Snippets” section and this function will display all the custom code snippets that you’ve saved on your website. Since this is your first time using the plugin, so your list can be empty.
To add a new code snippet, click on the ‘Add New’ button.
This will take you to the ‘Add Snippet’ page. Here you can select a code snippet from the library or add your own custom code. To add your own custom code, click on the ‘Use Snippet’ button under the “Add Your Custom Code” (New Snippet) option.
Step#4: Creating the Custom Snippet:
In the title box, you need to give a name for your custom code snippet. This should be something that helps you remember what the code does.
Then, you can copy and paste your code into the Code Preview box. Make sure to select the right code type from the drop-down menu on the right side.
For the tutorial purpose, we have added a custom code snippet to remove the WordPress version number from our testing website. Please look at the below image to understand quickly.
Step#5: Inserting Your Preferred Code Snippet:
Below the code box, you will see some options for inserting your code snippet. There are mainly two options: Auto Insert and Shortcode (Default).
With the 'Shortcode' option, the snippet will not show up automatically. You need to save the snippet first, and then you will get a special code for it that you can use anywhere on your website.
Now, if you select the ‘Auto Insert’ option, the code snippet will be added automatically and run on your website.
Therefore, you can choose where you want the snippet to run on your website. It can run only when you are in the WordPress admin area, only when people visit your site, or both. You can also pick a specific place on your site where you want the snippet to show up, like before or after your posts or inside your post content.
If you don't know what to choose, then just go with the default option 'Run snippet everywhere'.
Step#6: Using the “Smart Conditional Logic” Section:
You can use the awesome 'Smart Conditional Logic' segment to show or hide snippets that are “auto-inserted” depending on some rules.
After saving and activating the code snippet, it will be inserted into your website automatically, if that's what you chose, or shown as a shortcode.
Now, turn on the blue button to enable logic. Then click on the “Add new group” to set your preferred conditions.
For instance, you can show/ hide code snippets only to users who are logged in, load code snippets only on certain page URLs, and so on. Now, see the below screenshot to understand clearly!
When you scroll down more, you will notice a 'Basic info' part. You can write anything here that helps you remember what this code does, where you got it from, and why you are adding it to your WordPress website.
You can also give some tags to your code snippet. This will help you find your code snippets by function and topic.
The priority arena lets you control the order of the snippets when you want to show more than one snippet in the same place. By default, all snippets have a priority of 10. If you want a snippet to show up before others, just set the priority to a lower digit, such as 5.
When you are done with selecting options, switch from 'Inactive' to 'Active' in the top right-side corner. Then click on the 'Save Snippet' option.
If you are willing to save the “code snippet” and not activate it, then just click on the 'Save Snippet' option.
Look at the below screenshot! Your custom code snippet in WordPress has been successfully created and saved. Congrats!
Step#7: Managing Your Custom Code Snippets:
WPCode plugin makes it easy for you to manage properly your custom code snippets in WordPress.
You can quickly save the “code snippets” without activating them on your WordPress website. Then activate or deactivate them whenever you want. You can filter code snippets by location and type. You can also use tags to simply bring together your code snippets.
Moreover, you can export some or all of your code snippets. Just go to Code Snippets » Tools and click on the 'Export' option.
If you want to move websites to a different server, you can effortlessly import your “code snippets” to the new website. Just go to the Code Snippets -> Tools -> Import page. Then upload the file that you exported. That’s it. Done!
Final Notes About How to Simply Add Custom Code in WordPress:
After reading this blog post, we hope that you’ve learned the step-by-step process of how to add custom code in WordPress without hampering your website.
In a nutshell, custom code in WordPress is like a secret ingredient that you can add to your website to make it better. You can use it to change the colors, fonts, layout, or features of your website. You can also use it to add new things that your theme or plugins don’t have.
But custom code can also be risky if you don’t set it up appropriately. That’s why you should learn how to safely add custom code in WordPress without breaking your website.
Have any questions about adding custom code in WordPress? Please leave a comment below.
To read more tutorials/articles, visit our blog page today! Thanks for reading!