
How to Keep Your Head while Going Headless with WordPress


What do you want to become?
It’s the big question that occupies most teenagers in their final years of lower secondary school.
This is when career orientation begins and with it comes a time full of uncertainty, hopes and important decisions.
At twelve, I already knew what I wanted to become: I wanted to do something creative, something with computers as a profession. That was my goal. Even though my strengths clearly lay in sports, no one ever suggested I turn that into a career.
So I focused all my energy on finding an apprenticeship as a typographer – or more precisely, a polygraph. I completely overlooked that there were other creative professions that aligned even better with my interests, like graphic design. Neither my teachers nor the career counselor pointed it out. Maybe it was because I communicated what I wanted so clearly. But perhaps also because there was simply too little structure and guidance.
I completed a 10th year at school only to continue looking for a polygraph apprenticeship – unsuccessfully. Just before graduation, I landed a commercial apprenticeship at ABB, thanks to connections. A job I only knew from movies as a “secretary.” I started an apprenticeship I had never truly considered.
After a few years as a commercial clerk, several further educations, and a few career detours, I finally found my way back to what I truly wanted: design with computers. First as a front-end designer and later as a UX designer. Today, I’m UX Designer and Managing Director at required gmbh, doing exactly what I always dreamed of: combining design and technology to create digital products that make a difference.
The career choice app (PWA) of the Canton of Zurich
If I had had access to more information back then – a portal that presented, compared, and explained different professions – my path might have been far more straightforward.
That’s why I’m especially proud to have been working for over six years with the Office for Youth and Career Guidance of the Canton of Zurich on the career choice platform, a progressive web app (PWA) designed to do exactly what I was missing back then:
Offer guidance, inspiration, and support to young people navigating one of the most important decisions of their lives.

WordCamp Europe 2025
This article was written in the context of the talk at WordCamp Europe 2025 “How to Keep Your Head While Going Headless with WordPress” by Karin Christen.
UX Design
How thoughtful UX helps young people, parents, and teachers navigate career choices
Our design strategies for orientation, motivation, and accessible guidance in a complex decision-making environment
The challenge of career guidance
Career guidance is complex, not just for young people, but also for everyone supporting them. The platform’s target audience is equally diverse: students, parents, teachers, career advisors, and training companies.
The goal: a platform that motivates and guides young people — while respecting their autonomy and avoiding a one-size-fits-all approach.
The challenge:
Each target group comes with its own needs, goals, and usage contexts. Designing a unified experience that works for all of them required a careful balance between structure and flexibility, and a profound understanding of their day-to-day realities.
- Teachers from over 350 schools actively use the platform in the classroom – for example to accompany the interest test or as a starting point for project work on career choices.
- Careers advisors from over 390 information centers (BIZ) use the platform to prepare specifically for interviews and discuss suitable career profiles with young people.
- Over 6000 training companies manage their apprenticeship vacancies and trial offers directly via the platform.
- Parents are given access to information about career choices and – with their child’s consent – can view their child’s progress and provide targeted support.
- Young people use interactive tools, gamification and personalized recommendations to discover professions that match their interests and strengths – and often open up completely new perspectives.
At the heart of it all lies a simple conviction: No one should have to shape their professional future alone.
That’s why we don’t see the platform as just an information source, but as a companion on the path to decision-making.
It’s designed to motivate, empower, and offer the right impulses at the right time.
Motivation Instead of Overwhelm: UX for Career Choices
The sheer variety of options is both a blessing and a challenge.
In Switzerland, there are over 300 recognized professions, more than 6000 apprenticeships, and tens of thousands of potential training companies.
For many young people, this abundance leads to one thing above all: a lack of orientation.
Our goal was to design the platform in a way that sparks curiosity in a playful, intuitive way, without overwhelming users.
School or Work? A Tool for Self-Reflection
One of the key decisions in the career orientation process is:
Should I continue with school — or would I rather learn a profession?
The platform supports this reflection with a dedicated tool we developed: the Maturitätsschul-Check — a short self-assessment that helps students explore whether a more academic path might suit them, or whether vocational training is the better fit.
Students click through a series of simple, relatable questions and receive an initial indication of whether a school-based path could be right for them. such as:
- Academic high school (Gymnasium)
- Business school (Handelsmittelschule)
- IT-focused middle school (Informatikmittelschule)
- Specialised middle school (Fachmittelschule)
- or the Vocational Baccalaureate School (Berufsmaturitätsschule)
It helps them consider whether one of these paths might make sense for them, or whether a direct entry into an apprenticeship would be a better fit.

The Check isn’t a decision-making tool in the traditional sense. Instead, it’s designed as a prompt for self-reflection: it encourages students to think about their goals, interests, and learning motivation — and to make more conscious choices about their next steps.
Career Exploration Through Intuition
A central feature of the platform is the Profession Explorer.
Instead of scrolling through a long, alphabetical list of job titles, students are shown photos of real professional activities, without labels or bias. With a simple click, they can say whether something looks interesting to them or not — entirely based on instinct.
Only in the second step do they discover which occupational fields their interests align with. This intuitive approach allows for a first, unbiased exploration of career options, free from external expectations or stereotypes.
The Interest Test in Career Choice Lessons
To support more structured guidance, the platform offers a comprehensive interest test.
Teachers use it in career choice lessons to introduce students to both the platform and the broader process of career exploration.
With 9 steps and 10 questions each, the test is intentionally in-depth — and therefore time-consuming. To keep students engaged, we’ve embedded key UX principles:
- Progress is visible at all times.
- Current progress is saved automatically, even without logging in
- The experience is structured, mobile-optimised, and accessible
This transforms a potentially overwhelming questionnaire into a supportive reflection tool, turning the test into an entry point for self-discovery, not judgment.

The results are visualised in a spider chart and directly connected to occupational fields, creating a seamless link between self-perception and tangible career options.
Personalisation Without the Filter Bubble
The more young people engage with the platform, the more personalised the experience becomes — for example, through tailored recommendations on their personal dashboard, such as matching professions or open trial placements.
But the important thing is:
The platform is designed to be a compass — not a tunnel.
It also shows professions outside a user’s usual interests, to open up new perspectives and encourage unexpected discoveries. Sometimes the right path is where you least expect it.
React.js Development
React.js offers fast rendering, modular code, reusability of components, efficient performance, easy scalability and great community support.
Single-page applications
Single page applications are fast, user-friendly and interactive. They enable a seamless user experience with optimized loading times and an appealing design.
Progressive web apps
Progressive web apps offer cross-platform compatibility, fast loading times, offline functionality, low memory requirements, automatic updates and convenient installation.
Technical architecture
Headless WordPress meets PWA
We have created a modern setup that works for several cantons
Headless with WordPress: modular, scalable and future-proof
It was clear from the start that the platform for the canton of Zurich should not be an isolated solution, but should be structured in such a way that it can also be reused and adapted in other cantons. The requirements were accordingly:
- Modular: so that individual features can be developed independently
- Flexible: to support different corporate designs and target groups
- Future-proof: for future technical requirements
At the same time, the platform needed to work offline, similar to a native app, but without installation on devices. Our solution:
We developed a progressive web app (PWA) with a headless setup – i.e. a front-end architecture that is completely decoupled from the back-end.
Why headless?
In a classic content management system, the frontend and backend are closely connected. Content is displayed directly in the WordPress theme, supplemented with plugins and PHP templates. This works well, but has its limits when it comes to modern, dynamic applications.

In contrast, a headless system completely separates the presentation layer from the content.
- WordPress is now only used for content and user management.
- The frontend is based on a standalone React application that is supplied with content from WordPress via REST API.
- The content is maintained in a structured manner in the backend, a modern, app-like web interface takes care of the content presentation.
What is particularly exciting is that this setup allows us to roll out several front ends for different cantons – each with its own design, but based on the same code. The platform is currently running successfully in the canton of Zurich, other cantons are currently being implemented or planned.
Data architecture: WordPress as a structured data hub
Behind the platform is a complex system of internal and external data sources. The most important content comes from:
External APIs
- Professions (311)
- Practicas (over 45’000 items)
- Apprenticeships (6’000 items)
- Training Companies (over 30’000)
- Events
Directly maintained content in WordPress
- User (30’000+ and growing)
- Schools (350+)
- Career Counclers (around 400)
- Informations centers (BIZ)
- Company-Events
All this data flows together in WordPress, which acts as a structured data hub. The PWA processes the data for the presentation layer and ensures a smooth, responsive user experience.
Roles & editorial freedom
Access control, custom endpoints and empowerment for content teams
Why a good CMS doesn’t live from code, but from editorial freedom
Editor-friendly, without compromising on structure
A special focus was placed on the balance between structure and editorial freedom:
- The job pages are connected via the API and their basic structure is fixed. This ensures that central information always remains up-to-date and consistent.
- At the same time, content managers can add their own content via custom fields in the WordPress sidebar, e.g. videos, podcasts, images, further links or educational requirements.
- Editing takes place in the Block Editor, whereby API data is displayed as read-only content – to ensure data consistency.
The result is a system that is technically stable and editorially flexible.
User roles, rights & editorial freedom in the headless setup
Not all content on the platform is visible to everyone, and that’s how it should be. That’s why we control access and visibility via clearly defined roles and authorizations, which are checked on the server side via the WordPress REST API.
Role-based access to content
When logging in, the API sends back the user role, the front end therefore knows exactly what content may be displayed:
- Young people see their own profile, activities and personal recommendations.
- Teachers have access to their class overview.
- Companies only manage their own apprenticeships and trial offers.
The result is a relevant, secure and personalized user experience.
Why we rely on our own endpoints
Although WordPress provides a standardized REST API, this was not enough for our setup. To achieve more control, flexibility and performance, we developed over 40 of our own custom endpoints.
Among other things, these enable us to
- Preview function for content in the decoupled setup
(e.g. preview of a blog post before it is published) - Maintenance of the navigation by editors
(e.g. main menu or footer structure, without agency support) - Use of native WordPress functions, e.g. for image optimization for professional thumbnails
In short, we wanted editors to be able to maintain their content independently without having to rely on us as an agency for every menu item.
Because that is the real purpose of a good CMS:
Empower editors – don’t bind developers.
Technical effort vs. user experience
Of course, a headless setup places higher demands on design, implementation and maintenance. There is no preview function “out of the box”, no native menu integration, and many standard functions have to be custom developed.
But: the effort is worth it – and pays off in terms of user experience.
Advantages that only headless offers
- The interest test works offline thanks to Service Worker, ideal for schools with an unstable internet connection.
- The platform remembers the test progress automatically, even without a login.
- The live filtering of all professions works at lightning speed and without page reload, a performance that would be almost impossible to achieve with a classic WordPress theme.
These are just a few examples of how we were able to fully exploit the possibilities of a modern PWA – for the benefit of the target group.
Lessons learned & recommendations
What you should know before you start your own headless project
Real experiences, clear learnings and practical tips from five years of development
Headless is powerful – but not a sure-fire success
Building a headless platform with WordPress as a content hub and a self-developed frontend has taught us a lot in recent years. Headless opens up great opportunities, but it also brings with it some challenges.
What you should know before you start
Two code bases mean double responsibility
You no longer just manage WordPress, but also a fully decoupled frontend. This means: double architecture, double build pipelines, double maintenance effort.
WordPress is stable – the frontend is a moving target
We started in 2019 with Create React App – which is now outdated.
We are currently migrating to a modern setup with Vite and React Router 7.
Headless needs more time
A PWA brings offline capability, performance and modern UX, but also around 30% more effort in design, development and maintenance compared to classic WordPress websites.
Not every hosting environment is suitable
For headless, you often need a dedicated infrastructure, especially if Node.js or a build system (e.g. Vite) is in use.
Not all plugins are compatible
Many WordPress plugins were built for PHP themes – they do not automatically work in headless setups. Check API compatibility at an early stage.
These plugins are headless-compatible (as a rule):
Tips
For a good start to your headless adventure
If you are planning your own headless project, here are our practical recommendations:
Use a boilerplate
If we were to start again today, we would not get by without it. Recommendation: HeadstartWP as a solid basis
REST API or GraphQL?
Both work, depending on the project requirements. For GraphQL: WPGraphQL Plugin
Develop custom endpoints
It is worth writing your own APIs for previews, menus or complex elements. This gives editors full control.
Rely on a modern front-end setup
Active maintenance and future-proofing are crucial, we now rely on Vite + React Router 7.
For PWAs: Use Workbox
Google’s tool makes caching, offline functionality and dealing with service workers easier for you.
For React: Use dev tools
Install React DevTools and React Scan to debug better – and not lose your head during development 😉
Why all this?
We went headless — so that young people don’t stay headless in their career choices.
And hopefully, now you won’t feel headless in your next project either.
Become part of our team
Would you like to work with us on digital solutions that really make a difference?
Find out more about how we work – and if you have an idea how your expertise could enrich our team: Just get in touch.
What our customer says about the collaboration:

Department of Education AJB
Canton of Zurich
Transparent & Fair
“I really appreciate the transparent and fair way required works!”
More about our web development
Are you planning your own headless project or looking for an experienced team for UX and web development?