Unlock the power of HeadstartWP as you discover how to retrieve theme.json settings. Let your websites shine with dynamic features.

Step right into the marvelous world of headless technology! Unleashing its power in tandem with a robust CMS like WordPress is akin to concocting a magical potion that equips developers to weave spellbinding, high-performance websites. And the sorcerer’s secret to effortlessly setting up a headless WordPress website? None other than HeadstartWP by 10up! This magical tool is a true game-changer for headless website creation. If you’re new to this enchanting realm, don’t miss out on my comprehensive guide to getting started with HeadstartWP.

This article is your treasure map to discovering how to retrieve the currently active theme.json within the HeadstartWP universe. As a pivotal cog in the WordPress machinery, the theme.json forms the foundation of your base theming and block settings. It’s much like the ancient runic symbols, setting the stage for the aesthetics and functionality of your site. With its help, your headless site transforms from a static stone to a dynamic gem, shining brightly with its unique fonts, vibrant colors, and perfectly sized elements.

---

Ready to unravel the mystery of the HeadstartWP theme.json? Well, fasten your seatbelt because we’re about to embark on a coding adventure! Here’s the treasure map – a piece of exemplary code to guide you towards understanding how to access the theme.json settings. Let’s dive right in!

import {
	fetchHookData,
	useAppSettings,
	handleError,
	HeadlessGetStaticProps,
} from '@headstartwp/next';
import { FetchResponse, AppEntity } from '@headstartwp/core';

interface AppSettings {
    key: string;
    data: FetchResponse<AppEntity>;
    isMainQuery: boolean;
}

export const getStaticProps: HeadlessGetStaticProps = async(context) => {
    let appSettings: AppSettings;
    
    try {
        appSettings = await fetchHookData(useAppSettings.fetcher(), context);

        // Theme.json settings
        console.log(appSettings.data.result[`theme.json`]);
    } catch(error) {
        return handleError(error, context);
    }
};

Ready to dissect this code like a true maestro? Let’s dive into the heart of our HeadstartWP theme.json adventure. We begin our journey by welcoming aboard a handful of handy functions and types from the @headstartwp/next and @headstartwp/core toolkits. Here’s a spotlight on the star performers:

1. fetchHookData: This function acts as a master key, unlocking data from the depths of WordPress. To ensure it performs at its best, only summon it in the realms of getServerSideProps or getStaticProps.
2. useAppSettings: This is your magic compass, guiding you to global WordPress treasures like the site name, menus, and the coveted theme.json.

Alternatively, you can use the getThemeSettings provider:

import { useThemeSettings } from '@headstartwp/core/react';

const Component: FC = () => {
    const settings = useThemeSettings();

    return ...
};

Easy right?! HeadstartWP makes it easy to quickly get the entire theme.json with it’s built-in functionality — no custom code needed!

Don’t need the full theme.json? No problem. You can use HeadstartWP’s useThemeSetting provider to get what you need.

import { useThemeSetting } from '@headstartwp/core/react';

const Component: FC = () => {
    console.log(useThemeSetting(`color.palette.default`));
    ...
};

Super easy! useThemeSetting also allows you to get settings for specific blocks:

console.log(useThemeSetting(`color.palette.default`, `core/navigation`));

---

So, my fellow headless tech enthusiasts, we’ve journeyed through the process of retrieving theme.json settings in HeadstartWP, empowering you to architect websites that are both dynamic and high-performance. Make sure to delve into the resources below to further expand your HeadstartWP horizons.

• Deploy HeadstartWP to Vercel — Quick Guide
• Theme.json Font Family: Quick Reference
• HeadstartWP + Storybook: Made Simple
• HeadstartWP — Guide to Headless WordPress

Here’s to your coding adventures being as vibrant and exhilarating as the websites you’re destined to bring to life!