This is an example "Header 1" (H1)

This is an example "Header 2" (H2)

This is an example "Header 3" (H3)

This is an example "Header 4" (H4)

This is an example "Header 5" (H5)
This is an example "Header 6" (H6)

This is an example paragraph. This Kitchen Sink page displays most of what's possible using only the WYSIWYG (What You See Is What You Get) content editors in WordPress on this site.

This is another example paragraph with some additional elements. This is bold text elit, sed do eiusmod tempor incididunt ut inline link labore et dolore magna aliqua. Ut enim ad minim veniam, strikethrough text laboris nisi ut aliquip ex ea commodo consequat. Underlined text reprehenderit in marked text velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <inline code> non proident, sunt in culpa qui officia this is abbr text mollit anim id est laborum. ctrl + , (keyboard instructional text).

Example unordered list:

  • Item 1
  • Item 2 (a longer item here) lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
  • Item 3
    • Nested Item 1
    • Nested Item 2
  • Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
  • Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Example ordered list:

  1. Item 1
  2. Item 2 (a longer item here) lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
  3. Item 3
    1. Nested Item 1
    2. Nested Item 2
  4. Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
  5. Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Example definition list:

Definition Term
Definition description.
Definition Term 2
Definition description 2.
Definition Term 3
Definition description 3.

Example blockquote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Example <hr> (horizontal rule):

Button Shortcodes

These button shortcodes can be copied and pasted into any WYSIWYG editor on the site. Default values shown here:

[btn text="Contact Us" url="/about-apca/contact-us/" target="self" color="primary" size="" ghost="false" rounded="false" block="false" xclass=""]

  • Change text to whatever text you want displayed on the button. Defaults to "Contact Us" if not defined.
  • Change url to wherever you want the button to link to. Defaults to "/about-apca/contact-us/" if not defined.
  • Change target to self or blank. Blank opens the link in a new window. Defaults to self if not defined.
  • color can be primary, secondary, blue, white (not shown below), light or dark. Defaults to primary.
    Primary Color (no color defined) Secondary Color Blue Color Light Dark
  • size can be small, not defined (medium-sized), or large. Defaults to medium (not defined).
    Small Regular (no size defined) Large
  • ghost can be true or false, which generates an outlined button instead of a solid background. Defaults to false.
    Primary Ghost Secondary Ghost Blue Ghost Light Ghost Dark Ghost
  • rounded can be true or false, which gives the button completely rounded corners. Defaults to false.
    Example Rounded Button
  • block can be true or false, which generates a full-width block button. Defaults to false.
    Example Block Button
  • xclass - include any additional CSS classes you wish to add here.

Column Shortcodes

These shortcodes can be copied and pasted into any WYSIWYG editor on the site; the valign attribute is optional; replace the ellipses (...) with your column content:

  • 2 Columns: [columns-two valign="top"] ... [column-split] ... [/columns-two]
  • 3 Columns: [columns-three valign="middle"] ... [column-split] ... [column-split] ... [/columns-three]
  • 4 Coplumns: [columns-four valign="bottom"] ... [column-split] ... [column-split] ... [column-split] ... [/columns-four]

Gray Box Shortcode

The [gray-box] ... [/gray-box] shortcode can be copied and pasted into any WYSIWYG editor on the site to wrap content in a gray box. Simply replace the ellipsis (...) with your content.

Example Gray Box content. Anything can go here!

Events Shortcode

The [events] shortcode can be copied and pasted into any WYSIWYG editor on the site to display a table of events, as defined when editing the Events page.

Tabbed Accordion(s) Shortcode

The [tabbed-accordion different_page=""] shortcode can be copied and pasted into any WYSIWYG editor on the site to display that page's corresponding tabs containing accordions (create/edit tabbed accordion content via the "Tabbed Accordion" box when editing the page).

  • If you wish for an accordion to appear without tabs, simply create one tab and leave its title field blank.
  • If you wish to use tabbed accordion content from another page, define the other page's post ID in the different_page attribute. Defaults to empty to load the current page's content.

Bootstrap 4 Helper Classes

Check out and learn the Bootstrap 4 margin and padding utility CSS classes, which you can use on any element via the "Text" tab of WYSIWYG editors to add or remove margin and padding, as such:

<h2 class="pt-0 mb-3">This header element will not have any top padding, but it will have 1rem of margin on the bottom</h2>

See also Bootstrap's .table, .table-bordered and .thead-dark table classes.

All the other Bootstrap 4 utility classes are available as well.