🎨 Custom Craft Component (CCC)

A powerful WordPress plugin for creating custom frontend components with dynamic fields and template management.

Transform your WordPress development workflow with reusable, dynamic components that can be easily managed through an intuitive admin interface.

🌟 Key Features

🚀 Quick Start

🔧 Installation

1. Download the latest release from GitHub Releases
2. Upload to your WordPress /wp-content/plugins/ directory
3. Activate the plugin through WordPress admin
4. Navigate to Custom Components in your admin menu

🚀 Create Your First Component

• Go to Custom Components → Add New
• Enter component name: Hero Section
• Add fields: Title, Description, Button Text
• Save the component
• Assign to any page/post
• Configure field values
• View on frontend

📋 System Requirements

🎯 Use Cases

Perfect For:

• Landing Pages ✅
• Product Showcases 🛍️
• Testimonials 💬
• Team Sections 👥
• Service Blocks 🧰
• Call-to-Action Buttons 🎯

🔧 Core Functionality

🧩 Component Management

• ✅ Create unlimited components
• 🔀 Drag & drop field ordering
• 📑 Component duplication
• 📦 Bulk operations
• 🔍 Search/filter options

📝 Field Types

• Text Fields
• Textarea Fields
• URL Fields
• Email Fields
• Number Fields
• Checkbox Fields
• Select Dropdowns

🎨 Template Features

• Auto-generated PHP templates
• Custom helper functions
• Responsive design support
• SEO-friendly markup
• Hooks & filters for developers

💡 How It Works

1. Create Components - Design your structure via admin panel
2. Generate Templates - Templates are auto-saved in /ccc-templates/
3. Assign to Pages - Use meta box to add/configure components
4. Multiple Instances - Reuse the same component with different content
5. Frontend Display - Components render automatically with values

🛠️ Technical Highlights

🧱 Architecture

• MVC Pattern
• PSR-4 Autoloading
• WordPress Hooks
• Optimized DB Queries

⚙️ Performance

• Lightweight core
• Caching compatible
• Optimized SQL
• Lazy loading support

🔒 Security

• Nonce verification for AJAX
• Secure input sanitization
• Capability checks
• Prepared SQL statements

📚 Documentation

For Users

• 📖 User Guide
• 🎥 Video Tutorials
• ❓ FAQ
• 💬 Support Forums

For Developers

• 🔧 API Documentation
• 📁 Code Examples
• 🔌 Hooks & Filters
• 🛠️ Extendable Field Guide

🚀 Roadmap

✅ Version 1.4.0 (Coming Soon)

• 🖼️ Image field
• 📁 File upload
• 🎨 Color picker
• 📅 Date picker

🚧 Version 1.5.0 (Planned)

• 🔁 Repeater fields
• 🎯 Conditional logic
• 🖼️ Visual page builder
• 🧩 Component marketplace

🚀 Version 2.0.0 (Future)

• 🧱 Gutenberg integration
• ⚡ Elementor widget
• 🛒 WooCommerce support
• 🌐 Multisite compatibility

🤝 Contributing

We welcome contributions from the community!

Ways to Contribute

• 🐛 Report bugs
• 💡 Suggest features
• 📝 Improve documentation
• 💻 Submit code

Dev Setup

git clone https://github.com/789Abhi/CCC-Plugin.git
cd CCC-Plugin
composer install
npm install



📞 Support & Community
Get Help
GitHub Issues

WordPress Support

📧 Email: abhishektk18@gmail.com

Community
💬 GitHub Discussions

📚 Wiki Documentation

🐦 Twitter: @YourTwitter






📊 Stats & Recognition
⭐ Star this repo if you find it useful!




📄 License
This project is licensed under the GNU General Public License v2.0 or later.

Custom Craft Component Plugin
Copyright (C) 2024 Abhishek

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.



🙏 Acknowledgments
🧡 WordPress Community

👨‍💻 Contributors

🙌 Users & Testers

📦 Open Source Tools




💻 Made with ❤️ by Abhishek
Custom Craft Component - Where flexibility meets simplicity ✨




---

### ✅ What’s Improved:

- Structured Markdown syntax for optimal GitHub rendering
- Emojis and icons placed logically for visual impact
- Proper indentation and nesting for clarity
- Links, badges, and tables cleaned up and aligned
- Escaped or fixed any broken HTML/Markdown edge cases

Let me know if you'd like this exported into a downloadable file or added to a GitHub repo for you!




// Method 1: Direct array handling (like your original)
<?php if (is_array($checkbox) && !empty($checkbox)): ?>
    <ul>
        <?php foreach ($checkbox as $option): ?>
            <li><?php echo esc_html($option); ?></li>   
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

// Method 2: Simple display helper
<?php echo get_ccc_checkbox_display('checkbox', null, null, 'No options selected'); ?>

// Method 3: Different formats
<?php 
// Array format
$checkbox_array = get_ccc_checkbox_values('checkbox', null, null, 'array');

// String format
$checkbox_string = get_ccc_checkbox_values('checkbox', null, null, 'string');

// HTML list format
echo get_ccc_checkbox_values('checkbox', null, null, 'list');

// Options format
echo get_ccc_checkbox_values('checkbox', null, null, 'options');
?>




 <!-- Using Helper Functions -->
        <div class="helper_examples">
            <h3>Using Helper Functions:</h3>

            <!-- Using get_ccc_radio_display -->
            <div class="helper_section">
                <h4>Display Helper:</h4>
                <p><strong>Selected:</strong> <?php echo get_ccc_radio_display('radio_option', null, null, 'No radio option selected'); ?></p>
            </div>

            <!-- Using get_ccc_radio_values with different formats -->
            <div class="helper_section">
                <h4>Values Helper (String):</h4>
                <p><?php echo get_ccc_radio_values('radio_option', null, null, 'string'); ?></p>
            </div>

            <div class="helper_section">
                <h4>Values Helper (Array):</h4>
                <?php 
                $radio_array = get_ccc_radio_values('radio_option', null, null, 'array');
                if (!empty($radio_array)): ?>
                    <ul>
                        <?php foreach ($radio_array as $value): ?>
                            <li><?php echo esc_html($value); ?></li>
                        <?php endforeach; ?>
                    </ul>
                <?php else: ?>
                    <span>No value</span>
                <?php endif; ?>
            </div>

            <div class="helper_section">
                <h4>Values Helper (List):</h4>
                <?php echo get_ccc_radio_values('radio_option', null, null, 'list'); ?>
            </div>

            <div class="helper_section">
                <h4>Values Helper (Options):</h4>
                <p><?php echo get_ccc_radio_values('radio_option', null, null, 'options'); ?></p>
            </div>
        </div>
    </div>



SOLUTION: CSS Variables Approach
Method 1: Global CSS Variables (Recommended)

<style>
<?php echo get_ccc_color_css_variables_root('color'); ?>

.text_color {
    color: var(--ccc-color-main);
    transition: color 0.3s ease;
    cursor: pointer;
}

.text_color:hover {
    color: var(--ccc-color-hover);
}
</style>

<h2 class="text_color">Hello</h2>

## Color Field Helper Functions

For color fields with enhanced color data (main, hover, adjusted), you can use these specific helper functions:

### Method 2: Individual Color Values

```php
// Get individual color values
$main_color = get_ccc_field_color('color');           // Returns: #b92222
$hover_color = get_ccc_field_hover_color('color');    // Returns: #21c48e
$adjusted_color = get_ccc_field_adjusted_color('color'); // Returns: #b92222

// Use in inline styles
echo '<div style="color: ' . esc_attr($main_color) . ';">Main color text</div>';
echo '<div style="color: ' . esc_attr($hover_color) . ';">Hover color text</div>';
echo '<div style="color: ' . esc_attr($adjusted_color) . ';">Adjusted color text</div>';

Method 3: Combined Approach (Recommended)

<style>
<?php echo get_ccc_color_css_variables_root('color'); ?>

.custom-button {
    color: var(--ccc-color-main);
    background-color: var(--ccc-color-adjusted);
    transition: all 0.3s ease;
}

.custom-button:hover {
    color: var(--ccc-color-hover);
    background-color: var(--ccc-color-main);
}
</style>

<button class="custom-button">Hover me!</button>

Color Field JSON Structure

The color field stores data in this format:

{
    "main": "#b92222",
    "adjusted": "#b92222", 
    "hover": "#21c48e"
}

Available Color Functions

• get_ccc_field_color($field_name) - Get main color value
• get_ccc_field_hover_color($field_name) - Get hover color value
• get_ccc_field_adjusted_color($field_name) - Get adjusted color value
• get_ccc_color_css_variables_root($field_name) - Generate CSS variables (existing function)

All functions support optional $post_id and $instance_id parameters for flexibility.

Select Field Helper Functions

For select fields with single or multiple selection options, you can use these comprehensive helper functions:

⚠️ Important Note: If you're getting the string "Array" instead of an actual PHP array when using get_ccc_select_values() with the 'array' format, this usually means you're trying to output the array directly with echo or similar functions. Always check if the result is an array before outputting it.

Method 1: Main Function with Format Options

// Get select field values in different formats
$select_array = get_ccc_select_values('select', null, null, 'array');    // Returns: ['abhi', 'nachi']
$select_string = get_ccc_select_values('select', null, null, 'string');  // Returns: "abhi, nachi"
$select_list = get_ccc_select_values('select', null, null, 'list');      // Returns: "<ul><li>abhi</li><li>nachi</li></ul>"
$select_options = get_ccc_select_values('select', null, null, 'options'); // Returns: "abhi | nachi"

Method 2: Individual Helper Functions

// Get select field values using specific functions
$select_array = get_ccc_select_array('select');      // Returns: ['abhi', 'nachi']
$select_string = get_ccc_select_string('select');    // Returns: "abhi, nachi"
$select_list = get_ccc_select_list('select');        // Returns: "<ul><li>abhi</li><li>nachi</li></ul>"
$select_options = get_ccc_select_options('select');  // Returns: "abhi | nachi"

// Additional utility functions
$first_option = get_ccc_select_first('select');      // Returns: "abhi" (first selected option)
$option_count = get_ccc_select_count('select');      // Returns: 2 (number of selected options)

Method 3: Practical Usage Examples

// Display selected options as a list
$selected_options = get_ccc_select_array('select');
if (!empty($selected_options)): ?>
    <h3>Selected Options:</h3>
    <ul>
        <?php foreach ($selected_options as $option): ?>
            <li><?php echo esc_html($option); ?></li>
        <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p>No options selected</p>
<?php endif; ?>

// Display as comma-separated string
<p><strong>Selected:</strong> <?php echo esc_html(get_ccc_select_string('select')); ?></p>

// Display as HTML list
<?php echo get_ccc_select_list('select'); ?>

// Display as options with separators
<p><strong>Options:</strong> <?php echo esc_html(get_ccc_select_options('select')); ?></p>

// Get first selected option
<?php 
$first = get_ccc_select_first('select');
if ($first): ?>
    <p><strong>Primary Option:</strong> <?php echo esc_html($first); ?></p>
<?php endif; ?>

// Count selected options
<p><strong>Total Selected:</strong> <?php echo esc_html(get_ccc_select_count('select')); ?> options</p>

Method 4: Advanced Usage with Post/Instance Context

// Get select values for specific post
$post_select_array = get_ccc_select_array('select', 123);

// Get select values for specific component instance
$instance_select_array = get_ccc_select_array('select', null, 'instance_123');

// Get select values for specific post and instance
$specific_select_array = get_ccc_select_array('select', 123, 'instance_123');

Method 5: Conditional Logic

// Check if specific option is selected
$selected_options = get_ccc_select_array('select');
if (in_array('abhi', $selected_options)) {
    echo '<p>Abhi is selected!</p>';
}

// Check if multiple options are selected
if (get_ccc_select_count('select') > 1) {
    echo '<p>Multiple options selected</p>';
}

// Check if any options are selected
if (!empty(get_ccc_select_array('select'))) {
    echo '<p>At least one option is selected</p>';
} else {
    echo '<p>No options selected</p>';
}

Available Format Options

Function Parameters

All select field functions accept these parameters:

get_ccc_select_values($field_name, $post_id, $instance_id, $format)
get_ccc_select_array($field_name, $post_id, $instance_id)
get_ccc_select_string($field_name, $post_id, $instance_id)
get_ccc_select_list($field_name, $post_id, $instance_id)
get_ccc_select_options($field_name, $post_id, $instance_id)
get_ccc_select_first($field_name, $post_id, $instance_id)
get_ccc_select_count($field_name, $post_id, $instance_id)

• $field_name (required): The name of your select field
• $post_id (optional): Specific post ID, defaults to current post
• $instance_id (optional): Component instance ID for repeaters
• $format (optional): Output format for get_ccc_select_values()

Debugging Select Fields

If you're having issues with select fields, use the debug function:

// Debug select field values
debug_ccc_select_values('select', null, null, 'array');

// Or use the test shortcode
[ccc_select_test]

This will show you exactly what data is being retrieved and processed.

Troubleshooting Common Issues

1. Getting "Array" string instead of actual array:

• This usually happens when you try to echo or output an array directly
• Always check if the result is an array before outputting: if (is_array($select_array)) { ... }
• Use var_export(), print_r(), or json_encode() for debugging output

2. Function returns empty array:

• Check if the field name is correct
• Verify the field has values saved
• Check if you're using the correct post_id and instance_id

3. Multiple select not working:

• Ensure the field is configured with multiple: true in the admin
• Check if the field values are properly saved as arrays

Debug Tools:

• Use debug_ccc_select_values($field_name) to get detailed information
• Access /wp-content/plugins/custom-craft-component/test-select-array.php for comprehensive testing
• Check WordPress debug logs for detailed error information