Add Search Form to Mobile Menu

I'd like to add a search form to my mobile menu using my current theme's style. The theme is called the7. Is there a way I can do this without using Ubermenu?

I attempted using a custom function in my child theme to replicate the7's search function , but my skills are somewhat limited, and this didn't work:

add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'mobile_menu' )
        return $items.get_search_form();

    return $items;
}

I found that searchform.php should do the trick:`<?php
/**
* The template for displaying search forms in PressCore
*
* @package presscore
* @since presscore 0.1
*/

// File Security Check
if ( ! defined( 'ABSPATH' ) ) { exit; }

?>
<form class="searchform" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" class="field searchform-s" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" placeholder="<?php _e( 'Type and hit enter …', 'the7mk2' ); ?>" />
<input type="submit" class="assistive-text searchsubmit" value="<?php esc_attr_e( 'Go!', 'the7mk2' ); ?>" />
<a href="#go" class="submit"></a>
</form>`

I'm assuming I would just pull it with this?
<?php get_search_form(); ?>

So I tried adding a function like that, as seen above(in the top code excerpt), but failed. Am I on the right track? Is the name of the menu "mobile_menu" incorrect? What do you advise?

Warm Regards,
Abraham

  • Rupok

    Hi Abraham

    Hope you had a wonderful day.

    Theoretically both the method you used should work. First one will add search form with menu items, and second method will directly call the search box.

    But as none of them are working, there might be something which is creating problem. As you are using a third party paid theme, I don't have access to their coding either. So I think, I'll have to check on your site. I could tell you better about the issue if I could check your current configuration and make some tests on your site. Would you mind allowing Support Access so we can have a closer look at this?

    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Have a nice day. Cheers!
    Rupok

  • Abraham LaBonte

    Hi Rupok!

    Should be ready to go for remote support.

    I can connect the dots, but I'm not up to date with any particular code, so my syntax is poor. The theme is the7 and I notice they're using something they refer to as "presscore"(which for me made the rabbit hole deeper). At the moment I added the code below ONLY to functions.php inside the childtheme AbeGuruthe7HappySurprises.

    add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
    function add_search_box_to_menu( $items, $args ) {
        if( $args->theme_location == 'mobile_menu' )
            return $items.get_search_form();
    
        return $items;
    }

    My hunch is that my syntax was wrong either:
    --- here:"'mobile_menu'" is the underscore correct here?
    The menu location is titled "Mobile Menu" in WP Menus section but I wasn't sure where to find exact title in database

    --- or here: "$items.get_search_form();" does the . between "$items" and "get_search_form()" apply correctly?

    Thanks so very much!
    Abraham

  • Ivan Shulev

    Hey Abraham,

    I hope you are having a wonderful day so far.

    I am afraid there is an error in the code you provide above.

    It should be like so:

    add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
    function add_search_box_to_menu( $items, $args ) {
            if( $args->theme_location == 'mobile_menu' ) {
                    ob_start();
                    get_search_form();
                    $searchform = ob_get_contents();
                    ob_end_clean();
    
                    $items .= '<li>' . $searchform . '</li>';
            }
            return $items;
    }

    It also seems that you did not provide support access, so if the code does not work for you please follow the guide my colleague Rupok suggested above.

    I am not sure about the "mobile_menu" underscore as well since I wasn't able to see the code so that might be causing a problem as well. Feel free to try with a dash instead.

    If you would like us to have a look and implement the code, I will ask you provide FTP credentials as using the WordPress file editor can break the site and there is no previous version to go back to.

    You can send that privately through our contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic.

    Send in:

    Subject: "Attn: Ivan Shulev"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    **If you keep support access active then no need to send in wp-admin

    I hope this helps and I wish you an awesome day ahead!

    Ivan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.