Code Snippets is an amazing plugin to add functions to current theme without the need of making a child theme or FTP.
This plugin allows you to add custom code into your website, no matter which theme you are using. This is a great way for function extension, because:
- Old functions stay when you change themes,
- Better separation between style (theme) and function (plugin),
- No need to mess around with functions.php file.
To be able to use this plugin, you will need to have the right to install plugins from WordPress Dashboard.
Examples what you can do with Snippets
- Add custom tracking code, e.g Google Analytics, Tag Manager, Adsense, Amazon OneTag, Facebook Pixel, etc.
- Using WordPress actions and filters hooks to change content or add actions.
And when you do not want to have that code anymore, just disable the piece of code and it’s done!
Even better: You can export the code snippets and import it to other WordPress websites.
Example 1: Add Google Analytics tracking code with Snippets and add_action hook
Let’s make a new Snippet with this code:
add_action( 'wp_head' , 'ak_add_google_analytics' );
function ak_add_google_analytics() {
// Add your Google Analytics tracking code here
}
Then choose one of these options:
- Run snippet everywhere
- Only run in administration area
- Only run on site front-end
- Only run once
For the GA tracking code, we only need to run it on the site front-end.
In this example: we hook into the wp_head action and inject our GA tracking code right in the beginning of <head> tag with priority “1”. After that, delete cache, go to the web browser, right click and “View Page Source” to see if the code is installed successfully.
Example 2: Add MailChimp exit pop-up to WordPress with Snippets
The MailChimp email automation tool provides a useful exit pop-up for a website to collect emails. You can create/config/design the pop ups on MailChimp end and then integrate a piece of Javascript code on your website so it will run automatically.
add_action( 'wp_footer' , 'ak_add_mailchimp_exit_popup' );
function ak_add_mailchimp_exit_popup() {
// Add the JavaScript MailChimp code here
}
Then activate the Snippet and choose to run it on front-end site. Similar to the example of Google Analytics, here we inject the code into the footer with the hook wp_footer. Why not use wp_head? We can, but we should not. Unlike the analytics, which should be fired as soon as possible so that it can capture important user behavior e.g events, the exit pop-up has lower priority so that it can wait until all of the website content loads before being triggered.
Example 3: Add a custom message at the end of a post
So this piece of code is helpful if you want to add a small line at the end of all articles. For example, if you have a message that you would like to promote, it is easier to add the message this way, rather than opening all articles and manually adding the text line.
add_action( 'the_content' , 'ak_add_message_content_after' );
function ak_add_message_content_after( $content ) {
// bail out if the post type is not suitable
if(!is_singular('post')) return $content;
$message = 'This will be added at the end of each article.';
return $content . $message;
}
This time we use add_filter and the_content to modified the content of a page. We need to wrap the code snippet in the conditional is_singular(‘post’) because we do not want to show the message on all the pages, but only on posts.
