How to Use Custom code snippets in WordPress
This article was first published on the Aeeiee Blog.
WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes. There are times when we might want to add custom code to our theme’s functions.php file or in one of our plugins specific to a particular site. This article will show you a very seamless way of adding your custom code to WordPress.
Methods of adding custom code snippets in WordPress
There are a variety of ways by which custom code can be added in WordPress. We are going to briefly talk about all of them but focus mainly on one:
- Using the Code snippets plugin
This is the method we are going to focus on in this article. Code Snippets is a WordPress plugin that allows you to easily add and manage custom code snippets on your website.
One of the best features of this plugin is that it comes with a fail-safe switch which immediately deactivates a code snippet if it causes an error. This is very important because it protects users from losing access to your website when adding a custom code snippet.
Note: This method will not work for snippets that need to be added to other theme files. It will only work for snippets that need to be added to the functions file.
2. Add Code Directly To Functions File
You can add code snippets directly to the functions.php file of your theme but there are some caveats to doing this. Firstly, you will have to add your code snippets to the function file after every theme update because your changes would be cleared. Secondly, your code snippets would only work on your website whenever you use that particular theme.
3. Create a site-specific plugin for your custom code snippets
You can create a site-specific plugin to house your custom code. This is a more flexible approach as it isn’t themed-dependent. Your code snippet will still continue to remain active and work even after a theme change. This method is also not affected by any WordPress updates.
4. Create a Child Theme to Save Custom Code
The last approach is to create a child theme. Using a 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. One advantage of this method is that it will also work for code snippets that are needed to be added in other theme templates.
Using the Code Snippets Plugin
In order to understand how to practically use the code snippets plugin, I am going to walk you through these examples while using the code snippets plugin:
- To disable the admin dashboard on the frontend
- To add SVG images to the list of formats accepted by the WordPress media.
But before you can use the code snippets plugin to perform these functions, you need to install it.
How to Install Code Snippets Plugin
Firstly, go to the admin area of the dashboard, and navigate your way to the left-hand side of the dashboard. You’ll see the plugin menu as shown below:
Click on the “Add new” at the top of the page, enter “code snippets” into the search bar as shown below. The code snippets plugin should be the first plugin on the returned list.
Click on install, and activate the plugin. Your plugin page should look similar to the image below.
Your snippets plugin is now available for use, and custom code snippets can be added to it to achieve our desired goal.
Next, we are going to use the code snippets plugin to disable the admin dashboard on the front end and upload the SVG file.
How to disable the admin dashboard on the Frontend Using Code Snippets plugin:
The first thing you need to do is to create a new post using the post menu on the dashboard as shown in the screenshot below.
Note that before writing and running the code snippet, this is how the post will look like on the front end:
Now, to run the snippet, navigate to the snippet area of the dashboard using the snippets menu. Click on the “add new” button to open the page to add the snippet as seen below.
The next step is to add the code and the title to the snippet page as shown in the screenshot below. When you are done, you can save and activate the snippet.
The code for disabling the dashboard can be seen below:
You can now go back to the frontend post and refresh to see the new changes. You’ll notice that the admin dashboard is no longer visible as seen in the image below.
This is a simple example of how to use the code snippets plugin to add code to your website.
How to add SVG images to the list of formats accepted by the WordPress media using Code Snippets Plugin
The SVG format is becoming more popular, especially for logo files. By default, WordPress does not allow SVG upload for security reasons. In this example, I’m going to show you how to allow SVG uploads for administrators using the code snippet plugin.
Firstly, navigate to the media section of the dashboard by clicking on the media menu on the left-hand side of the dashboard as seen below.
Next, try to upload an image, and you should get a WordPress security error as seen below:
To overcome this error and enable SVG uploads, you can use a code snippet to turn on this functionality.
This means that you’ll need to create a new snippet as explained earlier in the article. Then add this code below, save and activate it.
After the snippet has been activated, you can retry the upload, and it should successfully enable you to upload an SVG file as seen in the screenshots below.
There are more complex things that can be achieved by using the code snippets plugin. You can add a variety of code snippets that can be saved and run on your website irrespective of the theme used. I hope this article helped. Thank you for reading!
