More advanced agenda customization

Out of the box, the printable meeting agenda feature provided by RSVPMaker for Toastmasters is perfectly functional, and a number of built-in options exist for making limited customization (TM Administration > Settings > Agenda Formatting).

But if — as with my tabletop RPG-based club, Dungeons & Toast — your club desires greater control over the agenda appearance, you can use the

toastmasters_agendapath

Note: This guest post by Loni Huff is for more technical club webmasters, as in those comfortable with writing custom code. Loni is one of the people who continually pushes me to make the core WordPress for Toastmasters software better and more flexible. She was able to make these customizations partly because she hosts her club website independently, using the open source software version. If your club website is hosted on Toastmost, reach out to me at david@wp4toastmasters.com if you would like to add the kind of custom code she describes.

filter to point to a fully-customizable agenda file. Here is the procedure:

  1. To consolidate all your RSVPMaker customizations in one place, create a new plugin, rsvpmaker-for-toastmasters-addons:
    1. Create a directory in your wp-plugins directory entitled rsvpmaker-for-toastmasters-addons.
    2. Within this new directory, create a file entitled rsvpmaker-for-toastmasters-addons.php. Within this file, add the following:
<?php
/**
 * Plugin Name: RSVP for Toastmasters Addons
 * Plugin URI: Your URL
 * Description: Addons created for RSVP for Toastmasters by David Carr
 * Version: 1.0
 * Author: Your Name
 * Author URI: Your URL
 */
?>
  1. Navigate to the rsvpmaker-for-toastmasters plugin directory and download a copy of agenda-custom.php. Rename this file my_custom_agenda.php and upload it to your newly-created rsvpmaker-for-toastmasters-addons plugin directory.
  2. Open the rsvpmaker-for-toastmasters-addons.php file and add the following to the bottom of the file, before the closing ?> tag:
// BEGIN override the custom agenda file

function my_custom_agenda($agendapath) {
    return WP_PLUGIN_DIR . '/rsvpmaker-for-toastmasters-addons/my-custom-agenda.php';
}

add_filter('toastmasters_agendapath','my_custom_agenda');

// END override the custom agenda file
  1. Open your my-custom-agenda.php file. Add any links to needed JavaScript (ex. jQuery, Bootstrap) just above the line that reads <style> within the <head> of the HTML document.
  2. Add any links to needed style definitions (ex. Bootstrap) just below the line that reads </style>.
  3. Use the custom style definitions you have included to lay out the page as you prefer. Be careful to include the call to the
    tm_agenda_content()
    function:
<?php echo tm_agenda_content(); ?>

Using Bootstrap 4 and some custom styling, the weekly agenda for Dungeons & Toast looks like this:

Customize User Name Display

For privacy reasons, we choose to display the first name and first initial of the last name for our members, rather than defaulting to display name. Luckily, there is a filter you can use to change the way users’ names are displayed on your agenda. To do so, add the following code to your rsvpmaker-for-toastmasters-addons.php file:

// BEGIN override name display

function get_member_name_jr($name, $user_id, $user) {
    $output = $user->first_name . ' ' . substr($user->last_name, 0, 1) . '.';
    if ( !empty( $user->education_awards )) {
        $output .= ", " . $user->education_awards;
    }
    return $output;
}
    
add_filter('get_member_name','get_member_name_jr',10,3);

// END override name display

How to Display Stoplight Colors on Your Agenda and Other Agenda Styling Options

The latest release of the WordPress for Toastmasters software includes an option to show green / yellow / red “stoplight” timing guidelines on the agenda. This was a request I received some time ago from a club that had been doing something like this with a Microsoft Word template. It took me a while to figure out how to pull it off.

The stoplight option is available to anyone who wants to turn it on. When logged in as administrator, go to Settings -> Toastmasters and you will see a place to turn stoplight display on or off. See also Manually Adding Stoplight Display with a Shortcode.

The other improvements are more targeted to club webmasters with knowledge of CSS stylesheet language, making it easier to change the fonts and alignment of elements within the agenda design.

Here is an example of stoplight colors on the agenda:

Stoplight colors on the agenda

Continue reading “How to Display Stoplight Colors on Your Agenda and Other Agenda Styling Options”

Adding a Customizable Agenda Layout

Club leaders who want a different look for their meeting agenda than provided by my suggested design can now take matters into their own hands, particularly if they know (or are willing to learn) HTML and CSS coding.

Until recently, there were two agenda layout options, “plain” and “sidebar”, with sidebar as the one I have been promoting by default. The agenda layout with sidebar gives you a sidebar on the left hand side of the page to use for information like the club mission, notes on upcoming district events, and a listing of club officers.

Now, there is a 3rd option, “custom,” on the Toastmasters settings screen in WordPress. When you select “custom,” a new document named “Agenda Layout” will be added to the listing under RSVP Events. You will also see a link on the Toastmasters settings screen labeled “Edit Custom Agenda Layout.”

When you edit this document, you will have access to the basic HTML structure of the agenda, with placeholders showing for the data that gets pulled from the database. Beneath the content editing box, you will also see a place where you can alter the CSS (Cascading Style Sheets) code used to style and format the content. You will be starting with essentially the same layout as “sidebar” but can alter it however you would like.

Here is an example of a layout with a different header image:

customizable-agenda-result
Custom header image for agenda

and here is what the Agenda Layout document looks like in the WordPress editor:

customizable-agenda-editor
Customized agenda layout in the editor

If you toggle the Text tab of the editor to see the underlying code, you will find I used a simple table layout to separate the sidebar content from the main agenda content (roles and who is filling them).

The bracketed codes are placeholders known as shortcodes in WordPress jargon. These pull in the database-generated content that will be used to fill in the details for a specific meeting agenda.

[tmlayout_club_name] – pulls in the club name, using the website title. You could delete this and just type in the name, since you’re customizing this specifically for your club.

[tmlayout_meeting_date] – displays the meeting date.

[tmlayout_sidebar] – displays the sidebar content

[tmlayout_main] – displays the main agenda content of roles and assignments

You can make some basic changes to the structure and organization of the agenda by for example changing the table layout or by replacing the table cells with divs and aligning those divs with CSS. It helps to have some knowledge of CSS, but you may be able to puzzle out some details by sight.

For example, this block of code —


body, p, div, td, th {
font-size: 12px;
line-height: 1.3;
font-family:"Times New Roman", Times, serif;
}

— defines the base font size for most of the text on the agenda. By changing 12px to 14px or 18px, you could make the font larger.

Or to change just the paragraphs within the table cell for the agenda listing, which has an id of “agenda”, you could do this:


#agenda p {
font-size: 16px;
}

When I first experimented with changing the page banner, it didn’t come out right because I added the image into a div with an id=”banner” that had a fixed height, and the new image was larger. I solved that issue by eliminating the div tag.

At least one person who contacted me specifically wanted to change the banner at the top of the agenda, so I hope this capability will be useful.

Whatever changes you decide to make, be prepared to experiment before you get it right. Good luck. If you come up with a design you are proud of, let me know — maybe your work can be the source for a new, improved default agenda layout for others.

If you do change the HTML structure, keep in mind that some HTML coding works better in the context of the feature that allows you to download the agenda to Microsoft Word. That is one of the reasons I used table formatting to separate the sidebar from the rest of the agenda, as opposed to divs with CSS positioning.

Note: For those hosting their own websites, both RSVPMaker and RSVPMaker for Toastmasters must be upgraded for this feature to become available.