As I began the new year, I decided it was finally time to dust off my FTP client and rethink my website.
Past iterations of my site were mostly just tinkering and devoid of any real substance. Yes, lessons were learned, but some things just need to be burnt to the ground and built from a new foundation.
Introducing….Twentynineteen – erm – child theme edition.
Now, I’m no designer, but this is a pretty clean page. This didn’t take me too long to put together and mostly involved the following:
- Importing some fonts
- Kadence Blocks plugin
- About 50 lines of CSS (roughly 1000 characters minified)
Not bad! Let’s look a little closer. I’ve divided the homepage into three sections.
Section one
The top section is rather straight forward. I simply added my initials as the Site Title, my full name as the Site Description and then set the site description as its own block with some CSS:
.site-description{
display: block; /* Sets the description on its own line */
padding-left: .25em; /* Just to line up the left edge nicely */
}All of which was done directly from the WordPress customizer. Nice.
I also hid the site navigation in favor of embedded links in the body of the site.
Section two
The content section uses the new Gutenberg editor along with a few custom blocks by Kadence Themes.
What’s great about Gutenberg is that all sorts of block libraries are being developed. The benefit of a Javascript framework is that it creates a foundation that WordPress features can build off of, using one unified component system.
Another awesome benefit of the new Javascript framework is that is can be used outside of WordPress. The Drupal community adopted the Gutenberg editor for their open source project, and blocks built for Drupal can be used in WordPress!
Mixing and matching block libraries is simple and since blocks share a common component system and structure, every block should work seamlessly together.
Kadence has taken the rather lackluster columns block and extrapolated on it, providing rich UI controls and prebuilt column templates.
I used an H2 header for the quote, because I like how it stood out, though a quote block would likely be a bit more semantic with a bit of styling.
I then used a Kadence row block to create the fifty-fifty column layout.
Kadence does provide a few prebuilt layouts, which is a really nice feature. This cut my development time down quite a bit since it took some of the guess work out.
Section three
One of the options found in the Kadence row block is the divider setting. This option lets you embed a fancy svg image or bezier curve.
At first, I used one of the dividers because I liked how it looked like a mountain range. But as I tinkered with this, I realized that I would essentially need to leave an empty row at the bottom of every page in order to have these mountains appear in the footer consistently.
This is not a very elegant solution, especially since Gutenberg doesn’t support global blocks yet. This can be overcame with reusable blocks, but that still requires you to manually enter them.
The best solution (for now) was to modify the footer.php template file and embed the SVG into the template itself.
Removing layout from the editor and sticking it in the template files sort of defeats the purpose of Gutenberg. Granted, as more core elements of WordPress are brought into the Gutenberg framework, we should see less and less of this.
The first step is to go into the page editor and select the Code Editor from the editor settings in the upper right corner (beside Publish).
Next, copy the separator code, along with its SVG and path elements.
Now, using a child theme, you can paste the separator code just above the footer section.
This effectively moves the separator out of the content body and into the footer, letting you display the SVG on every page.
The last bit is to modify the SVG’s CSS so that the section is relatively positioned, this allows you to set the SVG to the bottom edge of the content section, just along the top of the footer.
/* Footer Separator */
.kt-row-layout-bottom-sep {
position: relative;
height: 250px; /* Adjust the height of the SVG for more stoic mountains */
}A note on widgets
Twentynineteen lets you add widgets to the footer, but doesn’t offer a sidebar widget area. In my case, this is alright.
In this particular build, I chose to add the Jetpack subscription widget to my footer, which only required a little bit of CSS tweaking to have it sit where I wanted.
Summary
I really liked building out this homepage with Gutenberg, especially when I started to add in custom block libraries. As the editor evolves over time, I believe it will serve as a robust alternative to TinyMCE.
Plenty of WordPress users ask, “why not just use one of the standard page builders like Divi or Elementor.”
That is an option. But Gutenberg aims to solve a more pernicious issue — developers designing user experience. Developers and designers are separate disciplines, usually for a good reason. Not to mention, every page builder is built in a unique and different way. This can be nice, since it gives you many options, but then you run into having too many options.
With Gutenberg, a component system is implemented that says “do this, don’t do that.” The importance of this is that it can create synergy across rich media features on the WordPress platform, something that was never possible before.
I found I wasn’t a huge fan of the large Twentynineteen headers, they just weren’t for me. But the beauty of WordPress is I could just simply remove them.
As I work with more and more websites, I am increasingly looking to cut out bloat and feature creep wherever possible. This approach creates a couple benefits:
- Decreased page load times
- Cleaner typography driven design
- Better accessibility across devices and browsers
- Less development overhead
I hope this overview inspires you to get under the hood of this year’s latest core theme and create something really special for your own blog.
