How to Make a WordPress Theme with Google Antigravity

What Is Google Antigravity?

Google Antigravity is an agentic development environment that can plan work, create and edit files, run terminal commands, open a browser, inspect results, and iterate. For theme creation, that means the agent can handle both the visual frontend and the mechanical conversion into WordPress PHP templates.

The useful part is not merely that it writes code. Antigravity can see the project as a system: HTML structure, stylesheets, scripts, image assets, PHP templates, file paths, and the final ZIP. You can ask it to preserve the design while changing the runtime from a static page to WordPress.

Is This a Classic Theme or a Block Theme?

The workflow in the video creates a classic WordPress theme. You can identify it from files such as header.php, footer.php, front-page.php, single.php, and archive.php. Classic themes primarily use PHP templates, WordPress hooks, CSS, and JavaScript.

A block theme is structured differently. Its templates are block markup files inside /templates, template parts live inside /parts, and theme.json controls global settings and styles. Both approaches are valid. Do not ask Antigravity to mix the two accidentally.

What You Need Before Starting

How to Make a WordPress Theme with Google Antigravity: Step by Step

Step 1: Define the Website Before You Define the Theme

The shared prompt begins with a premium animated strawberry drink website called BerryBurst. It describes the reference boundaries, product theme, visual mood, color palette, site goal, navigation, nine sections, animation behavior, responsive requirements, and a simple HTML/CSS/JavaScript stack.

This order is smart. Antigravity first solves the design and interaction problem in a simple frontend. Only after the frontend works does it solve the WordPress integration problem.

Use the full shared prompt as a planning reference. Rewrite it for your project rather than changing only the brand name.

berryburst-static/
├── index.html
├── style.css
├── script.js
└── assets/
    ├── images/
    ├── fonts/
    └── icons/

Step 3: Give Antigravity the Frontend Prompt

Paste the project brief, attach or copy the relevant reference assets, and tell Antigravity to create a complete responsive frontend. Be explicit that the reference is inspiration only and should not be copied. Require working navigation, hover states, smooth scrolling, optimized animations, semantic HTML, and mobile behavior.

Ask the agent to produce an implementation plan before broad edits. Review the proposed structure, dependencies, animation approach, generated placeholders, and acceptance criteria. If the plan introduces React or a complex build tool when you requested vanilla JavaScript, correct it before implementation.

Step 4: Test the Static Website Thoroughly

Open the static site in a browser and test it before WordPress conversion. Check every navigation link, button, hover state, animation, section anchor, image path, and breakpoint. Confirm that the page still communicates the product when JavaScript is delayed or reduced motion is enabled.

Do not continue just because the homepage looks attractive. Resize the browser, use keyboard navigation, inspect the console, throttle the connection, and confirm images have useful dimensions and alt text.

Convert the existing working frontend into an installable classic WordPress theme.

This task is conversion, not redesign.
Preserve the current layout, content, responsive behavior, and animations.

Create:
- style.css with a valid WordPress theme header
- functions.php
- header.php and footer.php
- front-page.php
- index.php, page.php, single.php, archive.php, 404.php
- comments.php
- screenshot.png
- organized assets/css, assets/js, and assets/images folders

WordPress requirements:
- Call wp_head(), wp_body_open(), and wp_footer() in the correct locations
- Use body_class(), language_attributes(), bloginfo(), home_url(), and wp_nav_menu()
- Register a primary menu and custom logo support
- Enqueue CSS and JavaScript through wp_enqueue_scripts
- Use get_template_directory_uri() for theme assets
- Use the Loop and the_content() in standard content templates
- Escape dynamic output and translate user-facing theme strings
- Keep forms, ecommerce, custom post types, and other portable functionality out of the theme
- Preserve any animation dependency without loading it twice

Packaging:
- Put style.css directly in the theme root
- Create one ZIP containing one theme folder
- Do not include an extra parent folder
- The theme must upload and activate without PHP errors
- The front page must visually match the approved static site

Step 7: Create the Installable Theme ZIP

Ask Antigravity to create the ZIP only after the theme tree passes review. The video shows the agent producing berryburst-theme.zip and listing the created files. Preserve the uncompressed source folder as well; the ZIP is a deployment artifact, not your only copy.

WordPress Theme Files Antigravity Should Create

Minimum style.css Header

/*
Theme Name: BerryBurst
Theme URI: https://example.com/berryburst/
Author: Your Name
Author URI: https://example.com/
Description: An animated product theme for a strawberry drink brand.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: berryburst
*/

Add Requires at least, Tested up to, and Requires PHP values only after testing those versions. Do not claim compatibility based only on the AI’s output.

Enqueue Assets Instead of Hardcoding Them

function berryburst_enqueue_assets() {
    $version = wp_get_theme()->get( 'Version' );

    wp_enqueue_style(
        'berryburst-style',
        get_stylesheet_uri(),
        array(),
        $version
    );

    wp_enqueue_script(
        'berryburst-script',
        get_template_directory_uri() . '/assets/js/script.js',
        array(),
        $version,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'berryburst_enqueue_assets' );

If the design uses GSAP or another library, enqueue it as a dependency and verify its license. Do not load one copy from the theme and another from a plugin or page builder.

How to Package the Theme ZIP Correctly

The most instructive moment in the video is the failure. The Themes screen lists several broken themes with “Stylesheet is missing.” The final design is not the problem; the package structure is.

Correct ZIP Structure

berryburst-theme.zip
└── berryburst-theme/
    ├── style.css
    ├── functions.php
    ├── header.php
    ├── footer.php
    ├── front-page.php
    ├── index.php
    ├── page.php
    ├── single.php
    ├── archive.php
    ├── 404.php
    ├── comments.php
    ├── screenshot.png
    └── assets/

Common Broken Structure

berryburst-theme.zip
└── berryburst-export/
    └── berryburst-theme/
        └── style.css

The extra parent folder can make WordPress inspect the wrong level. Other causes include naming the file styles.css, putting it inside /assets/css, zipping only the contents incorrectly, or omitting the required theme header comment.

Install the Antigravity Theme in WordPress

1. Create a backup and staging copy.
2. Open WordPress admin.
3. Go to Appearance > Themes.
4. Choose Add New Theme, then Upload Theme.
5. Select the corrected theme ZIP.
6. Click Install Now.
7. Use Live Preview before activation.
8. Activate only after critical templates and admin access work.

After activation, visit the homepage while logged in and logged out. Test a normal page, post, archive, search, 404 URL, navigation menu, and the Customizer or Site settings provided by the theme.

Make the AI-Generated Theme Editable

A static HTML page converted to front-page.php can still be mostly hardcoded. It is technically a WordPress theme, but a non-technical editor may not be able to change the hero, flavors, benefits, images, or CTA without editing PHP.

Decide what should be editable:

• Site identity: use Custom Logo and Site Title support.
• Navigation: register a menu location and output it with wp_nav_menu().
• Page copy: use normal WordPress page content, block patterns, or carefully registered Customizer settings.
• Product cards: use a suitable ecommerce or content plugin rather than embedding product data in the theme.
• Contact and order forms: use a maintained form or commerce plugin with spam protection and secure processing.
• Reusable sections: consider block patterns, custom blocks, or Elementor templates when editors need layout control.

Theme vs Plugin Boundary

A theme controls presentation. Functionality that should survive a theme switch belongs in a plugin. Custom post types, order processing, payment logic, reviews data, analytics integrations, lead storage, and complex forms should not disappear when you activate another theme.

If your preferred workflow is visual editing, read how to build a WordPress website using Claude Design and Elementor. Elementor compatibility requires the theme to output normal WordPress content and avoid fighting the page builder with rigid wrappers and global CSS.

Security Checks for an AI-Generated WordPress Theme

WordPress themes output database content, URLs, attributes, HTML, and sometimes forms. Treat every dynamic value according to its context.

Static marketing sections are lower risk than admin settings, file uploads, AJAX endpoints, or custom database writes. If Antigravity adds those features, the review scope increases substantially.

WordPress Theme Testing Checklist

WordPress recommends testing with a development environment, debugging enabled, Theme Unit Test data, Theme Check, HTML/CSS validation, JavaScript console review, and target browsers.

Enable Debugging on Staging

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Inspect wp-content/debug.log, then disable or adjust debugging for production. Also test while the WordPress admin bar is present; the video includes a header-spacing correction because fixed headers can sit underneath the admin toolbar.

SEO and Performance for the Finished Theme

SEO Foundations

• Add add_theme_support( 'title-tag' ) and let WordPress or the SEO plugin manage titles.
• Use one descriptive H1 per page and logical headings below it.
• Output semantic landmarks: header, nav, main, article, aside, and footer.
• Do not hardcode canonical tags or schema that becomes wrong on posts and archives.
• Ensure pages and posts use the_content() so SEO plugins and blocks work normally.
• Add internal links, accurate alt text, policy pages, author information, and useful 404/search experiences.

Animation Performance

• Compress product and splash images to WebP or AVIF.
• Set explicit width and height to reduce layout shift.
• Animate transforms and opacity rather than layout-heavy properties.
• Pause animations when off-screen and respect prefers-reduced-motion.
• Load critical hero assets intentionally and lazy-load below-the-fold media.
• Avoid shipping multiple animation libraries for effects CSS can handle.

For more ambitious motion design, see how to build a futuristic 3D website with AI. For the general content and launch process, use the companion guide on how to create a website with AI.

Launch the Antigravity WordPress Theme on Hostinger

After the theme passes staging tests, create a fresh backup and deploy it during a low-traffic window. On Hostinger, you can install WordPress through hPanel, use a staging environment on supported plans, upload the ZIP through WordPress admin, or manage theme files through File Manager, SFTP, SSH, or WP-CLI.

Keep the previous theme installed until the new one is proven. If activation causes a fatal error, rename the new theme folder through File Manager or SFTP so WordPress can fall back, then restore the last working version.

Frequently Asked Questions

Final Thoughts

The reliable Antigravity workflow is two-stage: build a clean static site, then convert the approved frontend into WordPress. Separating those stages makes failures easier to understand and helps the agent preserve the design instead of improvising during theme integration.

The video also offers the right practical lesson: expect iteration. A missing stylesheet, incorrect ZIP level, admin-bar overlap, or broken asset path is not unusual. Fix the root cause, rebuild the package, and retest. With a disciplined prompt, correct theme structure, staging environment, and real WordPress QA, Antigravity can turn a visual concept into a maintainable custom theme much faster than a blank-file workflow.