Theme Updates: Lessons Learned

Two things today, based on my two latest WordPress website update projects:

• Theme misfit
• Reverse engineering the theme demo

Potomac Indexing Theme Change

Sometimes, you have to cut your losses and let go. Such was the case here. I began with PI in Author Pro theme from Studiopress, which is getting a bit old at two years. I wanted to update to take advantage of the new blocks available with the Gutenberg editor and freshen up the site.

I went over to my Studiopress themes (lots to choose from) and picked Corporate Pro. Seemed like a good choice because PI is a small LLC with four partners. It’s not about one person’s creative efforts, so “corporate” seemed like a good choice.

After I installed and activated the Corporate theme, though, it didn’t want to cooperate with my ideas for laying out content on the front page or for the usual color changes to borders and such that I do in my extra CSS (Cascading Style Sheet).

Studiopress has two types of themes in their portfolio: created by Studiopress developers directly, and created by third-party developers. Third-party (“community”) developers (like the one for the Corporate Pro theme) don’t always follow the clean organization of the homegrown StudioPress style sheets. I tried valiantly to find things like where the color for the border below the header was controlled. The style code that took care of that was buried somewhere, maybe in two different areas. It could have been in the introductory “baseline normalize” section of the style sheet, which I like to leave alone since it affects multiple parts of the site at once. I would have preferred that style to be more accessible, but it’s just the way the developer chose to build his/her theme.

In the end, after spending a bit too much time on Corporate Pro tweaking, I looked for a true Studiopress theme and found Breakthrough Pro. Very nicely organized style sheet (they have tables of contents!) that I was able to tweak more easily.

Cosmic Whispers Theme Update

I always get excited when Studiopress updates a child theme! The update for Authority Pro included a big shift in how objects are displayed on the front page. Studiopress decided to reduce the number of widget areas (to almost none) and favor Atomic Blocks (a plugin). Atomic Blocks are layout functions to create full-width containers, customizable multi-column sections, and more customizable on-the-spot configurations of images and text. WordPress started the blocks thing when they created the new editor (Gutenberg, they call it), and Atomic Blocks is a powerful extension of that idea.

Even though this was an upgrade of a theme I was already using, the functional change from widget areas to blocks was a bit of a challenge. At first, I installed and activated the theme the way I usually do, without importing any of the demonstration content. Bad idea in this case. I now lost the widget areas I’d been used to displaying things in, and without the demo content, I couldn’t see how they were using the new blocks to create the look. After fiddling around for a bit with the skeleton of the theme I got smart.

I re-installed the theme and imported the demo content. Now I had pages with content laid out using the new blocks. The code view in the WordPress editor showed me what was going on “behind the scenes.” Reverse engineering time! I learned to use container blocks of different widths (because I could see the options right away on the page as I edited) and easy-to-add button blocks to create a consistent look for each panel on the front page. My own images and button colors replaced the demo and I was ready to go.

In the end . . .

I know my theme replacement/upgrade process is going to be lots more efficient now that I’ve learned these two lessons. And I’m liking the blocks idea now that I’ve become more familiar with its potential.

Let me know how you are getting along with WordPress’s editor, and if you need help tweaking something, I’ll be here!