BP Dev Tools

A modern, Vue-powered directory of developer tools for WordPress development.

Description

BP Dev Tools provides a centralized dashboard for managing various development utilities in WordPress. Built with Vue 3, Vite, and Tailwind CSS, the plugin features a modern, reactive interface where you can enable/disable tools and access their functionality.

Key Features

• Modern Tech Stack: Built with Vue 3 + Vite + Tailwind CSS
• Reactive UI: Fast, responsive interface with hot module replacement
• Modular Tool System: Enable only the tools you need
• Sidebar Navigation: Clean, organized interface with left sidebar navigation
• State Management: Pinia-powered state management for seamless data flow
• AJAX-Powered: Smooth, no-reload tool toggling
• Extensible Architecture: Easy to add custom tools via hooks and Vue components
• WordPress Standards: Follows WP coding standards and best practices
• Production-Ready: Optimized builds with tree-shaking and code splitting

Available Tools

The plugin currently includes:

1. Slug Scanner - Scan and analyze post slugs across your WordPress site for optimization and SEO purposes (Coming Soon)

More tools will be added based on development needs!

Tech Stack

Frontend

• Vue 3 - Progressive JavaScript framework with Composition API
• Vite - Next generation frontend tooling for blazing fast HMR
• Tailwind CSS - Utility-first CSS framework (properly integrated, not CDN)
• Pinia - Intuitive Vue state management
• Axios - Promise-based HTTP client

Backend

• WordPress - PHP-based CMS
• WordPress AJAX API - For communication between Vue and PHP
• WordPress Settings API - For storing plugin settings

Build Tools

• Vite - Module bundler and dev server
• PostCSS - CSS transformations
• Autoprefixer - Automatic vendor prefixing
• Terser - JavaScript minification

Installation

From Source

1. Upload the bp-dev-tools folder to /wp-content/plugins/
2. Navigate to the plugin directory:

   cd /wp-content/plugins/bp-dev-tools

3. Install dependencies:

   npm install

4. Build production assets:

   npm run build

5. Activate the plugin through 'Plugins' in WordPress
6. Navigate to 'Dev Tools' in the admin menu

For Development

1. Clone or download the plugin
2. Install dependencies:

   npm install

3. Start watch mode:

   npm run watch

4. Activate plugin in WordPress
5. Edit Vue components, save, refresh WordPress!

Usage

Enabling Tools

1. Go to Dev Tools > General Settings
2. You'll see a grid of available tools (3-column layout)
3. Toggle the switch for any tool to enable/disable it
4. Enabled tools will automatically appear in the left sidebar
5. Click on any enabled tool to access its settings and functionality

Accessing Tool Settings

Once a tool is enabled:

1. It appears in the left sidebar navigation
2. Click on the tool name to open its settings page
3. The tool's interface loads in the main content area
4. All interactions are reactive and instant

User Interface

The plugin uses a sidebar-based layout:

• Header: Shows plugin name and enabled tool count
• Left Sidebar: Navigation menu with General Settings + enabled tools
• Main Content: Active page content (tool interfaces)
• Toast Notifications: Success/error messages for actions

Development

Project Structure

bp-dev-tools/
├── bp-dev-tools.php           # Main plugin file
├── includes/
│   ├── admin/
│   │   └── class-admin.php    # WordPress admin integration
│   ├── class-database.php     # Database handler
│   └── class-install.php      # Installation handler
├── src/                       # Source files (not deployed)
│   ├── vue/                   # Vue components
│   │   ├── App.vue            # Root component
│   │   ├── components/        # Reusable components
│   │   │   ├── AppHeader.vue
│   │   │   ├── Sidebar.vue
│   │   │   ├── ToolCard.vue
│   │   │   ├── ToolToggle.vue
│   │   │   ├── ToastContainer.vue
│   │   │   └── tools/        # Tool-specific components
│   │   ├── views/            # Page components
│   │   │   ├── GeneralSettings.vue
│   │   │   └── ToolPage.vue
│   │   ├── store/            # Pinia stores
│   │   │   └── tools.js
│   │   └── composables/      # Reusable composition functions
│   ├── css/
│   │   └── app.css           # Tailwind CSS entry
│   └── js/
│       └── admin-app.js      # Vue app entry point
├── dist/                     # Compiled assets (deployed)
│   ├── css/
│   │   └── admin.css         # Compiled Tailwind CSS
│   └── js/
│       └── admin.js          # Compiled Vue app
├── vite.config.js            # Vite configuration
├── tailwind.config.js        # Tailwind configuration
├── postcss.config.js         # PostCSS configuration
└── package.json              # Dependencies and scripts

Adding a New Tool

1. Register in PHP

Edit includes/admin/class-admin.php:

private function register_available_tools() {
    $this->available_tools = array(
        'your-tool' => array(
            'id'          => 'your-tool',
            'title'       => __( 'Your Tool', 'bp-dev-tools' ),
            'description' => __( 'Description of your tool.', 'bp-dev-tools' ),
            'icon'        => 'dashicons-admin-generic',
        ),
    );
}

2. Create Vue Component

Create src/vue/components/tools/YourTool.vue:

<template>
  <div class="your-tool">
    <h3>Your Tool Interface</h3>
    <!-- Your tool's UI here -->
  </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  tool: {
    type: Object,
    required: true
  }
})

// Your tool's logic here
</script>

3. Register Component

Edit src/vue/views/ToolPage.vue:

import YourTool from '@components/tools/YourTool.vue'

const toolComponents = {
  'your-tool': markRaw(YourTool),
  // ... other tools
}

4. Build and Test

npm run build

That's it! Your tool will now appear in the General Settings and can be toggled on/off.

Build Commands

# Development server with HMR
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

Coding Standards

• PHP: WordPress Coding Standards
• JavaScript: ESLint + Vue style guide
• CSS: Tailwind utility classes
• Vue: Composition API with `