Archinic Designs

Where Technical Precision Meets Exclusive Artistry

Archinic Blog

Why Archinic Designs Playground

Building a website directly on a parent theme is a risky gamble. The moment the original developer pushes an update, you run the very real risk of seeing hours of…

Child Theme Development

Why the Archinic Designs Playground Exists: The Power of Child Theme Development

Building a website directly on a parent theme is a risky gamble. The moment the original developer pushes an update, you run the very real risk of seeing hours of meticulous custom work completely undone.

The Archinic Designs Playground was built to eliminate that risk

By utilizing this environment to develop a dedicated child theme, you essentially become the author of your site’s unique framework. A child theme inherits all the functionality of the parent structure, but ensures that every line of custom design, styling, and functionality you implement is 100% safe from future updates. This playground serves as a secure sandbox to fully develop,

Thank You

Nicolas

This is my main Website https://archinic.com


Here are the precise, sequential steps to establish your child theme on your donor site and eventually move it seamlessly to your main domain using standard cPanel tools and a single migration plugin.

Phase 1: Create the Child Theme on child.archinic.com

You will do this entirely inside your Bluehost cPanel File Manager. No local apps or software installations are needed on your computer.

1

Access cPanel File Manager

Requires Bluehost Login

1.Access cPanel File Manager:Requires Bluehost Login.

Log into your Bluehost dashboard, navigate to cPanel, and open the File Manager. Locate the document root directory for your staging domain (child.archinic.com).

2

Navigate to the Themes Directory

Path Navigation

2.Navigate to the Themes Directory:Path Navigation.

Go to wp-content/themes/. This is where all installed layout frameworks live. You will see the default folder named twentytwentyfive.

3

Create the Child Folder

Naming Convention

3.Create the Child Folder:Naming Convention.

Create a brand new folder at the same level named twentytwentyfive-child. Keeping the name lowercase with a hyphen is best practice.

4

Create the Essential style.css File

File Creation

4.Create the Essential style.css File:File Creation.

Inside your new twentytwentyfive-child folder, create a blank file named style.css. Right-click to edit it, paste the exact block configuration below, and save:

CSS

/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://archinic.com/
Description: A block-based child theme built for Archinic Designs.
Author: Nicolas Ray
Author URI: https://archinic.com/
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/

(Note: The Template: twentytwentyfive line is critical—it tells WordPress exactly who the parent structure is.)

5

Create the block-theme template.json File

FSE Compatibility

5.Create the block-theme template.json File:FSE Compatibility.

Because Twenty Twenty-Five is a modern block theme, you need a configuration carrier. Create a blank text file in the folder named theme.json. Open it, paste the following code snippet, and save:

JSON

{
"$schema": "https://schemas.wp.org/wp/7.0/theme.json",
"version": 3
}

6

Activate the Theme

WordPress Admin Panel

6.Activate the Theme:WordPress Admin Panel.

Log into your [child.archinic.com/wp-admin](https://child.archinic.com/wp-admin) dashboard. Go to Appearance > Themes. You will see Twenty Twenty-Five Child waiting for you. Click Activate.

Phase 2: Apps & Tools Needed for the Final Export

To move the completely developed child theme along with all your customizations, pages, and media files from the staging site to your main live domain, you only need to install one lightweight plugin on both sites.

The Migration Tool

Install All-in-One WP Migration (by ServMask) on both environments.

  • Why this app? It automatically rewrites every internal database entry from child.archinic.com to archinic.com during deployment so you don’t break asset path links or layout rendering.

The Export/Import Process

Once you are done custom developing your child theme design on the playground environment, follow this layout to pull off the final swap:

StepLocationAction
1. Packagechild.archinic.comGo to All-in-One WP Migration > Export. Choose Export to: File. Download the generated .wpress archive bundle to your desktop.
2. Clean slatearchinic.comEnsure your target WordPress framework is clean and ready. (A quick backup of this live site via cPanel backup tools before proceeding is always a smart insurance policy).
3. Overwritearchinic.comGo to All-in-One WP Migration > Import. Upload your saved .wpress file. Click proceed when it warns you that it will overwrite the database.
4. Permalinks Resetarchinic.comGo directly to Settings > Permalinks and hit Save Changes twice. This flushes the virtual server routing paths.

Block Theme Tip: Because Twenty Twenty-Five uses the new Site Editor, any structural layouts, templates, or color palettes you alter are automatically saved directly into the database. Running the site migration tool moves your code structures and your customized block layouts perfectly in one shot.


Configuring your custom colors and style variations directly inside your theme.json file is incredibly rewarding. It means your specific color rules automatically show up across all native WordPress blocks (like buttons, backgrounds, and text) inside the block editor.

Because Twenty Twenty-Five uses Theme JSON Version 3 (the modern standard for WordPress 7.0+), the configuration is cleaner than ever. Here is how to map out your primary colors and set up custom global style variations.

Step 1: Inject Your Custom Color Palette

Open your child theme’s theme.json file in your Bluehost cPanel File Manager. To add your custom brand palette (like an architectural blueprint blue and crisp accents), update your file to look like this layout:

JSON

{
  "$schema": "https://schemas.wp.org/wp/7.0/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "blueprint-blue",
          "color": "#0B3C5D",
          "name": "Blueprint Blue"
        },
        {
          "slug": "blueprint-grid",
          "color": "#328CC1",
          "name": "Grid Cyan"
        },
        {
          "slug": "blueprint-ink",
          "color": "#1D2731",
          "name": "Dark Ink"
        },
        {
          "slug": "blueprint-paper",
          "color": "#F9F9F9",
          "name": "Draft Paper"
        }
      ]
    }
  }
}

Why the slugs matter: WordPress automatically takes those slugs and generates matching CSS variables behind the scenes (for example: var(--wp--preset--color--blueprint-blue)). They will instantly appear as selectable circles in the editor’s color settings.

Step 2: Create Alternative Global Style Variations

What if you want to switch your entire site’s look—like toggling between a standard “Light Draft” layout and a dramatic, high-contrast “Dark Blueprint” look—with a single click? You can create Global Style Variations.

WordPress automatically recognizes any individual .json files placed inside a specific folder in your child theme as an alternative style layout.

1

Create a Styles Folder

Bluehost File Manager

1.Create a Styles Folder:Bluehost File Manager.

Inside your twentytwentyfive-child/ folder, create a brand new subdirectory named exactly styles (all lowercase).

2

Create a Custom Variation File

File Creation

2.Create a Custom Variation File:File Creation.

Inside that new styles folder, create a blank text file named for your alternative design look, such as dark-blueprint.json.

3

Define the Styles Configuration

File Modification

3.Define the Styles Configuration:File Modification.

Open the file to edit it and paste a structure that defines the specific visual overrides. Here is a blueprint-style example that reverses the site colors to a deep blue background with white/cyan text structures:

JSON

{
  "$schema": "https://schemas.wp.org/wp/7.0/theme.json",
  "version": 3,
  "title": "Dark Blueprint Mode",
  "settings": {
    "color": {
      "custom": true
    }
  },
  "styles": {
    "color": {
      "background": "#0B3C5D",
      "text": "#F9F9F9"
    },
    "elements": {
      "link": {
        "color": {
          "text": "#328CC1"
        }
      }
    }
  }
}

How to Apply Your Global Variations

Once you have saved those files, log back into your child.archinic.com dashboard:

  1. Go to Appearance > Editor.
  2. Click anywhere on the right-side live canvas preview to open up the design workspace.
  3. Look at the top right header panel and click the Styles icon (the half-moon / split circle icon next to the gear icon).
  4. Click on Browse Styles.

You will see Dark Blueprint Mode visually listed right alongside the default Twenty Twenty-Five styles! Clicking it will instantly transform your site’s color mechanics to your alternative layout scheme across every page template, all while preserving your foundational content layout.


When you copy the code blocks (like the style.css header or the theme.json code), paste them into a plain text editor like Notepad (or Text Editor on Linux Mint) rather than Word if possible. Word can sometimes auto-correct straight quotation marks "" into curly “smart quotes” “”, which will throw a syntax error inside WordPress configuration files.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *