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:
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 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.
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.
In the example shown below, I’m editing the front page template — not the actual content of the page but the header, footer, and navigation elements that wrap around it. By default, the Big Cover 2024 theme uses the featured image set in the regular page content editor as the image to be shown at the top of the page.
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.
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.
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.
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).
Maroon Banner 2024 Download
Twenty Twenty Three Blue Download
Sticky Header 2024 Download
