Replacing Divi with Untheme: A Beginner’s Guide

I’m a person who has learned to hate the Divi Builder. One of my favorite organizations recently adopted it, and wanted sister sites to match its style. The site looks nice, but if you want “normal” WordPress editors to add pages and posts without a big learning curve, they will be frustrated. They will have to at least learn how to “avoid” Divi builder and use the regular Gutenberg editor.

At first I thought — well, there are lots of free, existing WordPress themes out there and I’ll find one and tinker with its css. But there are almost no “plain” themes anymore! (If you find one that looks like “out of the box” Divi, let me know!)

Then I thought — well, perhaps I could build such a theme from scratch! It turns out this is not nearly as hard as one might think. And a wonderful person named Tania Rascia created an Untheme you can freely download from github. Out of the box, Untheme looks amazingly like Divi!

Once you start reading the code in Untheme, you realize that developing your own theme if surprising easy. Most of things one sees in commercially developed themes don’t really require “coding” per se — they simply require adding php calls to functions already built into WordPress, or clever utilization of existing Gutenberg Blocks, or blocks you can easily add with a plugin.

From github, simply download the repository as a zip file, and then — in WordPress Dashboard — go to Appearance / Themes and click the Upload button to upload untheme-master.zip.

If you’re trying untheme on an existing site, don’t worry — changing themes will not mess with standard WordPress content (pages, posts, media items, plugins). One reason to not use Divi is that it creates lots of non-standard classes in the text, meaning you are either stuck with Divi forever or you’ll have to clean up its oddball entries. Note to all humanity — keep you Wordpress contents clean and simple!

Themes contain the scripts you would intuitively guess they would: style.css, footer.php, header.php, page.php, search.php, sidebar.php and a few others.

The WordPress Customizer — as well as the block advanced settings in Gutenberg — allow you to tinker with CSS for your entire site or a particular item. The “inspect” function in the Chrome browser is very useful for seeing exactly what css elements you may want to tinker with.

WordPress now allows you to directly edit your theme php and css files. Got to the Dashboard / Appearance / Editor. WordPress also offers this wonderful website that provides you with information on all the built-in functions you can add.

The functions.php file is key to most customization. It is there that you need to tell WordPress to enable certain functions. For example, Untheme doesn’t use a logo by default. All you need to do to add a logo to your header is, in functions, you add this line along with similar ones:

add_theme_support( ‘custom-logo’ );

Then in the header.php file, before the site-title, you add a line to call that function between the header and h1 tags.

<header class="site-header">
 <?php the_custom_logo();?>
 <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>

All of the custom css you played with in the Customizer can be moved into the style.css file if you like.