Style Guide


To produce the heading, you type a paragraph <p> tag with a class=”head.” Here’s an example.

<p class="head">Heading</p>


To create a sub-heading, you use a paragraph <p> tag with a class of “subhead.” Here’s an example.

<p class="subhead">Sub-Heading</p>

Italicized text for emphasis.

<p><em>Italicized text for emphasis</em></p>

Images with captions

We put images inside a pair of paragraph </p> tags with a class of “caption” when we want to display text beneath them.

<p class="caption"><img src="" alt="description"></img></p>

Ordered Lists

  1. item first
  2. item second
  3. item third

<li>item first</li>
<li>item second</li>
<li>item third</li>

Unordered (bulleted) Lists

  • item first
  • item second
  • item third

<li>item first</li>
<li>item second</li>
<li>item third</li>

Shortcodes – making columns

[two_third last=”no”]

Here’s the left column. I have set it to take up two thirds of the page. This division of the page into an initial two-third column and a second sidebar type column taking up one third of the page is typical of the site.

[one_third last=”yes”]

And this second column is set to take up the remaining one-third of the page. Notice that in WordPress, we set up new pages as ‘full-page width’ and then use these shortcodes to make our own columns in the editor.

Shortcodes – Events Listings

To create a list of events on the Activities page, we use a shortcode to create a list of events grouped by month.

[events_list_grouped mode=”monthly” scope=”future”]


Shortcodes – Events for a Particular Chapter

To create a list of events for a particular Chapter, you assign the event an Event Category and then use a shortcode to show all events in a particular category. Here is the list of events for the SF Bay Chapter.

[events_list scope=”future” category=”90″]


Comments are closed.