This is part of a series of posts I wrote about migrating a number of WordPress sites I run from a single multi-site setup to separate single site configurations. Along the way I also switched to a more modern, and configurable, theme and a theme manager/editor.
- Migrating to a Single Site Setup
- Learning Elementor
- Wouldn’t It Be Nice if WordPress and Elementor Were Better Structured?
Introduction
As part of my project to migrate several multi-site WordPress sites to separate standalone WordPress sites I decided to jettison the Genesis themes I’d been using for years. They still worked fine but seemed a little dated to me. Plus I could never seem to quite be able to tweak them the way I wanted to.
It turns a lot has changed on the WordPress theme front in the last few years. Themes have become more easily customizable and, more importantly, theme builder/editors have come into their own. These let you design, in a WYSIWYG manner, the look-and-feel of a site. They also let you design in a pretty high-level way by adding what amount to widgets that you customize via property pages.
The theme builder/editor I decided to adopt is Elementor. I started out using the free version but quickly moved to the Pro/paid version even though I was still pulling my hair out trying to learn the product. Which is another way of saying it’s a really good piece of software.
Understanding Elementor Templates
You can use Elementor to edit any WordPress page or post. Because it’s widget-based you can create far more complex content than you can with the Gutenberg editor.
Simple text editing is an interesting exception; IMHO, it’s more primitive under Elementor than Gutenberg. You basically use a TinyMCE-style editor to compose and format simple text objects. It works fine, but feels oddly simplistic next to all the other Elementor widgets. Also, if you’re switching over to Elementor from a post or page previously created in Gutenberg all the Gutenberg blocks are combined into one large “text” block (which may contain images and whatnot). Not hard to deal with, but a little jarring the first time you run into it.
My initial attempts with Elementor turned out to be classic examples of going around the barn to get somewhere because I didn’t understand WordPress theming. What I did was create Elementor templates — say for the home page of a site — and then create a WordPress-style page that contained a shortcode block referencing the Elementor template. It worked, but it was really clunky. Not to mention hard to edit or extend.
The a-ha moment came when I realized that Elementor templates can carry attributes which define when they’re utilized by WordPress. This is configured by setting “conditions” on an Elementor template. These define where and how the template is used within your WordPress site (the window on the right is what you get when you click on Display Conditions in the popup after clicking the upwards arrow next on the Update button):
The “language” used to define conditions isn’t particularly robust. But so far it’s met all my needs for tying templates to particular parts of the WordPress theme I’m using (Astra Pro).
So rather than build a template for a home page and then define a home page with a shortcode for the template in it I just create a header, a footer and a sidebar that I use to define a home page within the WordPress page editor.
Just What Is a WordPress Theme, Anyway?
But there are several ways you can build that page from parts, depending upon both the theme you’re using and how you configure it. That additional level of complexity often causes me problems. I think I’ll be building a page on a new site the same way I did on some other site and not understand why it looks fundamentally different…only to find out I’d set some configuration option in Site A’s theme that I had neglected to do in Site B. Or which may not have been available in the theme I was using on Site B.
For example, if your theme supports doing so, you can turn off, say, the right sidebar throughout a site and build pages and Elementor templates where you explicitly incorporate the sidebar you want to include in the page or template you’re designing. Or you can configure the right sidebar to always use an Elementor-built right sidebar (technically a section, in Elementor-speak) in which case it’ll show up on your pages and posts without you asking for it.
Which can be confusing if design a page or template to include a right sidebar when you already have one defined site-wide in your theme. You’ll end up with two…which is probably not what you want.
My current understanding of a WordPress theme is that it’s a collection of settings (e.g., font type, size and color) and structures (e.g., the presence or absence of a right sidebar) that define the look and feel of your site. Some of which can be overridden by creating an Elementor template designed to be used for a WordPress “purpose”.
What constitutes a WordPress purpose? Here are the ones I currently recognize:
- displaying a single post
- displaying a collection of posts
- displaying an archive (which isn’t the same thing as a collection of posts because it’s defined as the result of some query like “everything from November, 2019”)