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:

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

To use the code snippets plugin, you need to install it.

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 it 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. You’ll click on the “add new” button to open the page to add the snippet as seen below.

The next step would be to add the code to the snippet page and the title 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:

<?php

add_filter( 'show_admin_bar', '__return_false' );

?>

You can go back to the frontend post and refresh to see the new changes. You will 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, I try to upload an image, and we’ll get a WordPress security error as seen below

To overcome this error, and enable SVG uploads, we can use a code snippet to turn on this functionality.

We’ll need to create a new snippet and add the code below, save, and activate it.

<?php

function smartwp_enable_svg_upload( $mimes ) {
  //Only allow SVG upload by admins
  if ( !current_user_can( 'administrator' ) ) {
    return $mimes;
  }
  $mimes['svg']  = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  
  return $mimes;
}
add_filter('upload_mimes', 'smartwp_enable_svg_upload');

?>

We then retry the upload, and it is successful 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!