A professional travel booking and management system for WordPress with modern React admin interface.

Author: MantraBrain · WordPress.org: Plugin page · Support (reviews): 5-star reviews on WordPress.org · Contact: MantraBrain · Rate the plugin: Add a review

• WordPress 6.0+
• PHP 8.0+
• Node.js 18+
• npm or yarn

1. Clone the plugin to your WordPress plugins directory:

cd /path/to/wordpress/wp-content/plugins/
git clone <repository-url> yatra

2. Install PHP dependencies:

cd yatra
composer install

3. Install JavaScript dependencies:

npm install

4. Activate the plugin in WordPress admin

This section is for site owners, marketers, and implementers who want to embed Yatra catalogs on normal WordPress pages (block themes, classic pages, Elementor/WP Bakery-style builders that support blocks or shortcodes).

You can publish a plain WordPress page (any URL you like, built with any page builder) and place a Tour listing or showcase block/shortcode on it. Catalog filters use published classification IDs only (digits), not slugs—in the block editor you pick items from a multi-select list; in shortcodes you pass comma-separated IDs.

The Tour block and [yatra_trip] / [yatra_tour] shortcodes use the same filtering rules (IDs). Public trip archive URLs and the main trip listing can still use slug-based query parameters internally; that path is separate from these shortcodes/blocks.

In WordPress Admin → Yatra → Trips, open:

Trip categories here are Yatra trip types (e.g. Adventure, Family), not WooCommerce categories.

Both tags render the same trip grid.

Classification filters (IDs only)

If any token is non-numeric, that attribute is ignored for filtering (so stray text does not match partial lists).

Combining filters

You can use several attributes together. Filters stack: trips must match every dimension you set (among other optional constraints such as price range).

Examples

[yatra_trip destination="44"]

[yatra_trip destination="44,52" per_page="9" columns="3"]

[yatra_trip destination="44" activity="12" category="8"]

Other useful attributes (trip grid)

• featured — 1 / yes style values: only trips marked featured (when stored on the trip).
• search — keyword search across trip fields (and searchable attribute metadata in filters).
• difficulty — comma-separated difficulty classification IDs (see table above).
• price_min, price_max — numeric.
• duration_min, duration_max — days (whole numbers).
• order — asc or desc (creation date ordering for this listing).
• per_page, columns, show_pagination, title — layout and header.

Pagination for the grid uses the trip_page query argument where applicable.

Gutenberg block

Insert Tour (yatra/tour). Trip Settings controls layout. Filters provides multi-select pickers (loaded from GET /wp-json/yatra/v1/block-editor/taxonomy-choices), plus search, difficulty, price, and duration. Saving the block stores numeric ID arrays; legacy posts that still had comma-separated fields are migrated in the editor when you open the block.

These shortcodes render cards for destinations / activities / trip categories (not the trip grid):

• [yatra_destination] — block Destination (yatra/destination)
• [yatra_activity] — block Activity (yatra/activity)
• [yatra_trip_category] — block Trip categories (yatra/trip-category)

Filtering which items appear

Use comma-separated IDs on the shortcodes (destination, activity, category). Omit the attribute to list all published items (subject to pagination and other options). Blocks use the same REST-backed multi-select; attributes are stored as ID arrays.

Examples

[yatra_destination destination="44"]

[yatra_destination destination="44,52"]

[yatra_activity activity="12"]

[yatra_trip_category category="8"]

In the editor, use the multi-select picker in each block’s sidebar (with optional “filter list” search above the list).

Choosing a URL such as /norway is done with normal Pages → permalink settings in WordPress. Yatra filters (Hooks) documented in PHP can remap incoming URLs and outbound archive links — see SettingsService / includes/helpers.php and filters like yatra_destination_permalink and yatra_frontend_request_path if developers need deep integration.

Add the following to your wp-config.php file:

// Enable WordPress debugging
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

// ⚠️ IMPORTANT: Enable Yatra development mode for auto-reload
define('YATRA_DEV_MODE', true);

// Disable script concatenation for development (better debugging)
define('CONCATENATE_SCRIPTS', false);
define('COMPRESS_SCRIPTS', false);

// Disable debugging in production
define('WP_DEBUG', false);

// ⚠️ IMPORTANT: Remove or set to false for production
// define('YATRA_DEV_MODE', false);

// Enable script optimization for performance
define('CONCATENATE_SCRIPTS', true);
define('COMPRESS_SCRIPTS', true);

• Never enable YATRA_DEV_MODE on production servers
• Never enable WP_DEBUG on production servers
• The YATRA_DEV_MODE constant is required for auto-reload functionality

npm run dev

The Vite dev server will start on http://localhost:3000 with:

• ✅ Hot Module Replacement (HMR)
• ✅ Auto-reload on file changes
• ✅ Source maps for debugging
• ✅ React DevTools support

Open your WordPress admin:

https://your-site.test/wp-admin/admin.php?page=yatra

Features in Development Mode:

• 🔄 Auto-reload: Changes to TypeScript/React files appear instantly
• 🛠️ Live debugging: Source maps and React DevTools
• 📱 Responsive testing: Mobile-friendly development
• 🔐 API integration: Full WordPress REST API access

npm run build

This command:

• Compiles TypeScript to JavaScript
• Optimizes and minifies all assets
• Generates source maps
• Creates block asset files
• Generates translation files

For production, ensure your wp-config.php has the Production Mode Constants (see section above):

// Disable debugging in production
define('WP_DEBUG', false);

// ⚠️ IMPORTANT: Remove or comment out development mode
// define('YATRA_DEV_MODE', false);

// Enable script optimization for performance
define('CONCATENATE_SCRIPTS', true);
define('COMPRESS_SCRIPTS', true);

Key Changes for Production:

• ❌ Remove YATRA_DEV_MODE constant (or set to false)
• ❌ Set WP_DEBUG to false
• ✅ Enable script concatenation and compression

yatra/
├── app/                          # PHP application code
│   ├── Bootstrap.php            # Plugin bootstrap
│   ├── Controllers/            # MVC controllers
│   ├── Models/                 # Data models
│   ├── Providers/              # Service providers
│   └── Repositories/           # Data repositories
├── resources/js/               # React/TypeScript frontend
│   ├── components/             # React components
│   ├── hooks/                  # Custom React hooks
│   ├── lib/                    # Utility libraries
│   └── main.tsx               # Application entry point
├── templates/                  # PHP templates
├── assets/                     # Built assets (generated)
│   ├── admin/dist/            # Admin panel assets
│   └── dist/                  # Frontend assets
├── i18n/languages/             # Translation files
├── routes/                     # API routes
├── scripts/                    # Build scripts
└── vite.config.ts             # Vite configuration

npm run dev          # Start development server with HMR
npm run type-check    # TypeScript type checking
npm run lint          # Run ESLint
npm run lint:fix      # Fix ESLint issues
npm run format        # Format code with Prettier
npm run format:check  # Check code formatting

npm run build         # Build for production
npm run clean         # Clean build artifacts
npm run preview       # Preview production build

npm run makepot       # Generate translation files
npm run i18n          # Alias for makepot

The plugin includes a sophisticated auto-reload system:

1. Vite Dev Server: Serves assets with HMR
2. WordPress Integration: Seamlessly loads dev assets in admin
3. API Authentication: Maintains WordPress nonce in dev mode
4. Hot Module Replacement: Instant updates without page refresh

Development mode includes full API access:

• ✅ WordPress REST API authentication
• ✅ User permissions and capabilities
• ✅ Media library integration
• ✅ Translation support

• React DevTools: Available in development
• Source Maps: Full debugging capability
• Console Logging: Detailed error reporting
• Network Inspector: API call monitoring

npm run build

Upload the entire plugin directory to your production server.

Ensure production wp-config.php settings are applied.

• ✅ Admin panel loads correctly
• ✅ All features work without errors
• ✅ API calls authenticated properly
• ✅ Assets optimized and minified

# Check if Vite server is running
lsof -i :3000

# Restart development server
npm run dev

• Verify YATRA_DEV_MODE is defined in wp-config.php
• Check user has required WordPress capabilities
• Ensure nonce is being passed correctly

# Clean and rebuild
npm run clean
npm run build

# Check TypeScript errors
npm run type-check

• Verify build completed successfully
• Check file permissions in assets/ directory
• Ensure WordPress can access built files

1. Always hard refresh (Ctrl+Shift+R) after changing dev mode settings
2. Check browser console for HMR connection status
3. Monitor network tab for API call debugging
4. Use React DevTools for component inspection

• TypeScript: Strict type checking enabled
• ESLint: Enforced code quality
• Prettier: Consistent code formatting
• React Hooks: Follow React best practices

1. Create feature branch from main
2. Develop with npm run dev
3. Test thoroughly
4. Run npm run build to verify production build
5. Submit pull request

• Development: Unminified with source maps
• Production: Optimized and minified
• Bundle Splitting: Separate admin and frontend assets
• Lazy Loading: Components loaded on demand

• Never enable YATRA_DEV_MODE in production
• Development server (localhost:3000) should not be publicly accessible
• Debug information is exposed in development

• All assets are minified and optimized
• Debug information is disabled
• WordPress security best practices apply

For development issues:

1. Check this README first
2. Review browser console for errors
3. Verify WordPress configuration
4. Check network connectivity for API calls

GPL v2 or later

Happy Development! 🚀