Optimize Headless WordPress with the Bald Theme

Although headless WordPress websites don't require a conventional front-end theme, they still need specialized themes to enhance the admin dashboard, manage custom fields efficiently, and enable features like REST APIs and custom GraphQL schemas. This is where the Bald Theme comes into play. Purpose-built for headless WordPress websites, the Bald Theme is designed to streamline these backend functions. It has been deliberately stripped of front-end code, emphasizing their minimalistic design to complement a separate front-end solution.

The Foundation of Headless WordPress Customization

The Bald Theme serves as the cornerstone for headless WordPress customization. It is intentionally minimalistic, devoid of any public-facing code, and tailored for backend functionality.

Disabling the Gutenberg Editor in the Bald Parent

When WordPress websites employ plugins like ACF (Advanced Custom Fields) to manage content, the default Gutenberg Block Editor can often complicate the editing process and interfere with a smooth workflow. Disabling the Gutenberg Block Editor simplifies the content editing experience, making custom fields the central focus.

With the Bald Theme activated, you have the power to disable the Gutenberg Block Editor on the front page and the posts archive page. Additionally, you can deactivate the default editor for any custom WordPress template. To help you get started, the theme includes a custom page template named "Disable Gutenberg." You can access this setting conveniently under Theme Options within the WP Dashboard.

A Blank Canvas Ready for Customization

Enhance Your Admin Dashboard with Bald Child

Unlock the potential of the Bald Theme by creating custom styles for your admin dashboard, which is especially valuable for fine-tuning custom field layouts. The possibilities are virtually endless: you can disable default Gutenberg Blocks, implement REST and AJAX endpoints, or customize the GraphQL schema to match your unique requirements.

As an illustration, this website employs Bald Theme to define a custom "Code" Gutenberg Block using ACF (Advanced Custom Fields) which the front-end displays using highlight.js. You can explore the source code for this websites Bald Theme here.

Language: javascriptCopy
import { gql } from '@apollo/client';
import { React } from 'react';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';
import css from 'highlight.js/lib/languages/css';
import typescript from 'highlight.js/lib/languages/typescript';
import php from 'highlight.js/lib/languages/php';
import bash from 'highlight.js/lib/languages/bash';
import graphql from 'highlight.js/lib/languages/graphql';
import json from 'highlight.js/lib/languages/json';
import 'highlight.js/styles/github-dark-dimmed.css';

hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('xml', xml)
hljs.registerLanguage('css', css)
hljs.registerLanguage('typescript', typescript)
hljs.registerLanguage('php', php)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('graphql', graphql)
hljs.registerLanguage('json', json)

export default function AcfCode(props) {
  const attributes = props.attributes;
  const parsedData = JSON.parse(attributes.data);
  const stringifiedData = JSON.stringify(parsedData, null, 2);
  const data = JSON.parse(stringifiedData);
  const code = data.code;
  let language = data.language;
  let label = language;

  if (language === 'html') {
    language = 'xml';
  } 
  if (language === 'command_line') {
    language = 'bash';
    label = 'terminal';
  }
  
  const highlightedCode = hljs.highlight(code, { language: language }).value

  return (
    <pre className='theme-github-dark-dimmed shadow-3xl text-sm relative overflow-hidden max-w-full tab-size h-full rounded-xl my-4 shadow-md'>
      <div className='absolute top-0 left-0 w-full py-3 px-4 flex justify-between items-center z-10'>
        <small className='rounded-md opacity-50 p-0 pointer-events-none text-xs'><span className='hidden'>Language: </span>{label}</small>
        <button 
          className='appearance-none p-0 text-xs hover:text-teal active:transform active:scale-95 transition-all' 
          role="button" 
          onClick={() => navigator.clipboard.writeText(`${code}`)}
        >
          Copy
        </button>
      </div>
      <span className='hljs mb-0 p-4 pt-9 block min-h-full relative overflow-auto'>
        <code dangerouslySetInnerHTML={{__html: highlightedCode}}></code>
      </span>
    </pre>
    );
}

AcfCode.fragments = {
  entry: gql`
    fragment AcfCodeFragment on AcfCode {
      attributes {
        data
      }
    }
  `,
  key: `AcfCodeFragment`,
};

AcfCode.displayName = 'AcfCode';