Building a Scalable WordPress Ecosystem for Encoder IT Limited

Encoder IT Limited operates two connected WordPress websites: the main company website and a dedicated portfolio platform. Rather than treating them as two separate builds, we run them as one connected system — content published once on the main website, and automatically available on the portfolio website, across every major content type: Blog, Portfolio, Gallery, and Case Study.

This case study covers a full engineering pass across that entire platform: upgrading the Blog, Portfolio, and Gallery experiences, resolving a series of interface and performance issues that affected the site as a whole, and extending the dual-site architecture with a brand-new Case Study system — all while keeping every module consistent, maintainable, and built on tools already in use across the business.

Project Overview

Encoder IT Limited already had a dual-site content architecture in place for Blog and Portfolio content. The main website acts as the primary source of content, while the portfolio website retrieves and displays the same information through custom REST API integrations, so nothing is ever entered twice.

We used this project to extend that architecture in two directions at once: going back through the existing Blog, Portfolio, and Gallery experiences to raise the quality bar — smoother interactions, faster perceived loading, sharper images, and a more polished editor experience for the content team — and adding an entirely new content type, Case Study, built to that same standard.

Every change needed to remain easy for our internal team to manage from WordPress, and work within the free version of Advanced Custom Fields already used across the website — no premium plugin upgrades required to deliver any of it.

The Challenge

• Content needed to be managed from one website while automatically appearing on another WordPress installation, for every content type — not just the ones already built.
• Several existing interface behaviors were quietly working against users: a sticky header that broke the mobile menu, a product/testimonial slider that auto-advanced too fast to read, and a scroll-reveal animation that could hide long articles entirely.
• Blog and Portfolio pages were only loading 6 posts at a time, and images on blog detail pages looked noticeably softer on desktop than on mobile.
• Remote, cross-site content (Portfolio, Gallery, Case Study) needed to feel just as fast as local content, even though it depends on a live network request to another WordPress installation.
• All of this had to be built without ACF Pro features such as Repeaters, Flexible Content, or Options Pages.
• There was no dedicated content structure for publishing detailed case studies, even though the business regularly needed to showcase completed projects in depth.

Goals & Requirements

• Maintain one central source of content for every content type across both websites, synchronized automatically through custom REST APIs.
• Increase how much Blog and Portfolio content loads per page, and make loading more content feel instant.
• Fix the sticky header, slider autoplay, and scroll-reveal issues affecting the site as a whole.
• Sharpen desktop image quality on blog detail pages without changing the responsive layout.
• Replace plain “Loading…” states across Gallery and Case Study with skeleton placeholders for a faster perceived experience.
• Improve the content editor experience with proper table and blockquote styling, and safe iframe embedding.
• Create a dedicated Case Study custom post type, taxonomy, and admin experience — matching the architecture already proven for Blog and Portfolio.
• Allow editors to choose between multiple hero layouts, images, or YouTube video, and structured project statistics per case study.

Our Approach

Discovery → Architecture Planning → Development → Integration → Testing → Optimization

Before writing any new code, we reviewed the architecture of the existing Blog and Portfolio modules in detail — custom post type registration, cross-site API communication, remote single-page routing, data processing, and front-end rendering. Every new system was then built as its own independent module following that same proven pattern, rather than as a shortcut bolted onto existing code, so Blog, Portfolio, Gallery, and Case Study can each evolve independently without risk to the others.

Interface and performance issues were treated with the same rigor as new features: each one was root-caused against the real, running site rather than patched at the symptom. Every change — new module or bug fix — was verified against the actual WordPress environment, including real test content, real REST API responses, and real browser testing, rather than relying on code-level assumptions alone.

The Solution

Blog Platform Improvements

Blog pagination was increased from 6 to 12 posts per load on both websites, so readers see more content per page and per “load more” action. The “Read More” link on blog cards now animates smoothly on hover instead of jumping, and the related-articles section on blog detail pages became a touch-friendly slider on mobile, showing 80%-width cards with working scroll behavior across every browser, including Firefox.

We also fixed a double-encoded ampersand that was displaying literally as “&” in category badges, and corrected soft-looking hero images on blog detail pages by requesting a larger base image size with accurate responsive sizing information — so desktop visitors now see the same sharpness as mobile.

Portfolio Content Synchronization

On the portfolio website, we fixed project descriptions that were silently dropping embedded iframes, and physically removed a call-to-action button from synced post content — rather than just hiding it with CSS — so the underlying HTML served to portfolio visitors is exactly what should be there, nothing more.

Photo Gallery Experience

The Gallery page’s “Loading…” text was replaced with a responsive skeleton grid that matches the real gallery’s column layout exactly at every breakpoint, so the page never has an empty or jarring loading moment on either website.

Site-Wide Interface & Performance Improvements

We fixed a CSS issue where the sticky header’s blur effect was breaking the mobile navigation drawer’s height. We slowed down the product and testimonial sliders, added pause-on-hover, and disabled autoplay on touch devices so visitors can actually read the content before it advances. A scroll-reveal animation bug that could permanently hide long page content was corrected to trigger reliably regardless of content length. We also added proper table and blockquote styling, a loading-state gradient background behind hero images, and consistent aspect-ratio handling for embedded iframes across the content editor.

Case Study Platform (New)

We built a dedicated Case Study custom post type with its own categories, a structured “Case Study Details” admin panel, and two selectable hero layouts — a full-width media-focused style and a side-by-side layout — so different projects can be presented according to their available content instead of being forced into one visual structure.

The hero section supports both featured images and YouTube video, with a pasted YouTube URL processed automatically into the correct embed format and an image used as a graceful fallback. Case studies can also display up to three key statistics or highlights, built using structured Group fields rather than premium Repeater functionality, since the site runs the free version of Advanced Custom Fields.

A dedicated WordPress REST API layer makes Case Study content available to the portfolio website automatically. Hero media, layout, statistics, and taxonomy data are all resolved server-side before being returned, so the portfolio-side templates stay simple and no content is ever entered twice.

Technology Stack

• CMS: WordPress (dual-site installation)
• Backend: PHP 8
• Content Fields: Advanced Custom Fields (free tier)
• Frontend: Tailwind CSS v4
• JavaScript: jQuery, native browser APIs (IntersectionObserver, Fetch)
• Integration: WordPress REST API
• Remote Communication: Custom authenticated WordPress API requests
• Content Architecture: Custom Post Types and Custom Taxonomies

Key Technical Challenges

Sticky Header Breaking the Mobile Menu

Challenge: Once the header became “sticky” on scroll, opening the mobile navigation drawer produced almost no visible height, even though the underlying markup hadn’t changed.

Solution: The sticky header’s blur effect was creating a new CSS containing block for the drawer’s fixed-position element, silently overriding its full-viewport sizing. We moved the blur onto a decorative layer instead of applying it directly to the header.

Outcome: The mobile drawer now renders at full height in every scroll state, with the visual blur effect fully intact.

Long-Content Scroll Animation

Challenge: An existing scroll-reveal animation could prevent unusually long content blocks from ever becoming visible, because its trigger depended on a percentage of the element’s own height — a condition that becomes mathematically unreachable once content is tall enough.

Solution: The animation logic was changed to use viewport-based visibility conditions instead of element-height-based ones.

Outcome: Content now reveals consistently regardless of article or page length.

Responsive Image Quality

Challenge: Featured images on blog detail pages appeared sharp on smaller devices but noticeably softer on large desktop screens.

Solution: We reviewed how WordPress generated and selected responsive image sources and adjusted the requested image size and responsive sizing information to better match the actual display dimensions.

Outcome: Browsers now select more appropriate image sources for larger displays, providing better visual quality without changing the responsive layout.

Cross-Browser Slider Scrolling

Challenge: The related-articles slider responded correctly to a vertical mouse wheel in Chrome but not in Firefox, since browsers differ in whether they automatically remap vertical scroll input to horizontal movement on overflow content.

Solution: We added a manual wheel-event listener that redirects vertical scroll input into horizontal movement, so behavior is consistent regardless of browser.

Outcome: The slider now scrolls correctly with a mouse wheel in every major browser.

Cross-Site Data Architecture

Challenge: The portfolio website needed access to Blog, Portfolio, Gallery, and Case Study content without maintaining separate copies of any of it, or depending on local ACF data it doesn’t have.

Solution: Each content type got its own dedicated API endpoint pair that prepares all required information on the main website before sending it to the portfolio website, following one consistent pattern across every module.

Outcome: Every content type can now be published once and displayed correctly across both websites from a single source.

ACF Field Registration for Case Study

Challenge: During development, the new Case Study field group was correctly defined but did not appear on the WordPress editing screen.

Solution: We investigated the actual loading sequence and found that the ACF initialization hooks in this environment were executing before the theme registration code became available. The field registration process was adjusted so the Case Study fields are registered at the correct point in the application lifecycle.

Outcome: The full Case Study administration panel now loads reliably in WordPress and provides editors with access to all required project fields.

Before vs After

Results & Impact

This engineering pass gives Encoder IT Limited a more complete, more polished, and more maintainable platform across the entire website — not just one module of it.

• Four content types — Blog, Portfolio, Gallery, and Case Study — now share one consistent, proven architecture for managing content once and publishing it everywhere.
• Several real interface issues affecting every visitor — the sticky header, slider autoplay, scroll-reveal animation, image sharpness — were identified and resolved as part of the same pass.
• The entire system works without requiring any premium ACF license.
• Skeleton loading and increased pagination improve the perceived performance and content density of the site as a whole.
• The internal content team gained a structured, editor-friendly workflow for every content type, including a brand-new way to showcase detailed project work.
• The architecture can support additional content and future modules without changing the publishing workflow.

Project Screenshots

Client Testimonial

“[Quote goes here]”

Name — Role, Company

Project Summary

Encoder IT Limited needed the whole website, across two connected WordPress installations, to feel like one consistent, well-built platform — not just a single new page. This project upgraded the Blog, Portfolio, and Gallery experiences, resolved a series of interface and performance issues affecting the site as a whole, and delivered a brand-new Case Study system built to the same standard as our existing modules.

The final result combines a custom WordPress content architecture, flexible project presentation, structured administration fields, cross-site REST API synchronization, and a smoother, faster front-end experience into one maintainable system — all built on tools already in use across the business, with no new plugin costs.

By extending the architecture already proven across Blog and Portfolio to every corner of the site, the platform now has room to keep growing without accumulating inconsistency between modules.

Have a Similar Software Challenge?

If your business needs a custom website, web application, mobile platform, API integration, automation system, or another tailored software solution, Encoder IT Limited can help turn your requirements into a scalable digital product.

Ready to bring your idea to life? Let’s discuss your requirements and build the right solution for your business.

Start Your Project