WordPress.org

Ready to get started?Download WordPress

Forums

How to add checkbox to search form using functions.php in a child theme (12 posts)

  1. llizard
    Member
    Posted 10 months ago #

    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

  2. lee@digitalacorn
    Member
    Posted 10 months ago #

    It's about correct. Are you using Genesis as a parent theme?

  3. llizard
    Member
    Posted 10 months ago #

    Yes, Genesis is the parent theme.

  4. lee@digitalacorn
    Member
    Posted 10 months ago #

    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.

  5. llizard
    Member
    Posted 8 months ago #

    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)

  6. esmi
    Forum Moderator
    Posted 8 months ago #

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

  7. llizard
    Member
    Posted 8 months ago #

    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.

  8. llizard
    Member
    Posted 8 months ago #

    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.

  9. esmi
    Forum Moderator
    Posted 8 months ago #

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

  10. llizard
    Member
    Posted 8 months ago #

    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.

  11. ronangelo
    Member
    Posted 8 months ago #

    @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.

  12. llizard
    Member
    Posted 8 months ago #

    Many many thanks, ronangelo! That works beautifully.

Reply

You must log in to post.

About this Topic