Wordpress Customization and Optimization

Замовник: AI | Опубліковано: 26.02.2026

ONLY BIDS WITH PROVEN TRACK RECORD WITH THE FOLLOWING THEME: https://themeforest.net/item/newspaper/5489609 Project instructions READ THEM CAREFUL: https://docs.google.com/document/d/1_cmGS8qFaYI8iXw6xb25pSnMEQF73_2dO6GW3eip8oY/edit?usp=sharing We have already chosen the Newspaper theme on ThemeForest and need it installed on a fresh WordPress instance, then fully tailored to our own brand colors and fonts. Once the visual layer is aligned with our style guide, the site must reach an A score on Google PageSpeed Insights for both mobile and desktop—no compromises here. Multilingual Activate WP Multilingual as the base translation engine: English is the source language, all articles should be auto-translated into 10 additional languages and stored as drafts ready for our editorial review. Core integrations The build has to include: Implement our identity following the instructions Implement custom homepage after the fully template chnange is done,implemented and approved Newsletter connection to our email platform (exact provider shared after award). Activate Elementor with the theme. Yoast SEO, configured with an initial XML sitemap and on-page schema defaults. Google Tag Manager, deployed site-wide via header code injection. Social login so visitors can register with either Google or Microsoft Live accounts. Cloudflare CDN, paired with WP Rocket for optimal caching and minification. Implement back-up pluging Set up a separate staging site that we can push to production in one click. The live domain must sit behind Cloudflare from day one. Site — wordpress build specification (dev handoff) Base theme/template: tagDiv Newspaper (Downtown Pro demo) Reference: https://demo.tagdiv.com/newspaper_downtown_pro/ Brand identity reference: roimonitor.online + huisstijl pdf (colors below) 0) Build approach (important) Start by implementing the global system on the existing theme first (fonts, sizes, line heights, colors, outlines, radii, buttons, links, icons, dividers, tags/labels). Only when this is approved, implement the homepage as it is a new template/design. This prevents rework and ensures the homepage automatically inherits the correct styling. 1) Build order (strict sequence) 1.1 Demo content (mandatory for feedback) Import the official demo content from the tagDiv theme we purchased and shared (Downtown Pro demo). This is enough to review modules, layouts, and responsive behavior during development. 1.2 Global foundations (fonts and typography first) Implement the complete typography and base styling system before template redesign: Fonts (Be Vietnam Pro) Font weights Sizes + line heights (must match comparebonds.com) Color rules Link rules Button styles Outlines and radii Box/card styling Image radius rules Social icons styling Divider line styling Tags and labels styling 1.3 Header, navigation and mobile ux mechanics Implement global navigation elements and mobile behavior next: Sticky header behavior Benefits strip above header + mobile ticker Mobile menu behavior (many sublevels) Mobile sticky bottom bar with two floating buttons 1.4 Template mapping and adjustments After the global system is correct, implement template-specific changes: /news mapping Blog overview listing rules (overlay title, image sizing, filters, remove banner) Article detail variants and mobile ordering Table of contents behavior Disable/remove comments 1.5 Homepage (new template/design, implement last) The homepage structure is shared as an attachment. Important note about the homepage attachment: The attachment is a functional indication for both desktop and mobile. It shows component structure and behavior (hero composition, slider functions, stacking order, mobile behavior). It is not a pixel-perfect final design. Use it as a reference for: Which components exist and in what order How hero/slider modules behave on desktop vs mobile Interaction patterns and functional layout intent Visual styling must come from the global system rules in this document. 2) Brand colors (from huisstijl attachment) Use these exact hex codes: Black: #1B1B1B Navy (dark): #032456 Blue (primary): #1B4079 Light gray: #F5F5F5 Salmon (reviews only): #F6C8B7 Yellow: #FF9C00 Green: #00AF54 3) Typography (must match comparebonds.com) Source of truth: https://comparebonds.com/ All font sizes and line heights for headings/body/meta must follow the same system. 3.1 Fonts and weights Headings (H1–H6): Be Vietnam Pro Bold (700) always Body: Be Vietnam Pro Regular (400) 3.2 Implementation requirement Implement typography globally via tagDiv settings where possible. Enforce consistently via child theme css overrides where needed. 4) Global visual rules (apply everywhere) 4.1 Titles, categories, labels Titles/headlines: always blue (#1B4079) Category text above titles: always black (#1B1B1B) Category label pills/badges: yellow (#FF9C00) Special labaels like “Exclusive”: green (#00AF54) 4.2 Links All links in text are always: Blue Underlined by default (automatic underline, not hover-only) 4.3 Boxes, cards, modules All boxes: 0.5px outline 8px radius 4.4 Images (radius rules) Full-width images: 8px radius Small/boxed/thumbnails: 4px radius 4.5 Divider lines (separators) Dividers (e.g., newsletter section): Blue 0.5px 4.6 Social icons Social icons: Blue background White logos 4.7 Reviews Reviews always use salmon (#F6C8B7) and salmon is used only for reviews. 4.8 Tags Tags: Green (#00AF54) Radius 3px 5) Buttons (3 styles) 5.1 Conversion buttons (primary cta) Yellow background (#FF9C00) Black text (#1B1B1B) Border: 20% darker than yellow Radius: 8px 5.2 Secondary buttons Green background (#00AF54) Text: choose for contrast Border: 20% darker than green Radius: 8px 5.3 Download buttons (outlined) White background Blue border (#1B4079) Blue text (#1B4079) Radius: 8px Hover: invert (blue background + white text) 6) Header, navigation and mobile ux 6.1 Sticky header bar Header bar with logo is always blue and sticky on desktop and mobile. 6.2 Benefits bar above header Benefits strip above header (from home draft). Mobile: slow ticker tape. 6.3 Mobile header controls Hamburger menu: top-right Language flag/switcher: top-right aligned 6.4 Mobile menu (many sublevels) Must support deep sublevels with a usable ux (accordion/drilldown/hybrid). Final behavior can be agreed during build, but it must handle many levels cleanly. 6.5 Mobile sticky bottom bar (all pages) Two floating buttons: Register (green) Math investments (yellow) 7) Template mapping and required changes 7.1 /news page Existing demo homepage layout used for /news: https://demo.tagdiv.com/newspaper_downtown_pro/ 7.2 Blog main overview (category listing) Base reference: https://demo.tagdiv.com/newspaper_downtown_pro/category/news/ Changes required: Category titles always left aligned Title overlay on image (save height) Image height reduced to ~50% Share/meta “waste content” moved onto overlay: Right = meta/share/actions Left = category + title Remove banner in heading Apply radius rules for boxes/images 7.3 Blog filters Clear filter structure with categories and subcategories. 8) Article detail pages 8.1 Desktop: 3 variants A) Baseline like demo B) No sidebars, content ~33% wider C) Sticky toc left + related content right 8.2 Table of contents Always include a dropdown toc at the start (easy access). 8.3 Mobile ordering Related articles must be below article content (not before). 8.4 Banner placement Remove banner from top/main content area. 8.5 Comments Disable/remove comments/replies (bot prevention). 9) Seo and content rules 9.1 Breadcrumbs (yoast) Must use Yoast breadcrumbs Always left aligned 9.2 Category seo block (~500 words) Each blog/news category has an seo block above the footer: ~500 words With H2/H3 headings WPML translatable 9.3 Dates dd/mm/yyyy site-wide. 9.4 Url structure News: news/category/article-name Blog: blog/category/article-name 9.5 Google news Implement Google News readiness (structured data + sitemap approach compatible with Yoast + WPML). 10) Plugins and integrations 10.1 Wpml (critical) Install WPML and configure exactly per the separately shared WPML instruction document: Url/folder structure must match that document (no deviations) Default language: UK English Country selection pop-up required for English and Spanish (multi-country legal/product differences) 10.2 Wp rocket and cloudflare Implement WP Rocket + Cloudflare caching for optimal speed. 10.3 Google tag manager (no plugin) Hardcode GTM snippets in head + body (noscript right after opening body). 10.4 Yoast seo Install and configure Yoast (meta, sitemap, social metadata, breadcrumbs). 10.5 Social login Login/register via major providers (Google, X, etc.) via plugin compatible with WPML and matching ui rules. Maybe https://wordpress.org/plugins/nextend-facebook-connect/ 11) Approval checklist (before homepage starts) Headings are Be Vietnam Pro Bold everywhere Typography sizes/line-heights match comparebonds.com All global rules applied (colors, links, dividers, icons, borders, radii) Buttons match 3-style system Header + mobile bars work Only after approval: start homepage build