WordPress for Toastmasters*Five new design choices are now available to users of the Toastmost.org website hosting service associated with the WordPress for Toastmasters project. See also: video demo of how to change your website theme.
Like Lectern, which remains the default on Toastmost, these themes have been reviewed by Toastmasters International for conformance with the official brand guidelines and inclusion of the required disclaimers and intellectual property credits.
Lectern may still be the simplest choice for a club webmaster who doesn’t want to have to futz too much with the design. It’s the only one available in the WordPress.org theme repository. On the other hand, some ambitious webmasters have asked for more design freedom, and these new choices should help. You get more freedom to customize, but please note that you are responsible for making sure your customizations respect the Toastmasters International branding rules (more on that below).
In WordPress, your choice of a theme — a set of templates for your home page, blog posts, and other content — is a basic choice that determines how your website will look. These new choices are “child themes” or variations on popular themes, including the reference designs the developers behind WordPress featured for 2016, 2017, and 2019, and 2020.
Twenty Nineteen TM
Demo site: 2019.toastmost.org
Choose this one for the greatest degree of design freedom. If you designate an image as the featured image for a post or page, it will be displayed with a blue filter as shown above (the original photo of the microphone is more pinkish). This works well with the Toastmasters blue color scheme.
Note that when you first activate this theme, the design will start out relatively plain. It’s only as you add elements like featured images and cover blocks or start playing with options in the Customizer tool (explained below), that you’ll begin to jazz it up.
The next three themes on the list are different in that they display a header image on every page rather than allowing you to set it per page or per post.
Twenty Twenty TM
Demo site: 2020.toastmost.org
The Twenty Twenty TM theme can also present a featured image as a screened background to the page header — although one difference from Twenty Nineteen is that the effect is optional. Pages and posts can be displayed using one of three templates: Default, Cover (shown above) and Full Width. I explain how to change the template for a document below.
Here is a page displayed in the Default template, with no cover effect.
If you specify a featured image without the Cover template, the image gets displayed at the top of the page, below the headline, making it not quite as dominant.
In addition to adding the Toastmasters logo, my customizations to this one included tweaking the color palette to match the one specified in the Toastmasters International brand manual.
Bonus: If you don’t like the True Maroon as the dominant color, you can switch it to emphasize Loyal Blue (the blue of the Toastmasters logo) instead. On the administrator’s dashboard, look for the Switch Theme Colors menu option under Appearance.
Note: Cover Image Versus Header Image
The themes documented below use a header image that appears throughout the website, which is a different approach from the cover image used by Twenty Nineteen and Twenty Twenty, which can be different from page to page. Both will allow you to put a big, dramatic image on your home page, but you will use different techniques to do so. Lots of choices, so just weigh the tradeoffs.
Twenty Seventeen TM
Demo site: 2017.toastmost.org
Twenty Seventeen TM is great theme if you want a big, bold image on the home page. A skinnier representation of the same image will be included on the inside pages of your website. You may have to experiment to find an image that looks good both ways.
The blue curtains image is included by default but is easy to change.
Twenty Sixteen TM
Demo site: 2016.toastmost.org
Wuqi TM
Demo site: wuqi.toastmost.org
The child themes for Twenty Sixteen and Wuqi both feature a sidebar element, which appears by default on all pages (not true of Twenty Seventeen TM or Twenty Nineteen TM) and a header image that is included on all pages. Formatting of the main content area and the menus is a little different. Pick the one that’s the closest match to how you want to style your website.
Staying Compliant with Toastmasters Brand Guidelines
Speaking as someone who has spent time in the Toastmasters brand guidelines penalty box — and even received a cease and desist letter at one point — my goal is to help you avoid issues with the Brand Police. These themes give you a good starting point, but if you take advantage of the customization options available with these themes, give careful consideration to color choices (see below) and image choices.
See the Toastmasters Brand Manual for guidance.
For example, I initially showed sample the brand folks designs they objected to for using nature scenes as featured images (as opposed to images that represent speaking and leadership) and for using a pinkish background color (the default for the Twenty Twenty theme) deemed too far outside the brand palette. They are particularly sensitive to colors and images displayed near the logo. One big no-no is displaying someone else’s logo adjacent to the Toastmasters logo.
The Color Palette for Toastmasters (Hex Codes)
True Maroon
#772432
Loyal Blue
#004165
Cool Gray
#A9B2B1
Happy Yellow
#F2DF74
New Login/Dashboard Menu Item
The Lectern-based design for Toastmost websites features a series of links at the top of the sidebar for common tasks like logging in and signing up for a role at the next meeting. But for reasons related to design flexibility and mobile web support, some newer themes like Twenty Nineteen don’t include a sidebar.
As an alternative, you can include a login item on the menu at the top of the screen that provides access to the same functions. This is activated by default on new Toastmost websites. Otherwise, you can add a menu item with #tmlogin in the URL field. This will be automatically replaced by a menu that includes links to your upcoming meetings.
This menu item is added automatically on Toastmost.org for new websites or websites that change their theme. When this feature is active, the Member Access widget will not automatically appear in your website sidebar (allowing you to emphasize other items, such as recent blog posts).
Change and Customize Your Theme
To change your theme, click the link that says Customize on the black bar that appears across the top of your website when you are logged in as a site administrator.
Each theme includes a set of options you can change through the Customize tool such as the background color of your website. At the top of the Customize menu is an option to change themes, which will display all the themes available for your use.
Click the Live Preview button for any of these themes, which will display a preview of what your website would look like using that theme.
You can make changes, for example by changing the cover image. The list of things you can customize varies from theme to theme. The preview will update as you make your choices.
If you like what you see, click the Activate & Publish button to make the new theme active on your website. (Or exit the Customize tool without saving your work if you would rather stick with your current design).
Note that some design choices, like the use of a featured image on a specific page (as shown in my Twenty Nineteen TM screenshot) are things you would do in the WordPress editor rather than the Customize tool.
Setting a Featured Image
Many themes allow you to set a featured image that will appear at the top of a given page or post, but the way the image is displayed varies between themes. Twenty Nineteen, Twenty Twenty (and my variants) make particularly dramatic use of the featured image, displaying it behind a colored screen.
Featured Image is one of the options you can set through the right hand sidebar of the WordPress editor. The sidebar presents properties you can set for individual blocks as well as the entire document.
If you don’t see the sidebar, click the gear icon at the top right of the page and then Document (rather than Block).
Changing the Template
Some themes allow you to change the template that pages or posts are displayed within. Support varies, so for example some themes allow you to do this for pages, but not for blog posts.
Twenty Twenty and my child theme variant allow you to choose between a Cover template (screened background image for the header), a Full Width Template, and the Default Template.
Like the Featured Image setting, you will find this in the sidebar displayed on the right of the editor. In Twenty Twenty, it’s under the Page Attributes tab.
If you don’t see the sidebar, click the gear icon at the top right of the page and then Document (rather than Block).
Content Blocks to Experiment With
In the WordPress editor, different kinds of content — paragraphs, headings, images and so on — are referred to as “blocks,” and each block has different editor controls appropriate for that type of content.
Some you might find useful for customizing your design are the Cover Block (shown below) and the Media & Text block for showing an image or video side-by-side with text (which I used for the Toastmasters color palette section above). For details on using other common layout blocks, such as columns, see the blocks documentation.
This is a cover block
The image I specify appears in the background of my text content. I can also specify that the image should be screened with a color (much like the featured image in the Twenty Nineteen example) for greater contrast.
Note that I can set it to stretch beyond the margins that govern my other content.
A cover block can be an alternate way of placing a large, dramatic image at the top of your home page or another featured page — perhaps with a call-to-action button prompting website visitors to contact you.
For the best design, resist the urge to use too many of these features — just like using too many colors or too many fonts, you can easily overwhelm website visitors rather than impressing them. But experiment, and show me what you come up with. You can always reach me at david@wp4toastmasters.com.
.
Using The Toastmasters-Branded Child Themes on a Self-Hosted Website
If you would like to use these themes on a website not hosted at Toastmost.org, you can download them below as ZIP files. The Add New option under Themes in the WordPress administrator’s dashboard allows you to upload a theme packaged as a ZIP file. In each case, you will also have to install the base theme — for example, Twenty Seventeen TM will not work if you do not have the Twenty Seventeen theme installed. The advantage is you will get the benefits of any enhancements or bug fixes the Twenty Seventeen developers release.
If you are a developer, you are free to modify these for your own use. If you improve them in some way that would be useful to others, let me know. Write to me at david@wp4toastmasters.com.
- Club Directory Plugin Available for Use on District Websites - November 26, 2023
- New Member Signups and Suggestions Tool - November 5, 2023
- Replay: Webinar #2 at District 62 Toastmasters - October 25, 2023
