Code snippets

Below are examples of code you can use in WordPress posts. HTML can be inserted using a Custom HTML block. CSS classes can be added via a Block’s Advanced drop-down when they apply to a whole block, or inserted into an HTML tag when they do not. If you’re looking for something that is not listed here, check the components section of this site.

  • Hidden question & answer
  • Hidden keywords
  • Titles in links

Hidden question & answer

You can create a question & answer that appears as a quick answer in site search, but does not appear on the page. Use this sparingly, as most questions & answers would benefit people if they are seen on pages.

<div style="display:none;" class="js-qa js-qa-question">Where can I find the list of essential critical infrastructure sectors?</div>

<div style="display:none;" class="js-qa js-qa-answer">Visit <a href="https://covid19.ca.gov/essential-workforce/">Essential workforce</a> to learn about what workers and sectors are included. </div>

Hidden keywords

Add hidden keywords when you’d like a page or quick answer to appear in searches for a keyword, but cannot work that keyword into the visible text. The keyword below is hidden in the answer part of a quick answer.

<div style="display:none;" class="wp-accordion-content"><!-- county map --></div>

If you use the same hyperlink text with different URLs on a page, this will trigger an accessibility flag in SiteImprove. Try to reword the text to reflect the different URLs. If you cannot, use a title with the link. This signals to screen readers that the link is different.

To add a title, make a link like usual. When finished, view that section in Code editor and add the code beginning title, as shown below.

<a href="https://covid19.ca.gov" title="[the text you’d like the screen reader to read instead of the hyperlink text on the screen]">[hyperlink text]</a>
Created and maintained by Office of Digital Innovation