• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Adding aria-label to WordPress standard search form via Genesis

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding aria-label to WordPress standard search form via Genesis

This topic is: resolved

Tagged: accessibility, aria-label, label

  • This topic has 1 reply, 2 voices, and was last updated 4 years, 11 months ago by AnitaC.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 10, 2020 at 6:37 am #499220
    ilkweb
    Participant

    Hi there,
    I'm using Genesis and the default WordPress search forms. I need to add an aria-label.

    Does anyone know the simple solution to this?

    I have in front of me the searchform.php file which I think I'll need to copy/paste from the genesis folder to the child theme folder with some modifications.

    Here's the code from that file.

    <?php
    /**
     * Genesis Framework.
     *
     * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
     * Please do all modifications in the form of a child theme.
     *
     * @package StudioPress\Genesis
     * @author  StudioPress
     * @license GPL-2.0-or-later
     * @link    https://my.studiopress.com/themes/genesis/
     */
    
    // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- These aren't global variables
    
    /** This filter is documented in wp-includes/general-template.php */
    $search_query = apply_filters( 'the_search_query', get_search_query() ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- Duplicated WordPress filter
    
    /**
     * Search form text.
     *
     * A bit of text that describes the search form or provides instruction for use.
     * It might be used as the input placeholder, or the form label (if a11y is on, and no label is provided).
     *
     * @since 1.0.0
     *
     * @param string The search text.
     */
    $search_text = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) );
    
    /**
     * Search form label.
     *
     * @since ???
     *
     * @param string The search form label.
     */
    $search_label = apply_filters( 'genesis_search_form_label', '' );
    
    /**
     * Search button text.
     *
     * The text used on the search form submit button.
     *
     * @since ???
     *
     * @param string The search button text.
     */
    $search_button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );
    
    $strings = [
    	'label'        => $search_label,
    	'placeholder'  => empty( $search_query ) ? $search_text : '',
    	'input_value'  => $search_query,
    	'submit_value' => $search_button_text,
    ];
    
    if ( empty( $search_label ) && genesis_a11y( 'search-form' ) ) {
    	$strings['label'] = $search_text;
    }
    
    $form = new Genesis_Search_Form( $strings );
    
    // Used for filter param 2.
    $search_query_or_text = $search_query ?: $search_text;
    
    /**
     * Allow the form output to be filtered.
     *
     * @since 1.0.0
     *
     * @param string The form markup.
     * @param string <code>$search_query</code>, if one exists. Otherwise <code>$search_text</code>.
     * @param string Submit button value.
     * @param string Form label value.
     */
    $searchform = apply_filters( 'genesis_search_form', $form->get_form(), $search_query_or_text, $strings['submit_value'], $strings['label'] );
    
    echo $searchform; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Need this to output raw html.
    // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
    

    Someone on the Genesis Slack group suggested using the genesis_search_form filter.

    There are many elements on a WordPress installation that don't have labels (like font icons behaving as images) but which can be marked up using <span> HTML to apply those labels.

    The search form is a little different in this case, unless anyone can recommend a third party WordPress plugin where a <label> (and not just a placeholder which I don't think is machine-readable for assistive technology) is readily editable from the dashboard.

    June 11, 2020 at 8:14 am #499243
    AnitaC
    Keymaster

    Closing since you are receiving help in Genesis Slack.


    Need help with customization or troubleshooting? Reach out to me.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Adding aria-label to WordPress standard search form via Genesis’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble