html to wordpress

    1

    Converts static HTML into WordPress ACF blocks while automatically matching your theme's specific architecture.

    Free

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    html to wordpress

    Example session with this skill installed

    Convert this static HTML hero section into an ACF block. It has a background image, an H1, and two CTA buttons. Match my theme's existing block structure.

    • Read your context and instructions
    • Compiled the html to wordpress

    I have analyzed the theme architecture and detected

    Branch A (Classic + legacy ACF blocks) based on the presence of acf_register_block() in blocks/blocks.php and the absence of a root theme.json. I will proceed by creating the template and registration code matching your oe-hero-slider pattern.

    Hero Block Conversion (Branch A)

    The following files have been generated to create the oe-primary-hero block.

    1. Block Registration (Add to blocks/blocks.php)

    acf_register_block( array(
    'name'            => 'oe-primary-hero',
    'title'           => __( 'Primary Hero' ),
    'description'     => __( 'A custom hero section with background image and CTAs.' ),
    'render_template' => 'blocks/oe-primary-hero/template.php',
    'category'        => 'formatting',
    'icon'            => 'align-center',
    'keywords'        => array( 'hero', 'banner' ),
) );

    2. Template File (blocks/oe-primary-hero/template.php)

    <?php
/**
 * Primary Hero Block Template.
 */
$id = 'oe-hero-' . $block['id'];
$bg_image = get_field('background_image');
$title    = get_field('title');
$buttons  = get_field('buttons'); // Repeater field
?>
<section id="<?php echo esc_attr($id); ?>" class="oe-hero-section" style="background-image: url('<?php echo esc_url($bg_image['url']); ?>');">
    <div class="container">
        <?php if ( $title ) : ?>
            <h1 class="oe-hero-title"><?php echo esc_html( $title ); ?></h1>
        <?php endif; ?>
        
        <?php if ( have_rows('buttons') ) : ?>
            <div class="oe-hero-actions">
                <?php while ( have_rows('buttons') ) : the_row(); 
                    $link = get_sub_field('link');
                    if ( $link ) : ?>
                        <a href="<?php echo esc_url($link['url']); ?>" class="btn btn-primary">
                            <?php echo esc_html($link['title']); ?>
                        </a>
                    <?php endif;
                endwhile; ?>
            </div>
        <?php endif; ?>
    </div>
</section>

    Next steps

    1. Add the acf_register_block call to your blocks.php file.
    2. Create a new ACF Field Group in the WordPress admin named "Block: Primary Hero".
    3. Map the fields: background_image (Image), title (Text), and buttons (Repeater with Link sub-field).

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Converting static HTML components into functional WordPress ACF blocks often results in architectural drift and broken designs. This skill solves that by first analyzing your existing theme to detect whether it uses legacy PHP-based ACF blocks or modern Full Site Editing (FSE) block.json conventions. It then performs a 1:1 conversion that preserves your exact CSS classes, JS interactions, and accessibility markers without introducing foreign coding patterns.

    What it does

    • Architecture detection identifies if the theme is Branch A (Classic/PHP) or Branch B (FSE/JSON) before writing any code.
    • 1:1 design preservation maintains original class names, responsive breakpoints, and animations in the new block.
    • Automated field mapping converts HTML content areas into appropriate ACF field types, including repeaters and galleries.
    • Accessibility enforcement wires up ARIA roles, keyboard operability, and semantic heading hierarchies.
    • Asset management enqueues CSS and JS only when the block is present on the page to maintain performance.

    How it works

    1. Analyze the local environment to determine the current WordPress theme architecture.
    2. Scan the target HTML to map sections to block slugs and interaction models (tabs, sliders, etc.).
    3. Generate the necessary PHP templates, JSON configurations, and field group logic based on the detected branch.
    4. Verify the output against quality gates for SEO, performance, and responsive behavior.

    Frameworks & tools

    WordPress, Advanced Custom Fields (ACF), PHP, JavaScript, CSS/SASS, and HTML5.

    Why this beats prompting it yourself

    Standard prompts often hallucinate modern block.json structures into legacy themes or miss critical WordPress escaping functions. This skill uses a strict preservation contract and branch-specific recipes to ensure the code actually works within your specific project's constraints.

    Use cases

    • Mockup conversion to turn a static HTML/CSS design into a dynamic Gutenberg editor experience.
    • Legacy migration for moving hardcoded PHP page templates into flexible ACF blocks.
    • Component porting to bring external UI library components into a specific WordPress theme ecosystem.

    Known limitations

    Requires an existing WordPress theme structure to detect architecture. It does not generate the ACF field groups inside the WP admin UI; it provides the code or JSON to register them.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 7 days ago

    • Free to download with an account

    Requires

    Node.js

    Listed7 days ago

    What's inside

    Frequently Asked Questions