How to Build a Instagram Feed Grid Plugin for WordPress
Posted on 19th June 2023
As a WordPress plugin developer, you may have been asked to create a WordPress plugin that displays an Instagram feed. This article will show you how to build a WordPress plugin that can display an Instagram feed in a grid.
The first thing you need to do is create a new folder for your plugin. For this example, we will call it “Instagram-Feed-Grid”.
Next, you need to create a file called “instagram-feed-grid.php” in your “Instagram-Feed-Grid” folder.
In your “instagram-feed-grid.php” file, you will need to write a plugin header. A plugin header is a comment block at the top of the file that contains information about the plugin, such as the name, author, version, etc.
After the plugin header, you will need to write a function that will register your plugin with WordPress.
Next, you need to write a function that will enqueue your plugin’s CSS and JS files.
Then, you need to write a function that will display your Instagram feed in a grid.
Finally, you need to hook your functions into WordPress.
Your “instagram-feed-grid.php” file should now look like this:
$media_id, “url” => $media_url, “caption” => $caption, “like_count” => $response[“data”][“like_count”], “comment_count” => $response[“data”][“comment_count”] );
Now that we’ve updated the $media array, we need to return it from the get_media() function.
Adding a Lightbox Feature
In the last tutorial, we saw how to display the images in the grid using the HTML element.
This works fine if we only want to display the images in the grid. But what if we also want to view the images in full size?
We can do this by adding a lightbox feature to our plugin.
A lightbox is a popup window that displays the image in full size. It also allows the user to scroll through the images in the grid without having to leave the page.
There are many different jQuery lightbox plugins available. For this tutorial, we’ll be using the Lightbox2 plugin.
This plugin is available for free from the WordPress plugin repository.
First, we need to install and activate the plugin.
Next, we need to edit the grid.php template file. This file contains the code that outputs the grid to the web page.
At the top of the file, we need to add a link to the Lightbox2 CSS file. We can do this by using the wp_enqueue_style() function.
This function takes two parameters. The first parameter is the name of the CSS file. The second parameter is the URL of the CSS file.
In our case, the name of the CSS file is “lightbox2”. The URL of the file is “https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css”.
After adding the link to the CSS file, we need to add a link to the Lightbox2 JavaScript file. We can do this by using the wp_enqueue_script() function.
This function takes two parameters. The first parameter is the name of the JavaScript file. The second parameter is the URL of the JavaScript file.
In our case, the name of the JavaScript file is “lightbox2”. The URL of the file is “https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js”.
After adding the link to the JavaScript file, the grid.php template file should look like this:
In the code above, we’ve added a link to the Lightbox2 CSS file. We’ve also added a link to the Lightbox2 JavaScript file.
We’ve also added the data-lightbox attribute to the tag. This attribute tells the Lightbox2 plugin which images to display in the lightbox.
In our case, we’ve set the data-lightbox attribute to “image-1”. This will display all of the images in the grid in the lightbox.
Now that we’ve added the lightbox feature, let’s take a look at how it works.
When you click on an image in the grid, the lightbox will popup and display the image in full size.
You can also click on the left and right arrow keys to scroll through the images in the lightbox.
Lastly, you can click on the X in the top-right corner to close the lightbox.
Adding Avatar and Username
In the last tutorial, we saw how to display the images in the grid.
In this tutorial, we’ll take things a step further by also displaying the username and avatar of the person who posted the image.
To do this, we’ll need to edit the get_media() function in our plugin. This function is responsible for retrieving the images from Instagram.
At the moment, this function only retrieves the image URL, caption, and ID. We need to edit it to also retrieve the username and avatar of the person who posted the image.
We can do this by making a few changes to the $url variable.
First, we need to add the fields parameter. This parameter specifies which data
