Reels & Feed Showcase - WordPress Plugin

Developed a WordPress Instagram showcase plugin that lets website owners display Reels, posts, feeds, and profiles in customizable layouts.

Features

✨ Modern Instagram-Inspired UI

• Beautiful gradient color theme (#833AB4 → #C13584 → #E1306C → #F77737 → #FFDC80)
• Clean, professional dashboard design
• Smooth animations and transitions

🎨 4 Stunning Design Layouts

1. Horizontal Slider - Responsive card slider with navigation arrows and dots
2. Auto Carousel - Infinite loop carousel with auto-scrolling animation
3. Vertical Slider - Unique vertical scrolling with up/down navigation
4. Grid Layout - Clean grid display with hover effects

📱 Fully Responsive

• Mobile-optimized layouts
• Touch swipe support
• Adapts to all screen sizes

🚀 Easy to Use

• Multi-step creation wizard
• Simple URL input (up to 5 reels)
• One-click shortcode generation
• Copy shortcode with single click

⚡ Performance Optimized

• Lightweight code
• Fast loading
• Smooth animations
• No external dependencies except Instagram embed

Installation

1. Upload the reels-feed-showcase folder to the /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Click on 'Reels & Feed' in the admin menu or admin bar to get started

Usage

Creating a Showcase

1. Access the Plugin

   • Click "Reels & Feed" in the WP admin bar
   • Or navigate to the admin sidebar menu

2. Add New Showcase

   • Click the "Add Reels" button
   • Follow the 3-step wizard:

   Step 1: Choose Design

   • Select from 4 beautiful layout designs
   • Each design has unique features and animations

   Step 2: Add Reels

   • Enter a showcase name
   • Add 1-5 Instagram Reel URLs
   • URLs format: https://www.instagram.com/reel/[REEL_ID]/

   Step 3: Get Shortcode

   • Shortcode is automatically generated
   • Click "Copy" to copy to clipboard
   • Use shortcode anywhere on your site

3. Using the Shortcode

   • Add shortcode to any page or post: [reels_showcase id="1"]
   • Works with page builders (Gutenberg, Elementor, etc.)
   • Live preview in Elementor editor

Managing Showcases

The dashboard displays all your showcases with:

• Showcase name and design type
• Number of reels
• Creation date
• Shortcode with copy button
• Edit and delete actions

Design Types

1. Horizontal Slider

• Displays reels in a horizontal scrollable row
• Navigation arrows on sides
• Dots indicator at bottom
• Shows 3 cards on desktop, 2 on tablet, 1 on mobile
• Touch swipe enabled

2. Auto Carousel

• Infinite loop animation
• Automatically scrolls left to right
• Pauses on hover
• Seamless continuous display
• No empty spaces

3. Vertical Slider

• Unique vertical scrolling
• Up/down arrow navigation
• One reel at a time
• Smooth vertical transitions
• Horizontal slider on mobile

4. Grid Layout

• All reels visible at once
• Responsive grid columns
• Hover effects
• Clean organized layout

Technical Details

Requirements

• WordPress 5.0 or higher
• PHP 7.2 or higher
• jQuery (included with WordPress)

File Structure

reels-feed-showcase/
├── assets/
│   ├── css/
│   │   ├── admin.css
│   │   └── frontend.css
│   └── js/
│       ├── admin.js
│       └── frontend.js
├── includes/
│   ├── class-rfs-core.php
│   ├── class-rfs-admin.php
│   ├── class-rfs-ajax.php
│   └── class-rfs-shortcode.php
├── templates/
│   ├── admin/
│   │   ├── dashboard.php
│   │   └── add-reels.php
│   └── frontend/
│       ├── showcase-horizontal-slider.php
│       ├── showcase-auto-carousel.php
│       ├── showcase-vertical-slider.php
│       └── showcase-grid-layout.php
├── reels-feed-showcase.php
└── README.md

Based on Instagram's brand colors:

• Purple: #833AB4
• Pink: #C13584
• Red: #E1306C
• Orange: #F77737
• Yellow: #FFDC80

The plugin uses these colors in a gradient throughout the UI for a modern, recognizable Instagram aesthetic.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Build by Coder Sachin

Coder Sachin -- codersachin18.web.app