lisa100/toolbox-titanium

1```markdown2# WordPress Conversion Guide for Daily Dose Tools3 4## Step 1: Set Up WordPress Environment51. Install WordPress on your hosting62. Install required plugins:7   - Advanced Custom Fields (ACF) PRO8   - Custom Post Type UI9   - Elementor Pro (optional for page building)10 11## Step 2: Create Custom Post Type for Tools121. Go to CPT UI → Add/Edit Post Types132. Create "Tools" post type with these settings:14   - Plural Label: "Tools"15   - Singular Label: "Tool"16   - Supports: Title, Editor, Thumbnail17 18## Step 3: Create ACF Fields for Tools191. Create field group "Tool Details" with these fields:20   - Icon (Font Awesome picker)21   - Description (Text Area)22   - Modal Content (WYSIWYG Editor)23   - Shortcode (Text - for embedding)24 25## Step 4: Convert HTML/CSS to WordPress Theme261. Create a child theme based on a starter theme like Astra or GeneratePress272. Copy these files to your theme:28   - `style.css` → Convert to theme styles29   - `script.js` → Enqueue in `functions.php`30   - Components → Convert to WordPress shortcodes or blocks31 32## Step 5: Create Tool Template331. Create `single-tool.php` template file:34```php35<?php36get_header();37while (have_posts()) : the_post();38    // Display tool content39    the_title('<h1>', '</h1>');40    the_content();41    42    // Display modal if exists43    if ($modal_content = get_field('modal_content')) {44        echo '<div class="tool-modal">' . $modal_content . '</div>';45    }46endwhile;47get_footer();48?>49```50 51## Step 6: Create Tools Grid Shortcode52Add to `functions.php`:53```php54function tools_grid_shortcode() {55    ob_start();56    $tools = new WP_Query(['post_type' => 'tool', 'posts_per_page' => -1]);57    58    if ($tools->have_posts()) {59        echo '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">';60        while ($tools->have_posts()) {61            $tools->the_post();62            ?>63            <div class="tool-card" data-tool="<?php echo sanitize_title(get_the_title()); ?>">64                <div class="tool-icon">65                    <i class="<?php echo get_field('icon'); ?>"></i>66                </div>67                <h3><?php the_title(); ?></h3>68                <p><?php echo get_field('description'); ?></p>69            </div>70            <?php71        }72        echo '</div>';73    }74    return ob_get_clean();75}76add_shortcode('tools_grid', 'tools_grid_shortcode');77```78 79## Step 7: Convert JavaScript Functionality801. Keep existing JS but modify selectors to work with WordPress812. Enqueue scripts in `functions.php`:82```php83function enqueue_tools_scripts() {84    wp_enqueue_script('tools-script', get_stylesheet_directory_uri() . '/js/script.js', ['jquery'], '1.0', true);85    86    // Localize data if needed87    wp_localize_script('tools-script', 'toolsData', [88        'ajax_url' => admin_url('admin-ajax.php')89    ]);90}91add_action('wp_enqueue_scripts', 'enqueue_tools_scripts');92```93 94## Step 8: Create Page Template951. Create `page-tools.php` with:96```php97<?php get_header(); ?>98<main class="container mx-auto px-4 py-8">99    <!-- Hero Section -->100    <section class="hero-section">101        <?php echo do_shortcode('[tools_grid]'); ?>102    </section>103</main>104<?php get_footer(); ?>105```106 107## Step 9: Import Existing Tools1081. Create a new Tool post for each existing tool1092. Fill in the ACF fields:110   - Title: Tool name111   - Description: Short description112   - Icon: Feather/Font Awesome class113   - Modal Content: Paste HTML from component files114   - Shortcode: Unique ID for reference115 116## Step 10: Theme Customization1171. Add theme support in `functions.php`:118```php119add_theme_support('post-thumbnails');120add_theme_support('responsive-embeds');121```122 123## Additional Recommendations1241. Use a caching plugin for performance1252. Implement proper security measures1263. Set up regular backups1274. Consider using WP REST API for more dynamic functionality128```