As of Oxygen 2.0, the HTML output by Search Form, Comments List and Comment Form elements (under WordPress) are not in HTML5 standard.

We can make these HTML5-ready by declaring theme support for them by simply adding the following code:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

A few improvements in the markup include the application of classes instead of IDs so multiple elements (like Search boxes) can be used and the addition of other useful features like placeholder text in the search form.

This can be done in a few different ways like using the Code Snippets plugin (set the snippet to run only on site front-end) or in a custom functionality plugin.

Note: Doing this may add screen reader text for accessibility reasons. This text can be hidden for normal users by adding this CSS (taken from Genesis):

/* Screen Readers */

.screen-reader-text {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: #fff;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    clip: auto !important;
    color: #333;
    display: block;
    font-size: 1em;
    font-weight: bold;
    height: auto;
    padding: 15px 23px 14px;
    text-decoration: none;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

Custom sitewide CSS like this can be added in Customizer > Additional CSS or in Oxygen editor’s Manage Stylesheets.

Source: https://developer.wordpress.org/reference/functions/add_theme_support/#html5

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Thanks for your work. This is a great site. One question: You wrote, “We can make these HTML5-ready by declaring theme support for them by simply adding the following code:…” Adding it where?

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: