New, More Flexible WordPress for Toastmasters Design Tools for 2024

Six new club and district website design themes for WordPress are now available on Toastmost.org or for download from this page. (Update: a few more have been added).

As variations on the Twenty Twenty Four default theme recently released by the creators of WordPress, these themes allow for more customization than ever before. You can make changes that until recently would have required either hiring someone with coding knowledge or learning those skills yourself.

In addition, pre-built assets bundled with these themes allow non-designers to tap add sophisticated layouts to their home page and other pages that would benefit from addition pizzaz.

Here are the six new themes, which are advertised on the Toastmost.org home page / signup page. Website administrators who originally set up shop using an older theme can switch to them using the Themes section of the administrator’s dashboard, under Appearance.

You can play with changing themes and customizing them, without making changes to your own live website, by following this link:

Toastmasters Theme Playground

Themes for 2024

Design patterns for your website

In addition to giving you a starting point for creating a website, each of these sites comes with a set of pre-built design assets known as “patterns” in WordPress jargon. When creating web content from scratch in the WordPress editor, you typically add a series of content “blocks” — paragraphs, headings, and images, as well as layout elements such as columns and spacers. Patterns are collections of blocks that professional designers have arranged into pleasing layouts.

Patterns

Patterns include placeholder images, which you can easily change to reflect the story you want to tell. I’ve replaced the original Twenty Twenty Four placeholder images with ones drawn from the gallery of marketing images Toastmasters International makes available for club and district use. I’ve also changed a lot of the default text, although you may come across some bits that reference the original scenario, an architectural firm’s website. In any case, the point is to take advantage of the fancy layout and replace most if not all of the placeholder content.

Familiar friends

Many of these are variations on designs that have proven popular with clubs over the years, for example this one that includes a large featured “cover image” screened in blue.

Blue Cover

Room for improvement

Have ideas about how to improve on these designs? You can now change the size, spacing, and position of many different elements through the WordPress Site Editor tool, which has become very powerful over the last couple of WordPress releases.

This video demo covers how to make basic changes, like adding links to the menu or rearranging it, as well as ambitious changes.

For demonstration purposes, I’ve changed it to specific image. I could also change lots of other details, such as the default “happy yellow” font color for the site title and navigation links.

Changing the Big Cover theme in the Site Editor

As I mentioned, the other way of controlling a cover image is by having it use the featured image for the post. To change it that way, I would edit the front page (the content, not the template) and add or replace the featured image in the sidebar.

If you don’t feel a need to tinker with the basic layout and design, you will probably use this tool mostly to update the website menu. If you click on the Navigation Block (the page links), you can add or edit the list of links. The social media buttons are controlled by a specialized menu you access the same way. Add your club’s own Facebook page and other social media links. Or remove the block if it’s not needed.

Editing the items contained in the Navigation block

One tricky thing: to see the listing of navigation blocks shown above, you must make sure you have selected the navigation block that “wraps around” the individual page links. If you’ve selected the individual page link, you’ll only be able to edit the properties of that one link.

I recommend using the “List View” button in the upper left hand corner to help you visualize these nested content relationships. In the example shown below, I can see I’ve selected the Custom Link block. The Navigation block is one level up. If I click on the Navigation block, I’ll then be able to add more page links, rearrange them, or add submenus.

List View shows the hierarchy of nested content blocks

Once you get the hang of these tools, they’re very powerful. I created the six new themes (plus a few other failed experiments) by experimenting with the Site Editor and then saving the results in a format I can share with you.

Inspiration for those with design ambitions

My inspiration for this project came in the form of a very cool tutorial videos by Jamie Marsland, showing how he replicated the design of TechCrunch (a popular technology blog) using Site Editor tools. In particular, the Sidebar 2024 theme I’m sharing uses several of the techniques he demonstrates.

Just to be clear, you don’t have to use all the elaborate techniques he demonstrates to benefit from using these themes. I just want you to know that the customization options are there if you ever need them.

Downloadable versions

If you run a Toastmasters WordPress website that’s not on Toastmost, you can download the versions I’m sharing below. Under Add Themes on the administrator’s dashboard, there is an option to upload a ZIP file.

I’m also available to consult on district websites and am using these themes as part of that work (write to david@toastmost.org).

Basic Toastmasters branding tweaks to the highly customizable WordPress Twenty Twenty-Four theme

Toastmost 2024 Download (Preview)

Blue banner on the brand and navigation header.

Blue Banner 2024 Download (Preview)

Maroon banner on the brand and navigation header.

Maroon Banner 2024 Download

Basic Toastmasters branding tweaks on the Twenty Twenty-Three theme.

Twenty Twenty-Three TM Download (Preview)

Twenty Twenty-Three with a blue background and a bold cover image.

Twenty Twenty Three Blue Download

Navigation on the left, rather than the top.

Sidebar 2024 Download (Preview)

Bold cover image shown on the home page by default, wrapped around navigation and branding.

Big Cover 2024 Download (Preview)

Another design with a bold cover image for the front page, screened in blue to increase contrast with navigation menu.

Blue Cover 2024 Download (Preview)

Navigation and branding menu sticks to the top of the page as the viewer scrolls down.

Sticky Header 2024 Download

Sidebar on the right for social media icons, search, and latest blog posts.

Right Sidebar Download

White text on a Toastmasters “Loyal Blue” background.

Loyal Blue 2024 Download

Loyal Blue Border around the margin of the page.

Blue Border 2024 Download


* This software is offered "for Toastmasters" but not is provided by or endorsed by Toastmasters International. The use of Toastmasters brand assets (with proper disclaimers) in website designs has been reviewed by the Toastmasters International brand compliance team.