Gutenberg Starter Themes

WordPress starter themes provide a solid foundation for building your own custom WordPress themes. In this article, I share my two Gutenberg-optimized starter themes.

What is a starter theme

A starter theme is a lean WordPress theme with minimal styles and functionality. It often contains simple functionality you use across most projects. It gives you a common starting point for your theme development.

Gutenberg introduces many new features and styling requirements, which I’ve documented in my Developer’s Guide to Gutenberg. These starter themes incorporate all the recommendations listed in those articles.

All of my starter themes use hooks and filters for customization, on which I’m writing a tutorial right now. Be sure to subscribe to email updates so you’re notified when that article is published.

Hybrid Starter Theme

BE Starter is a free starter theme to help you build hybrid WordPress themes. hybrid WordPress theme uses theme.json to define styles and customize the block editor while also using traditional PHP template files.

BE Starter is my most up-to-date starter theme. Prior to theme.json, I used EA Starter as my starter theme, or EA Genesis Child as a Genesis child theme.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. dusty says

    TwentyNineteen as a starter theme does not work very well, for instance to style a menu — you have to weed through no less than 8 different scss files. And a block quote has 31 different instances spread out over tons of files — its not a theme that is easily expanded on precisely because its too cut up into this separate issues. I never know if what it is is what it is — in fact — IT NEVER IS. ITS NOT A STARTER THEME. I really like the design itself. But what a hassle!

    • Bill Erickson says

      I agree that TwentyNineteen isn’t a stripped down theme suitable for building a completely custom design. But I think it makes a great starter theme for simple sites that don’t need a completely custom design. It’s sort of like a Bootstrap for WordPress – an opinionated design that works well if you want to use it that way.

      I used TwentyNineteen as the starter theme for Display Posts and Shared Counts documentation sites.

      • James Jackson says

        Ok, Sir please provide some snippet to add this functionality in Ea Starter theme.
        Thanks for help and support.

  2. Suresh Wadkar says

    I have one question related Svg.
    As we know that Svg is xml and wordpress doesn’t support Svg, because security reason.

    I have seen many Svg in your theme Like, Search toggle, menu toggle, close icon etc. …

    1. Is this safe to use Svg in wordpress?
    2. If Svg not safe then any other way to use safely.
    3. What is the best way to use svg?

    4. Is this theme doesn’t support fontawesome?

    • Bill Erickson says

      WordPress doesn’t support uploading SVG files through the media uploader because they are XML files and cannot be safely sanitized. The security issue isn’t SVG files per se, but allowing users the ability to upload XML files that could contain anything, including malicious code. WordPress can’t differentiate between an SVG file and a malicious XML file because they are the same file format.

      You can definitely use SVG files in your theme directly, as I have done in my starter themes. It’s completely safe to use an SVG file.

      The best way to use an SVG file is to include it directly in the markup of the page. My starter themes include a helper function, ea_icon(), that simplifies this. Here’s an example of how I use an SVG for the dropdown arrow in a navigation menu.

      The parameters are:
      icon, the actual name of the SVG file in your theme
      group, which icon subfolder from which to pull the icon. If not provided, it defaults to the “utility” folder
      size, the size of the icon in pixels. Note that the SVG files stored in the theme should have the width/height attributes removed so this function can dynamically add it back based on the size you specify (example).
      title, add a screen reader accessible label to the icon

      You are correct, my starter themes do not support FontAwesome, although you could easily include the FA CSS file and replace my icons with Font Awesome icons.

      Here’s a good discussion on Inline SVG vs Icon Fonts.

  3. Burchard says

    Superb theme for custom design.
    Lot of quality features inbuilt in this theme. I really like this theme so much instead of genesis child.

    I’m new on wordpress and I’m not a Developer.
    I’m customizing this theme for my personal blog so i really need Breadcrumb, author box, related post.

    If possible please add this features or give me some snippet or code for doing this.

    Thanks regards.

  4. Tom Cruise says

    Hey Bill,
    I want to show “Last Modified Date & time” in post at the same line of “byauthor”.
    I have tried many method but everytime i’m getting fail.

    Here is the code of byauthor in single.php
    add_action( ‘tha_entry_top’, ‘ea_entry_author’, 12 );

    I have tried this
    add_action( ‘tha_entry_top’, ‘ea_entry_author’, 12 ‘the_modified_time’, $date_format );

    .Not working

    Please help me !

    • Bill Erickson says

      Here’s an article on how to add the last modified date to your posts.

      You can’t add additional arguments to add_action(). It only accepts 3 arguments:

      1. The hook name – where you want your code to execute.
      2. The function name – what code you want to execute.
      3. The priority – in what order should the code attached to this hook execute. The default is 10, and a lower number executes sooner.
  5. Burchard says

    Hi, Good After Noon.

    I have copied the snippet of Related post from your Genesis child theme and pasted in to the Ea starter theme and its working fine.

    But when i have added the (author-box.php file in Ea Starter theme) from your genesis child. its not working.

    also added this snippet to function.php
    include_once( get_stylesheet_directory() . ‘/inc/author-box.php’ );

    after tried this hook
    genesis_do_author_box_single();

    but not working .
    Please give me any solution for Author box .
    humble request.

    • Bill Erickson says

      You can’t copy code from EA Genesis Child into EA Starter. EA Genesis Child is a Genesis child theme and leverages functionality found in the Genesis parent theme.

      genesis_do_author_box_single() is a function in Genesis that displays an author box. You can’t call that in EA Starter because it is not a Genesis child theme and the function is not defined.

      You will need to create your own custom author box, like this: https://gist.github.com/billerickson/68e4f32bb10be76f59054f718c270a40

  6. Rangila Rajkumar says

    Most beautiful and fastest theme i ever seen. I customized this theme on local server and its loading smoothly. But on the live server when i Minify Html & Css through ‘Wp Rocket’ .
    Wp Rocket showing error on live server:

    “WP Rocket: Failed to detect the following requirements in your theme: closing , , and wp_footer()”

    I think I’m getting this error cause Of Html. Because this theme is not supported Html.

    Is this theme is compatible or not for use always ?

    Any way to convert this theme as Html base ?

    • Bill Erickson says

      It sounds like your customizations might have broke something. Both of these starter themes include wp_footer() and have no issues with WP Rocket.

  7. Sangeeta Bijlani says

    Can I delete all scss files or folder after customization?
    Or it’s will affect on site
    Please describe.
    Thanks

    • Bill Erickson says

      If you don’t plan to use SASS, you can delete the /assets/scss folder and make your customizations directly in /assets/css/main.css.

      Since the CSS file is minified, you might want to unminify it to make it easier to customize.