How Do I Use the Custom Javascript and CSS Areas?

The Instagram Feed plugin comes with a lot of settings to customize the feed. If you need even more customization, using the Custom JavaScript and Custom CSS areas are ideal for doing so. Here’s how they work.

Custom CSS area

All code saved in the “Custom CSS” area is added to the source of the page in the “header” element. It’s added to the page after the plugin’s CSS file is added.

Custom JavaScript area

The Custom JavaScript area supports regular JavaScript as well as jQuery. It fires after the feed is done loading on the page as well as after the “Load More” button is clicked and the new posts are done being added to the feed.

Customizing the Lightbox

To make customizations to the plugin’s lightbox, a JavaScript function is fired every time the lightbox opens or changes posts. This function is specifically intended to be used to make customizations by being overriden. To add JavaScript to this function, simply redeclare it with this syntax:

window.sbiLightboxAction = function() {
   // add code here
};