WordPress.org

Support

Support » Themes and Templates » How to add checkbox to search form using functions.php in a child theme

How to add checkbox to search form using functions.php in a child theme

  • I’ve searched as best I can on the wordpress support and the internet. What I’m trying to do is add the following coding to the search form (just before the submit button) in a child theme via the functions.php file.

    <br />
    <span id="exact-phrase" title="toggle for exact phrase"><input type="checkbox" name="phrase" id="phrase" /><label for="phrase" >exact&nbsp;phrase</label></span>

    I only have access to the functions.php file in the theme folder and cannot add a customized search.php

    I thought I might have found the answer here but my grasp of PHP is not quite strong enough to comprehend it:
    http://wordpress.org/support/topic/clearing-search-form-after-submit

    This is as close as I’ve managed so far but I’m afraid that it’s so far from being correct that I’m reluctant to test it. Ideas?

    function genesis_search_form() {
    	$search_text = get_search_query() ? esc_attr( apply_filters( 'the_search_query', get_search_query() ) ) : apply_filters( 'genesis_search_text', esc_attr__( 'Search this website', 'genesis' ) . '…' );
    
    	$button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );
    
    	$onfocus = " onfocus=\"if (this.value == '$search_text') {this.value = '';}\"";
    	$onblur  = " onblur=\"if (this.value == '') {this.value = '$search_text';}\"";
    
    	//* Don't apply JS events to user input
    	if ( is_search() )
    		$onfocus = $onblur = '';
    
    	/** Empty label, by default. Filterable. */
    	$label = apply_filters( 'genesis_search_form_label', '' );
    
    	$form = '
    		<form method="get" class="searchform search-form" action="' . home_url() . '/" >
    			' . $label . '
    			<input type="text" value="' . esc_attr( $search_text ) . '" name="s" class="s search-input"' . $onfocus . $onblur . ' /><br />
    <span id="exact-phrase" title="toggle for exact phrase"><input type="checkbox" name="phrase" id="phrase" /><label for="phrase" >exact&nbsp;phrase</label></span>
    			<input type="submit" class="searchsubmit search-submit" value="' . esc_attr( $button_text ) . '" />
    		</form>
    	';
    
    	return apply_filters( 'genesis_search_form', $form, $search_text, $button_text, $label );
    
    }

    Many thanks for your time.

    -E Morris

Viewing 11 replies - 1 through 11 (of 11 total)
  • It’s about correct. Are you using Genesis as a parent theme?

    Yes, Genesis is the parent theme.

    The new version of this function is in \wp-content\themes\genesis\lib\structure

    Copy that, rename the function and then call it with this
    add_filter( ‘get_search_form’, ‘your_search_form_function_name’ );

    should work.

    Unfortunately, I have still been unable to test the above coding (I have full access to the WP as an admin but do not have full access to the files on the site so cannot see the lib folder to look at the function in \wp-content\themes\genesis\lib\structure

    However, I thought I would try to apply this with a different theme on my own test WordPress. I have Asteroid Child installed. The search form is on the parent Asteroid theme header.php

    Confirming that a little knowledge truly is a dangerous thing and not really knowing what I’m doing, after a lot of trial and error (errors galore), I have the following coding that doesn’t work but at least has stopped throwing any errors:

    function my_search_form() {
    $searchhome="echo home_url('/');";
    $searchonfocus="if (this.value == 'Search') {this.value = '';}";
    $searchonblur="if (this.value == '') {this.value = 'Search';}";
    
    if ( asteroid_option('ast_menu_search') == 1 ) {
    	$form = '<div id="nav-search">
    		<form id="nav-searchform" role="search" method="get" action="$searchhome">
    	<input id="nav-s" type="text" value="Search" onfocus="$searchonfocus" onblur="$searchonblur" name="s" />
    <span id="exact-phrase" title="toggle for exact phrase"><input type="checkbox" name="phrase" id="phrase" /><label for="phrase" >exact&nbsp;phrase</label></span>
    	<input id="nav-searchsubmit" type="submit" value="" />
    		</form>
    </div>
    	';
    }
    	return apply_filters( 'my_search_form', $form, $searchhome,
    $searchonfocus, $searchonblur );
    
    add_filter( 'ast_menu_search', 'my_search_form' );
    
    }

    I didn’t have
    add_filter( 'ast_menu_search', 'my_search_form' );
    initially and hoped that adding it, by a miracle, the functions.php coding would suddenly work. Alas no. (Big surprise.) The exact phrase checkbox refuses to show.

    This is the coding for the search form that appears on the parent Asteroid in header.php:

    <!-- Searchform -->
    		<?php if ( asteroid_option('ast_menu_search') == 1 ) : ?>
    			<div id="nav-search">
    				<form id="nav-searchform" role="search" method="get" action="<?php echo home_url( '/' ); ?>">
    					<input id="nav-s" type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" />
    					<input id="nav-searchsubmit" type="submit" value="" />
    				</form>
    			</div>

    Do I have to make a mention of the header.php in the child functions? If so, how would I do that?

    Many thanks for any help.

    E Morris (WP 3.7.1)

    esmi

    @esmi

    Forum Moderator

    Looks like you will need to add a custom header.php template file to your child theme that includes a modified search form.

    llizard

    @llizard

    Rats! I was hoping not to have to create a custom header.php. Can it not be done with functions.php? Or might it be possible to do it with a customized plugin?

    This way if the parent header.php is updated then the child header will be updated too.

    llizard

    @llizard

    Excuse me for replying to myself.

    Following http://codex.wordpress.org/Function_Reference/get_search_form I realized that even though I cannot manage to change the search box in the header, I CAN use the theme’s functions.php to add the search form to the sidebar of Asteroid Child. The following coding works:

    function my_search_form( $form ) {
        $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
        <div><span id="exact-phrase" title="toggle for exact phrase"><input type="checkbox" name="phrase" id="phrase" /><label for="phrase">toggle for exact phrase</label></span><br />
    <label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
        <input type="text" value="' . get_search_query() . '" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
        </div>
        </form>';
        return $form;
    }
    add_filter( 'get_search_form', 'my_search_form' );

    But I would like to add a dropdown list to allow restricted searches of specific categories. I got this far but this adds two dropdown menus: one above the search form and the other inside the search form. What am I doing wrong?

    function my_search_form( $form ) {
    
    $dropdownmenu = wp_dropdown_categories(array('show_option_all' => 'all categories', 'exclude' => '3'));
    // where category 3 is the administration category
        $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
        <div><span id="exact-phrase" title="toggle for exact phrase"><input type="checkbox" name="phrase" id="phrase" /><label for="phrase">toggle&nbsp;for&nbsp;exact&nbsp;phrase</label></span>'.$dropdownmenu.'<br /><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
    
        <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    
        <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
        </div>
        </form>';
        return $form;
    }
    add_filter( 'get_search_form', 'my_search_form' );

    Many thanks for any help you can offer.

    esmi

    @esmi

    Forum Moderator

    If you are using this theme: http://wordpress.org/themes/asteroid then you should try posting in http://wordpress.org/support/theme/asteroid

    llizard

    @llizard

    It is a child theme, and as far as I can tell, it is not available on WP. http://ronangelo.com/child-theme-for-asteroid/

    Aside from that, I’m thinking that the answers here may apply to other themes as well.

    ronangelo

    @ronangelo

    @llizard
    Are you trying to replace the searchbox on the menu?
    Just disable that searchbox on the options then add this on your functions.php

    function my_custom_search() {
    ?>
    
       // Add your custom searchbox here
    
    <?php
    }
    add_action( 'ast_hook_after_nav', 'my_custom_search' );

    I realized that even though I cannot manage to change the search box in the header…

    If you want to add your custom searchbox on the header then just add your code on a text widget then place that on the header widget area.

    llizard

    @llizard

    Many many thanks, ronangelo! That works beautifully.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to add checkbox to search form using functions.php in a child theme’ is closed to new replies.
Skip to toolbar