Visit as a Guest
The Twenty Twenty-Two TM theme is a variation on the reference theme for 2022 released by the creators of WordPress. It was created specifically to showcase a new capability called Full Site Editing. Full Site Editing means you can edit the templates and parts of templates (like headers and footers) that make up the theme using the same basic techniques that you use to edit web pages, blog posts, and event posts.
Note that the template editing capabilities are very new and still officially in beta, so some features of the Full Site Editor will probably change and hopefully improve in the coming weeks and months. But this is an opportunity for design-minded Toastmost users to gain increased control and flexibility.
Those who already have some experience working with WordPress themes will notice that the Customize menu option no longer appears at the top of the screen when you’re logged in as a site administrator. Instead, you will see a new Edit Site option. One of the basic chores that changes as a result is editing the navigation menu. I’ll cover that before getting into the other details.
How to Edit the Menu
Because editing the menu is such a basic chore, I’ve added a submenu under Edit Site that has that as the first option. Follow that link to open the header used throughout the site in the editor.
What you see above is the header that occurs throughout the site. In WordPress lingo, this header is a “template part” that’s included in multiple templates.
If you wanted to add content that should appear on every page of your website — for example, an alert about changing your standard meeting place — you could add an additional content block (a paragraph, headline, or image) to this header.
There are more elaborate versions of the header, with a different background color and embedded images (like the waveform one on the home page), but those variations “wrap around” the basic elements shown here — the site title and a menu.
The custom Dashboard menu in the upper right hand corner provides easy access for members to log in, change their password, sign up for upcoming meetings, and perform other common tasks. If you click on it and make sure the editor sidebar is displayed (click on the gear icon if you don’t see it), you’ll be presented with a couple of options for that Toastmasters widget.
The main menu shows Home, Blog, Calendar, and Members as the default pages of the site. Click there to make changes. You can change the text of any link or the web address that it points to.
To remove a menu item, click on the three dots at the end of the toolbar, where Remove Custom Link is one of the options.
To add a menu item, you first need to click on the compass icon to select the entire menu rather than an individual menu item. A little + button will then be displayed at the end of the menu.
When you click to add a menu item, a placeholder appears (“Add link”) and you can either search for a page or add a specific url (web address). Note that recently added pages and blog post are displayed by default, making it convenient for you to select any of them.
If a page isn’t displayed by default, you can enter a few word from the title to search for it, then click on that choice. It will be added to the menu with the title of that document as the default link label.
You can edit the text of a link, once added. Here I’ve added words to the label, but more commonly you would shorten a long title (“Meet our Members” becomes just “Members”) to make it fit better on the page.
To make links to more content fit in a compact space, you may also want to create submenus. You do that by selecting a submenu item and clicking the submenu button on the toolbar.
Choosing a Page Template
Default templates have been defined for basic pages, the front page, and the blog listing page, but you can edit those default choices. In the editor for any page or post, look for Template in the sidebar. In this example, Large Header Toastmasters is the template used on the home page with the colored waveform as a header image (read on for how to change that image).
Other pages of the website appear initially in the less colorful default template.
Here’s an example of the default template for a blog post, in this case with a featured image specified in the editor (appears under the headline, before the text).
Here is the same post in the template “Header with Blue Background an Featured Image” (featured image is now in the header).
Editing Templates, Template Parts, and the Home Page Image
The site editor allows you to edit the theme templates, which specify the header and footer to be used for each page, plus the layout of individual pages and posts. For example, if the default is to display the post’s featured image below the headline, you could move it to above the headline.
The image below shows the Front Page template, which includes the Header Toastmasters template part (the blue area at top) wrapped around the standard Header template part. The standard Footer template part is included at the bottom. The Front Page template itself specifies the placement of the headline and page body content.
One key variation in the themes is which style of header should be displayed. Headers and footers are classified as “template parts.” The front page template uses the one designated as “Header Toastmasters” on the list below. “Header Microphone” is used on the blog listing page, and “Header, Blue with Featured Image” is used in the alternate blog post template illustrated above.
To change the header image used on the home page, open “Header Toastmasters” in the editor.
When you click on the default colored waveform image, several image editing options are shown on the toolbar including “Replace.” Click “Replace” to add a different image in that spot — preferably a wide/thin one of about the same dimensions.
Design Patterns
Like other recent WordPress themes, the Twenty Twenty-Two theme (upon which the TM variation is built) includes not only content blocks but custom arrangements of blocks known as patterns. These include placeholder images you can replace with your own. Click the + button at the upper left corner of the editor screen, and you will see options for Patterns you can insert displayed on a separate tab next to the one for individual blocks.
The designer of Twenty Twenty-One used a bird watching theme for the default images, so if I insert the pattern shown above using only the defaults, I get this.
If I change the images, I can use the same basic layout for this.
But Wait, There’s More
There’s plenty more to learn, but hopefully this will get you started if you pick the Twenty Twenty-Two TM theme.
Have ideas about how it could be improved? Write to david@wp4toastmasters.com