Adding Custom Code
This guide applies to:
- Basic
- Professional
In this guide
Introduction
If you’re interested in adding custom code to enhance your interactive images, there are several methods that can be utilized to do so.
Feel free to take a look at our Styling with CSS and Customizing with PHP guides.
Adding CSS Snippets
Adding to Customizer
To add the CSS snippets to your theme, you can head on over to your WordPress Admin Dashboard > Appearance > Customize.
Once the Customizer is open, scroll on to where it says Additional CSS. This is where you can paste and save your CSS snippets.
Using the Simple Custom CSS and JS Plugin
In cases where you are using a block theme (like Twenty Twenty-Two) that prevents the use of the Customizer, a plugin for adding custom CSS can come in handy.
1. Setting up the plugin
Start by installing and activating the plugin Simple Custom CSS and JS within Plugins > Add New.
2. Add CSS Code
Once it has been set up, head to your WordPress Admin Dashboard > Custom CSS & JS, and click the Add CSS Code button at the top.
Now you can copy and paste your desired CSS snippets to modify your interactive image experience.
Adding PHP Snippets
Add to functions.php
If you’re comfortable adding PHP to your functions.php file, you can head to your WordPress Admin Dashboard > Appearance > Theme File Editor.
From here, you can locate your functions.php file and paste the PHP snippets here, preferably between the PHP beginning and closing tags.
Using the Code Snippets Plugin
1. Setting up the Plugin
Start by installing and activating the Code Snippets plugin within Plugins > Add New.
2. Add New Snippet
Head to your WordPress Admin Dashboard > Snippets, and click Add New.
You’ll now see an editor to add your custom PHP to. Make sure to remain on the Functions (PHP) tab while adding your code.
Once you’re done, you can press the button labeled Save Changes and Activate.
1. Setting up the Plugin
Start by installing and activating the WP Header & Footer plugin within Plugins > Add New.
2. Add New Snippet
Head to your WordPress Admin Dashboard > Code Snippets, and click Add New.
Within the Add Snippets, you’ll want to click Add Your Custom Code.
3. Activate Snippet
After you have created a new snippet, you’ll want to copy and paste the PHP snippets into the editor, and change the code type to PHP Snippet.
Once you’ve done this, you can click the toggle next to the Save Snippet button to switch it to active, and save your changes.
This handy guide also goes into detail about adding snippets to your site.
