TWV's blog, rebuilt to look — and read — like a credible B2B source
Across several rounds we fixed the layout bugs, redesigned the article header into a premium overlay-hero, then fact-checked every data-heavy post against primary sources — correcting real errors while refusing to cite blogs or invent numbers. Outcome: tradewithviet.com's blog now looks premium, reads consistently, and stands on government/official-body figures.
StatusLiveScopetradewithviet.com blog (52 posts)Date2026-06-24
ReasoningLập luận
6-layer thinking chainChuỗi tư duy 6 tầng
L1
Raw requestYêu cầu gốc
"bug, text too close to margin; blog: 2 titles; the format of all blog is not consistent; not premium ... should have call out text box; quote mark ... scan and audit. not only content but also layout, formatting"
L2
Reframe — what was really neededDiễn giải lại — nhu cầu thật
The ask was never just "fix a margin bug." The real need: make the whole blog read as a premium, consistent, credible B2B source. For a Vietnam-sourcing platform courting international buyers and investors, blog polish AND factual authority are conversion levers — a sloppy layout or a wrong statistic both cost trust.
L3
ConstraintsRàng buộc
- Theme is Hello Elementor; WP-Optimize prunes a mu-plugin's per-page inline <style> on pages lacking the target class, and a hidden minify cache bundles each page's CSS and hides edits for hours.
- 52 published posts span 3 generations: 21 premium
.twv-articleposts, ~30 Elementor-built infographics/templates, plus buggy duplicates. - The article drafts are AI-written; a real share of their specific figures were unsourced or wrong.
- Hard rule: never fabricate a source or a statistic; live edits must match the exact stored HTML.
L4
Options weighedCác lựa chọn cân nhắc
- Patch CSS only — fast, but leaves legacy posts unstyled and figures unverified.
- Deep-migrate all 52 posts — uniform, but would destroy the bespoke infographic designs.
- Stage a redesign, then targeted fact-check (chosen) — most work, highest credibility gain.
- Blanket-soften every unverified number — safe-looking, but guts correct figures and the confident voice.
L5
Principle invokedNguyên tắc áp dụng
Put the truth where it can't be pruned, and let honest data beat volume — correct only what a primary source proves, never invent or cite a blog.
L6
Pick + recognition signalLựa chọn + dấu hiệu nhận biết
Pick: a staged redesign (Customizer-served CSS + overlay-hero masthead + transparent TOC) followed by a primary-source fact-check that corrected real errors, softened the unsourceable, and left defensible figures alone. Rejected: blanket softening (would erase correct numbers and the voice) and full re-migration (would destroy the Elementor infographics). Recognition signal: when "make it premium" lands on AI-written content, treat credibility — sourced facts — as part of "premium," not just CSS.
ArchitectureKiến trúc
Why the CSS lives in the Customizer — and the cache that hid it
A post is generated as plain branded HTML, but its look comes from two places, and a caching layer sits between the database and the reader. Getting styling to actually appear meant understanding all three.
| Technical termThuật ngữ kỹ thuật | Plain nameTên dễ hiểu | RoleVai trò |
|---|---|---|
twv-article-style.php | Masthead (title + hero) | PHP mu-plugin: suppresses the theme title on posts and prepends a full-bleed hero banner with the title/meta overlaid. PHP only — no CSS. |
custom_css post 6737 | All article styling | The Customizer stylesheet, served whole on every page. Article/masthead/TOC CSS lives here because WP-Optimize prunes a mu-plugin's inline style per-page. |
WP-Optimize minify cache | The cache that hid edits | Bundles each page's CSS/JS into a versioned file separate from the page cache; does not invalidate on a CSS edit. Must be purged + reset explicitly. |
enrich_post.php | Surgical content editor | Applies factual corrections + inline citations to live post HTML, with URL-dedup and title-linked sources, without re-rendering (so figures survive). |
Read it in 30 seconds: the pipeline writes class-based HTML; the look is injected at render by the mu-plugin (title+hero) and the Customizer (everything else); the reader gets it through WP-Optimize's caches.
Lesson to carry forward: when a CSS change "isn't showing" but the database has it, suspect the minify cache — it's a layer below the page cache and hides inline-style changes until purged and version-bumped.
PipelineQuy trình
What ran, in order
1
Round 1 — bugs + brand
Killed the duplicate-title bug, fixed flush margins, applied Petrol & Gold + Montserrat/Inter, recolored callouts, added pull-quote styling, fixed the Resources hero. 301-redirected duplicate post #7931 → #7838.
2
Round 2 — premium masthead
Breadcrumb above the title, meta line, full-bleed hero from the featured image; fixed the footer's mobile horizontal-scroll.
3
Round 3 — artistic hero
Title overlaid, centered in white, on the darkened + 4-corner-vignetted hero image (magazine-cover feel).
4
Round 4 — TOC + citations format
Floating TOC that appears only after the hero and shows the list while reading; Sources reformatted to hyperlinked titles (no raw URLs) across 20 posts.
5
Fact-check every data-heavy post
Verified figures against primary sources; corrected real errors + cited them, softened the unsourceable, left defensible ones. Caught and reversed one self-inflicted over-correction.
6
Harden the process
Wrote the lessons into docs/wordpress-safety-rules.md, the /twv-blog skill, and project memory so they don't recur.
DecisionsQuyết định
Layered decision cardsCác quyết định theo tầng
Duplicate-title bug: filter, not surgery
L1Posts showed the title twice (theme title + a baked-in in-content H1).
L2Need one title on every post without rewriting 50+ stored posts.
L3Some posts baked a second H1 + byline into content; theme always renders its own title.
L4(a) Strip the baked H1 from each post's stored content; (b) a render-time the_content filter that removes it; (c) hide one via CSS.
L5Non-destructive + self-healing beats touching stored content.
L6Chose the render-time filter — it removes the dup for current and future posts, touches no stored data, fully reversible. Rejected per-post stripping (risky, not self-healing). Next time duplicate markup spans many records, fix it at render.
Where article CSS must live
L1Legacy posts rendered totally unstyled even though the CSS existed.
L2Styling must reach every post regardless of which markup generation it is.
L3WP-Optimize prunes a mu-plugin's per-page inline <style> on pages without the targeted class; only the Customizer block is served whole.
L4(a) Keep CSS inline in the mu-plugin; (b) move all article CSS to the Customizer; (c) per-post style blocks.
L5Put the styling where the optimizer cannot prune it.
L6Moved all article/masthead/TOC CSS to Customizer 6737; mu-plugin kept to PHP/JS only. Rejected inline (the cause of the bug). Recognition signal: if styling is intermittent per-page, the optimizer is tree-shaking your inline CSS — centralize it.
Hero treatment: overlay, not stacked
L1"the title is very close to the header ... overlay title into the image ... make it artistic ... darken the 4 corners."
L2The big title on cream above a separate image looked out of place; wanted a premium, intentional hero.
L3All 21 prose posts have a clean featured photo (corner branding + category badge, no baked title) — made for overlay.
L4(a) Title on cream, image below; (b) title overlaid centered on the image; (c) title bottom-left over a gradient.
L5Match the asset's design intent (the photos were built to carry an overlaid title).
L6Centered white title + meta overlaid on a darkened + vignetted full-bleed hero. Rejected stacked (the original complaint) and bottom-left (clashed with the baked badges). Confirmed by the user from previews.
Legacy infographics: classify, don't normalize
L1"migrate the legacy posts to the branded layout too."
L2Make the ~30 older posts consistent with the premium ones.
L3On inspection, all ~30 are Elementor-built custom-HTML infographics/templates — not prose articles. Their content lives in Elementor meta, not standard post_content.
L4(a) Wrap every legacy post in the article layout; (b) re-render them; (c) classify and skip the visual ones.
L5Don't destroy bespoke design to chase uniformity.
L6Classified them as visual content and left them as-is (they already got the safe reading-column + brand-typography upgrade). Rejected wrapping/re-rendering (would have wrecked the custom designs). Recognition signal: "make them consistent" never means flattening intentionally-different content.
Fact-check: correct with primary sources, never blogs
L1"data-heavy posts must have sources, detailed inline citations."
L2The figures themselves — not just the styling — had to be trustworthy; several turned out wrong.
L3AI drafts produced confident specific numbers; many had no authoritative source, some were simply wrong (e.g. Vietnam 2024 exports stated $371B vs GSO's $405B).
L4(a) Cite whatever a search surfaces; (b) soften everything unverified; (c) verify each figure vs a primary source, correct/cite/soften/leave; (d) re-render from drafts.
L5Honest data over volume: cite only what an authority proves; reject SEO/sourcing blogs; never invent.
L6Per-figure verification against VITAS/GSO/BGMEA/US Census/the Accord/FDA/EC/USTR; corrected real errors + cited them, attributed practitioner estimates, softened the unpublished, left defensible ones. Rejected blog citations and re-rendering (it drops figures). Traps avoided: loaded-vs-base wage, Section 301 = China rate, official-vs-real-world fee. Even reversed my own over-correction when a cross-check showed Vietnam is #3 in apparel (behind China + Bangladesh), not #2.
FilesTệp
Artifact mapBản đồ tệp tạo ra
| PathĐường dẫn | WhatLà gì | Who reads itAi dùng |
|---|---|---|
wp-content/mu-plugins/twv-article-style.php | Title suppression + overlay-hero masthead + dup-title filter + floating-TOC script | Every single post (server-side) |
Customizer custom_css (post 6737) | All article / masthead / hero / TOC / callout / pull-quote / Resources-hero CSS (Petrol & Gold) | Served whole on every page |
scripts/twv-automation/render_guides.py | Pipeline: pull-quote support, no in-body hero/read-time, title-linked Sources format | New post rendering |
scripts/twv-automation/enrich_post.php | Surgical corrections + citations injector (URL-dedup, title-link, per-post backup) | Live content fact-fixes |
docs/wordpress-safety-rules.md | Added: minify-cache purge, Customizer write-guard, live-content phrase-matching | Anyone editing live WP |
~/.claude/skills/twv-blog/references/00-production-system.md | Overlay-hero standard + figure-accuracy / citation discipline | Future blog production |
.claude project memory (MEMORY.md + 2 entries) | Minify cache + fact-check discipline surfaced in every future session | Future sessions |
Pending manual actions — required before fully liveViệc cần làm thủ công — trước khi hoàn tất
- Footer mobile horizontal-scroll is a pre-existing, site-wide footer issue (Elementor contact icon-boxes not stacking) — article-scoped overflow was fixed; the footer template fix is offered as a separate task.
- blogviz.py still generates hero/figure PNGs in the older navy/gold/teal palette — a known follow-up to align imagery to Petrol & Gold.
- A few figures that no authority publishes (and a couple genuinely ambiguous ones) were softened or attributed rather than asserted — replace with exact numbers if you have first-party data.
Self-testTự kiểm tra
Check your understanding
A Customizer CSS change is saved in the database but the live page still shows the old styling. What's the most likely cause?
A research pass says a post's "Vietnam labor $3.50-5.00/hr" is wrong because base wages are ~$1.25-1.95/hr. Why was this NOT corrected?
Why were the ~30 older Elementor-built infographic posts left as-is instead of being migrated to the article layout?
In your own words: what is the rule for citing a figure in a data-heavy post?
Mastery checklist — tick what you can explain unpromptedBảng tự đánh giá — tích những gì bạn tự giải thích được