Contact person: WordPress Content Cleanup & Styling Refactor

Phone:Show

Email:Show

Location: Cebu City, Philippines

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"WordPress “Content Normalizer” — Make 100 Imported Pages Match New Style & Clean CSS
Overview

We’ve imported ~100 pages into a new WordPress site. The content is mostly Gutenberg blocks (some Elementor pages/templates exist). Visually, pages are inconsistent (mixed fonts/colors/sizes), and the CSS cascade is messy (many crossed-out rules from per-widget overrides).

Goal: normalize all imported content so it inherits our global design tokens and Site Settings, with a clean cascade and minimal custom CSS.

Tech stack / environment

WordPress (cPanel/A2 Hosting), WP-CLI available

Theme: Royal Elementor Kit (child theme allowed)

Page builder: Elementor Pro (+ Royal Addons)

Brand tokens (must be used everywhere):

Primary (blue): #0b406d

Accent (yellow): #ffbc01

Body text: #10212B

Heading font: Montserrat

Body font: Inter

Preferred font-size tokens: md, lg, xl, 2xl, 3xl

We can provide existing MU-plugins/CLI scripts you may extend, or you can implement equivalents.

Objectives

Consistency: All headings, paragraphs, lists, and buttons across the ~100 pages inherit colors/typography from a single source of truth (Site Settings / [login to view URL] tokens).

Clean CSS: Remove per-widget and inline styles so DevTools shows a tidy cascade (no specificity wars).

Safe & reversible: Full DB backup + per-post backups before changes; documented rollback.

Scope of Work
A) Establish the design system

Create/activate a child theme (if not already) and add [login to view URL] with our tokens (colors, fonts, sizes).

Add a small CSS root shim (only if required) to expose tokens globally.

Elementor → Settings → General: enable Disable Default Colors and Disable Default Fonts.

Elementor → Site Settings: set Global Colors/Fonts/Buttons/Spacing to match tokens.

B) Normalize Gutenberg content (≈100 pages)

Implement or adapt a WP-CLI normalizer (or a runtime MU-plugin) that:

Strips inline color/typography from core/heading, core/paragraph, core/list, core/button blocks.

Rewrites to our tokens:

Heading color → var(--wp--preset--color--primary)

Body text → var(--wp--preset--color--foreground)

Button bg/text → var(--wp--preset--color--accent) / primary

Sizes → var(--wp--preset--font-size--3xl/2xl/xl/lg/md)

Fonts → var(--wp--preset--font-family--heading/body)

Optionally demotes in-body H1 to H2.

Creates a per-post backup (meta) before writing.

Run against all Gutenberg pages; provide a list of IDs updated.

(If tokens fail to render in this theme, fallback to a hardcoded mode as a temporary measure—document clearly.)

C) Refactor Elementor documents (if present)

Implement a CLI/MU-plugin that cleans _elementor_data to remove per-widget typography/colors (and optionally spacing) so widgets inherit Site Settings.

Map any Elementor global tokens to [login to view URL] tokens where feasible.

Clear Elementor CSS cache and Regenerate CSS & Data.

D) CSS cleanup & conflicts

Remove or scope any theme/global rules that fight Site Settings (e.g., replace h1,h2,h3… with .entry-content h* if needed).

Avoid !important; minimize custom CSS to essential utilities only (buttons, image radius, tables).

Keep performance toggles on (Optimized DOM, Improved Asset Loading, Inline Icons). Purge caches/CDN.

E) QA & Accessibility

Enforce one H1 per page; logical H2/H3 sequence.

Color contrast meets WCAG AA for text on white with #0b406d.

Mobile spacing/breakpoints verified on 360px, 768px, 1024px, 1280px.

Deliverables

Working site where the ~100 pages visually match our tokens (blue/yellow, Montserrat/Inter, sizes) with clean cascade.

Code artifacts in wp-content/mu-plugins/ (and child theme) with inline comments:

Gutenberg normalizer (CLI and/or runtime filter).

Elementor refactor tool.

[login to view URL] (and any minimal CSS shim).

Command log (exact WP-CLI commands used) and report of posts updated.

Rollback instructions:

DB backup (UpdraftPlus or wp db export) location.

How to restore a single page from backup meta and how to re-run scripts safely.

Quick maintenance guide (1–2 pages): how to keep templates clean, what to avoid when pasting content.

Acceptance Criteria (measurable)

For a sample of 10 pages (we choose), DevTools on major headings shows one winning rule from .elementor-kit or [login to view URL] (no per-widget color/size).

0 inline style attributes for color/typography on paragraphs and headings in those pages.

100% of target pages use our brand colors and fonts; buttons use accent background.

Elementor CSS regenerated; no large per-widget CSS blocks remain for headings/text.

Pages pass a quick Lighthouse Performance ≥ 80 and Accessibility ≥ 90 (content permitting).

Nice-to-Have (optional)

Fluid type with clamp() for H1/H2/H3.

Spacing scale tokens (e.g., --space-1..4) and usage in sections/columns.

Access you’ll receive

WordPress admin, cPanel/Terminal (WP-CLI), and staging if needed.

Existing scripts we’ve started (you can extend or replace).

Timeline & Budget

Propose hours and fixed price for: Setup (A), GB normalization (B), Elementor refactor (C), Cleanup/QA (D/E). We prefer a short, focused engagement.

How to apply

Share 2–3 relevant links/screenshots of Elementor/Gutenberg normalization work.

Brief plan: your approach, tools (CLI vs runtime), and risk mitigation.

Confirm you’ll provide backups, per-post rollback, and documentation." (client-provided description)