Native Oxygen Builder Page Creation

Export from phpMyAdmin

Run this SQL query to get the Oxygen JSON from the source page:

SELECT meta_value
FROM ukueq_postmeta
WHERE post_id = 137
AND meta_key = 'ct_builder_json';

Copy the entire meta_value result. This is the raw Oxygen JSON (will be heavily escaped if exported via SQL dump).

Parse the JSON

If copied directly from phpMyAdmin results tab, it should be valid JSON. If from a SQL dump file, you need to unescape SQL backslash encoding first:

import json, re

# If from SQL dump, unescape backslashes
raw = open('source_dump.sql').read()
# Extract the JSON value between quotes
match = re.search(r"'(\{.*?\})'", raw, re.DOTALL)
if match:
    escaped = match.group(1)
    # Unescape SQL-style escaping
    unescaped = escaped.replace("\\'", "'").replace('\\"', '"').replace('\\\\', '\\')
    data = json.loads(unescaped)

    # Save clean version
    with open('source_page_oxy.json', 'w') as f:
        json.dump(data, f, indent=2)
    print(f"Parsed OK. Root children: {len(data.get('children', []))}")

Verify the Source JSON

Confirm the structure is intact before proceeding:

# Must have root with children
assert data['name'] == 'root'
assert len(data['children']) >= 5  # sections + reusables + modal

# Must have selectors with source page ID
json_str = json.dumps(data)
count = json_str.count(f'-137')  # Source page ID
print(f"Found {count} selectors with page ID 137")

Deep Copy the Structure

import copy

source_id = 137   # Page we're cloning FROM
target_id = 1313  # Page we're building FOR

# Deep copy to avoid mutating original
page = copy.deepcopy(data)

Recursive Selector Replacement

Every Oxygen element has a selector field that includes the page ID (e.g., div_block-2-137). These MUST be updated to the new page ID or styles will collide.

def replace_selectors(obj, old_id, new_id):
    """Recursively replace page ID in all selector strings."""
    if isinstance(obj, dict):
        for key, val in obj.items():
            if key == 'selector' and isinstance(val, str):
                obj[key] = val.replace(f'-{old_id}', f'-{new_id}')
            elif key == 'activeselector' and isinstance(val, str):
                obj[key] = val.replace(f'-{old_id}', f'-{new_id}')
            else:
                replace_selectors(val, old_id, new_id)
    elif isinstance(obj, list):
        for item in obj:
            replace_selectors(item, old_id, new_id)

replace_selectors(page, source_id, target_id)

Verify Replacement

json_str = json.dumps(page)
old_count = json_str.count(f'-{source_id}')
new_count = json_str.count(f'-{target_id}')

print(f"Old selectors remaining: {old_count}")  # MUST be 0
print(f"New selectors created: {new_count}")     # Should be 30+

assert old_count == 0, "STOP: Old selectors still present!"

Find Elements by ct_id

Every element in the Oxygen tree has a unique ct_id. Use this helper to locate any element:

def find_by_ct_id(obj, target_id):
    """Find an element in the Oxygen tree by its ct_id."""
    if isinstance(obj, dict):
        opts = obj.get('options', {})
        if opts.get('ct_id') == target_id:
            return obj
        for child in obj.get('children', []):
            result = find_by_ct_id(child, target_id)
            if result:
                return result
    return None

Update Content Elements

Replace text, images, and links for the new service. Target elements by ct_id:

# H1 - Page Title
el = find_by_ct_id(page, 8)
el['options']['ct_content'] = 'Sewer Camera Inspection in Kansas City<br>'

# Intro paragraph
el = find_by_ct_id(page, 9)
el['options']['ct_content'] = 'See inside your pipes before you spend a dollar...'

# H2 sections (repeat for each)
el = find_by_ct_id(page, 13)
el['options']['ct_content'] = 'What Is a Sewer Camera Inspection?'

# Rich text (HTML content)
el = find_by_ct_id(page, 14)
el['options']['ct_content'] = '''<p>A sewer camera inspection uses a...</p>
<p>Our plumber inserts a flexible rod...</p>'''

Update Hero Image

The image element references a WordPress attachment by ID, URL, and dimensions:

# Hero image (ct_id: 6)
el = find_by_ct_id(page, 6)
opts = el['options']['original']
opts['attachment_id'] = 1202           # WordPress media ID
opts['attachment_url'] = 'https://www.callbrightside.com/wp-content/uploads/2024/sewer-camera-hero.jpg'
opts['attachment_size'] = 'image-640'
opts['attachment_height'] = 427
opts['attachment_width'] = 640
opts['alt'] = 'Bright Side Plumbing technician performing sewer camera inspection'

Update Modal / Exit Intent

# Modal heading (ct_id: 51)
el = find_by_ct_id(page, 51)
el['options']['ct_content'] = 'Free Sewer Camera Inspection'

# Modal body text (ct_id: 52 - code block)
el = find_by_ct_id(page, 52)
el['options']['original']['code-php'] = '''<p style="color:#555;font-size:15px;">
Get a free HD camera inspection with any sewer repair estimate.
See exactly what is happening inside your pipes.
</p>'''

Update Specials Notice JavaScript

The dynamic monthly special (ct_id: 3) uses JavaScript to display the current month:

# Specials notice (ct_id: 3 - code block)
el = find_by_ct_id(page, 3)
el['options']['original']['code-js'] = '''
var months = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE",
  "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
var currentMonth = months[new Date().getMonth()];
document.getElementById("special-notice").innerHTML =
  "<strong>" + currentMonth + " SPECIAL:</strong> " +
  "Free sewer camera inspection with any repair estimate";
'''

Generate Two JSON Versions

# Pretty version (for human review)
with open('sewer_camera_inspection_oxy.json', 'w') as f:
    json.dump(page, f, indent=2)

# Compact version (for database)
compact = json.dumps(page, separators=(',', ':'))
with open('sewer_camera_inspection_oxy_compact.json', 'w') as f:
    f.write(compact)

print(f"Pretty: {os.path.getsize('sewer_camera_inspection_oxy.json')} bytes")
print(f"Compact: {len(compact)} chars")

Generate SQL Insert Script

target_id = 1313

# Escape single quotes for SQL
sql_safe = compact.replace("'", "\\'")

sql = f"""-- Sewer Camera Inspection Page (ID: {target_id})
-- Generated by build_camera_page.py

INSERT INTO ukueq_postmeta (post_id, meta_key, meta_value)
VALUES ({target_id}, 'ct_builder_json', '{sql_safe}');

INSERT INTO ukueq_postmeta (post_id, meta_key, meta_value)
VALUES ({target_id}, 'ct_other_template', '10');

INSERT INTO ukueq_postmeta (post_id, meta_key, meta_value)
VALUES ({target_id}, 'ct_builder_shortcodes', '');
"""

with open('sewer_camera_inspection_insert.sql', 'w') as f:
    f.write(sql)

Execute in phpMyAdmin

1. Open phpMyAdmin for the callbrightside.com database

2. Go to SQL tab

3. Check if meta already exists (to avoid duplicates):

SELECT meta_id FROM ukueq_postmeta
WHERE post_id = 1313 AND meta_key = 'ct_builder_json';

4. If exists, UPDATE instead of INSERT:

UPDATE ukueq_postmeta
SET meta_value = '[COMPACT JSON]'
WHERE post_id = 1313 AND meta_key = 'ct_builder_json';

5. If not exists, run the INSERT statements from the SQL file

Open in Oxygen Editor

Navigate to: wp-admin/post.php?post=1313&action=edit

Click "Edit with Oxygen". The builder should load all elements in the visual editor. If you see a blank canvas, the JSON was malformed or not inserted correctly.

Verify Component Tree

In Oxygen's structure panel (left sidebar), confirm:

• Specials notice div at top
• Service intro section with image + content grid
• Content section with 4 H2/text pairs
• Sidebar with service areas reusable
• Guarantees reusable component
• Services grid reusable component
• Members/reviews reusable component
• Exit-intent modal at bottom

Verify Content

• H1 shows correct service title
• Hero image loads (not broken)
• All 4 H2 sections have correct headings
• Rich text paragraphs render properly
• Phone number links are correct: (913) 963-1029
• Modal popup shows correct offer text
• Specials notice shows current month

Verify Responsive

Use Oxygen's responsive preview to check tablet and mobile views. Since we preserved all media query settings from the source page, responsive behavior should work identically.

Publish + Cache Purge

1. Save in Oxygen editor

2. Publish the page (change from draft to published)

3. Purge Cloudflare cache for the URL

4. Purge WP Rocket / LiteSpeed cache

5. Visit the live URL in incognito to verify