leoraw houses banner for website

Technical Posts with Code Exploring Web Development

Themes in 2024: Theme Makeovers in WordPress or Drupal

What is a Theme?

A theme is a set of code that controls the look and feel of your website. Colors, fonts, and layout are managed via your site’s theme. If you change the theme, your content will still be the same, but the look of your site can change quite a bit.

Makeover of a WordPress Theme

I decided to updated the theme of this Website Musings Blog. The theme before the current one was a child theme. What is a child theme? A child theme takes all the styles and other files from the parent theme. It allows the child theme author to create new stylesheets, scripts, or templates that will get used in place of one’s in the parent theme. I had build the theme from Twenty Seventeen. It still worked, but it used old layout methods, such as floats. Plus I wanted more control over the look and feel of the site. Read more about how to create a WordPress child theme.

It had been a while since I started a theme. A few years ago I revamped the theme for www.leoraw.com. I started the original WordPress blog theme back around 2009 as a simple theme with a bunch of php files like index.php and functions.php. A few years ago I was looking around for a way to redo that theme. I considered a child theme of one of the yearly WordPress themes, like Twenty Twenty. I have built some WordPress sites by creating a child theme from one of those yearly themes. It seemed to be a good strategy.

However, the WordPress community had different ideas on how to build themes. It turns out the new yearly themes all use Gutenberg, the block editor. I have tried Gutenberg, and I have nothing against people who like to build sites with those sorts of building block tools. I prefer the Classic Editor as well as the Classic Widgets. Somehow I stumbled upon Timber, a system that uses Twig. Ah, ha! I really like Twig as a base for a theme, as I have used it for years for Drupal sites. With Timber, you write your HTML using the Twig Template Engine separate from your PHP files. This enhances the security of your site by separating data/logic from display. So I built the leoraw theme with Timber. It didn’t take a lot of work for me to transfer the code from the old theme into my new Timber theme. Timber recently switched to requiring Composer instead of using the Timber plugin. That took a bit of work to change into the Composer system, but I got it done.

Recently, I wanted a Timber WordPress theme for this Websites Musing blog. The recommendation is to install Timber using Composer and then to use the Starter Kit to create your theme. I was rather pleased with the result. I will probably continue to fine tune the theme.

Finding an Appropriate Drupal Theme

I wanted a simple but clear Drupal theme for a demo. I saw the recommendation for starting Drupal themes was to generate a new Starterkit theme. So off I went, creating a new theme using the starterkit method. However, I realized that for this demo starting with absolutely nothing at all in the styles was rather daunting. Since I had started the demo using the Drupal theme Olivero, I started copying some of those styles into my new starterkit theme. After a while of doing this, I decided it was easier just to start with Olivero, a fine and flexible theme, and create a sub-theme. View the code for my Olivero sub-theme. Read more about how to create a Drupal sub-theme.