I recently developed a WordPress theme for headless WordPress projects. This post is a simple explanation of the decisions that were made after implementing the theme on a few JAMstack projects.
Highlights
The index route forwards to the /wp-admin login screen so there is no need for any front-end code:
<script type="text/javascript"> window.location.replace(window.location.protocol + "//" + window.location.hostname + "/wp-admin"); </script> There is an example Custom Post Type already set up to display in the API as well as in the Graph if you are using WPGraphQL:
add_action( "init", "create_custom_post_type" ); function create_custom_post_type() { register_post_type("custom_posts", // Register Custom Post Type array( "labels" => array( "name" => "Custom Posts", // Rename these to suit "singular_name" => "Custom Post", "add_new" => "Add New", "add_new_item" => "Add New Custom Post", "edit" => "Edit", "edit_item" => "Edit Custom Post", "new_item" => "New Custom Post", "view" => "View Custom Post", "view_item" => "View Custom Post", "search_items" => "Search Custom Posts", "not_found" => "No Custom Posts found", "not_found_in_trash" => "No Custom Posts found in Trash" ), "menu_position" => 5, "menu_icon" => "dashicons-awards", "public" => true, "show_in_rest" => true, "show_ui" => true, "show_in_menu" => true, "publicly_queryable" => true, "capability_type" => "page", "hierarchical" => false, "has_archive" => true, "supports" => array("title","thumbnail","editor","revisions","excerpt","author"), // Other Options: trackbacks, custom-fields, page-attributes, comments, post-formats "can_export" => true, // Allows export in Tools > Export "taxonomies" => array(), // Add supported taxonomies, "show_in_graphql" => true, "graphql_single_name" => "CustomPost", "graphql_plural_name" => "CustomPosts", ) ); } There are example Custom Shortcodes and Custom Taxonomies set up to display in the API as well as in the Graph:
function headless_shortcode( $atts , $content = null ) { // Attributes $args = shortcode_atts( array( "link" => "", "target" => "_self", "rel" => "", "class" => "", ), $atts ); return '<a href="' . $args['link'] . '" target="' . $args['target'] . '" rel="' . $args['rel'] . '" class="btn ' . $args['class'] . '">' . $content . '</a>'; } add_shortcode( "headless", "headless_shortcode" ); add_filter("acf/format_value/type=textarea", "do_shortcode"); function headless_taxonomy() { $labels = array( "name" => "Taxonomies", "singular_name" => "Taxonomy", "menu_name" => "Taxonomies", "all_items" => "All Taxonomies", "parent_item" => "Parent Taxonomy", "parent_item_colon" => "Parent Taxonomy:", "new_item_name" => "New Taxonomy", "add_new_item" => "Add Taxonomy", "edit_item" => "Edit Taxonomy", "update_item" => "Update Taxonomy", "view_item" => "View Taxonomy", "separate_items_with_commas" => "Separate Taxonomies with commas", "add_or_remove_items" => "Add or remove Taxonomies", "choose_from_most_used" => "Choose from the most used", "popular_items" => "Popular Taxonomies", "search_items" => "Search Taxonomies", "not_found" => "Not Found", "no_terms" => "No Taxonomies", "items_list" => "Taxonomies list", "items_list_navigation" => "Taxonomies list navigation", ); $args = array( "labels" => $labels, "hierarchical" => false, "public" => true, "show_ui" => true, "show_in_quick_edit" => false, "meta_box_cb" => false, "show_admin_column" => false, "show_in_nav_menus" => false, "show_tagcloud" => false, "show_in_rest" => true, "show_in_graphql" => true, "graphql_single_name" => "Taxonomy", "graphql_plural_name" => "Taxonomies", ); register_taxonomy( "taxonomy", array( "page" ), $args ); } add_action( "init", "headless_taxonomy", 0 ); There are some utility functions that help with reorganizing/removing menu items and disabling RSS:
function remove_menus() { remove_menu_page( "index.php" ); //Dashboard remove_menu_page( "jetpack" ); //Jetpack* remove_menu_page( "edit-comments.php" ); //Comments } add_action( "admin_menu", "remove_menus" ); function headless_custom_menu_order( $menu_ord ) { if ( !$menu_ord ) return true; return array( "edit.php?post_type=page", // Pages "edit.php", // Posts "edit.php?post_type=custom_posts", // Custom Post Type "separator1", // First separator "upload.php", // Media "themes.php", // Appearance "plugins.php", // Plugins "users.php", // Users "separator2", // Second separator "tools.php", // Tools "options-general.php", // Settings "separator-last", // Last separator ); } add_filter( "custom_menu_order", "headless_custom_menu_order", 10, 1 ); add_filter( "menu_order", "headless_custom_menu_order", 10, 1 ); All ACF fields that are empty are nullified by default:
// Return `null` if an empty value is returned from ACF. if (!function_exists("acf_nullify_empty")) { function acf_nullify_empty($value, $post_id, $field) { if (empty($value)) { return null; } return $value; } } add_filter("acf/format_value", "acf_nullify_empty", 100, 3); Headless is available over on GitHub. Download it, peruse it, use it and let me know what you think!
Top comments (1)
I was about to create a repository with my own version of a headless theme but I found yours and decided to use it, so far everything is good, great job!