{"id":2003,"date":"2024-02-23T09:26:12","date_gmt":"2024-02-23T17:26:12","guid":{"rendered":"https:\/\/www.hmc.edu\/communications\/?page_id=2003"},"modified":"2025-11-20T08:33:53","modified_gmt":"2025-11-20T16:33:53","slug":"buttons","status":"publish","type":"page","link":"https:\/\/www.hmc.edu\/communications\/wordpress-how-tos\/buttons\/","title":{"rendered":"WordPress: Buttons"},"content":{"rendered":"\n

The Button is a custom block developed by the Office of Communications and Marketing.<\/p>\n\n\n\n

Purpose<\/h2>\n\n\n\n

The button is ideal to for a call to action or other task you’d like to encourage the users to undertake.<\/p>\n\n\n\n

Availability<\/h2>\n\n\n\n

This block is only available on the Primary Page and Default page templates.<\/p>\n\n\n\n

Elements of the Block<\/h2>\n\n\n\n

The button has the following user-defined elements:<\/p>\n\n\n\n

    \n
  1. visible text<\/li>\n\n\n\n
  2. destination URL\n
      \n
    • option to open a YouTube link in a pop up modal<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • ARIA label
      <\/li>\n<\/ol>\n\n\n\n

      Adding a Button Block<\/h2>\n\n\n\n
        \n
      1. With your cursor in the editor in the desired block position, type\u00a0\/<\/kbd>\u00a0to open the block selector<\/li>\n\n\n\n
      2. Start typing the word \u201cbutton\u201d and after a few characters the chooser will filter the other blocks, leaving the Button as the only option; select it.<\/li>\n<\/ol>\n\n\n\n

        Configuring the Button Block<\/h2>\n\n\n\n

        The Button is configured in the right settings sidebar. It’s important that buttons are configured correctly to ensure accessibility requirements are met.<\/p>\n\n\n\n

        This is especially important if there is more than one button on a page with similar visible text. <\/p>\n\n\n\n

        There are five customizable parts of the button. Refer to the image and the sections below for explanations. To configure a button, ensure that the button itself is selected in the editor and the the settings sidebar is open. <\/p>\n\n\n\n

        \"\"
        Button configuration settings take place in the right settings sidebar<\/figcaption><\/figure>\n\n\n\n

        1. Style<\/h3>\n\n\n\n

        By default, if you add multiple buttons next to each other, they will appear in a stacked layout.<\/p>\n\n\n\n

        \"\"
        Two buttons stacked, as is the default<\/figcaption><\/figure>\n\n\n\n

        If you wish them to in inline, select the In row<\/kbd> styles button. Note: all buttons must have In row<\/kbd> selected for them to appear inline. <\/p>\n\n\n\n

        \"\"
        Buttons configured to be in a row<\/figcaption><\/figure>\n\n\n\n

        2. Button Text<\/h3>\n\n\n\n

        Keep text short and descriptive of the action. e.g.:<\/p>\n\n\n\n

          \n
        • Read more<\/li>\n\n\n\n
        • Learn more<\/li>\n\n\n\n
        • Register<\/li>\n\n\n\n
        • Book<\/li>\n<\/ul>\n\n\n\n

          These examples appear to contradict the requirement that links (which is what these buttons actually are) make sense out of context by uniquely describing what is at the destination. Please make sure you complete the ARIA label field correctly (see below).<\/p>\n\n\n\n

          3. Button Destination<\/h3>\n\n\n\n

          The URL of where the users will be taken if the button is clicked.<\/p>\n\n\n\n

          4. YouTube Popup (optional)<\/h3>\n\n\n\n

          If you enter in the destination field a URL to a YouTube video, another option appears that allows you to set whether the video will open in a popup window. Leave this set to off if wish the link to take the user to the YouTube website. <\/p>\n\n\n\n

          5. Button ARIA Label<\/h3>\n\n\n\n

          As text such as “Read more” or “Book” can be vague, it is important to configure the ARIA label to give further context. <\/p>\n\n\n\n

          Ensure that the ARIA label begins with the button text.<\/p>\n\n\n\n

          Examples<\/h4>\n\n\n\n
            \n
          • A button with visible text of “Read More” may have an ARIA label of “Read more about John Doe”<\/li>\n\n\n\n
          • A button with visible text of “Book” may have an ARIA label of “Book a room at the Claremont Double Tree”<\/li>\n\n\n\n
          • A button with visible text of “Register” may have an ARIA label of “Register for the San Francisco alumni event”<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

            The Button is a custom block developed by the Office of Communications and Marketing. Purpose The button is ideal to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":995,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2003","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/2003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/comments?post=2003"}],"version-history":[{"count":5,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/2003\/revisions"}],"predecessor-version":[{"id":2567,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/2003\/revisions\/2567"}],"up":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/995"}],"wp:attachment":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/media?parent=2003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}