There are a few different ways to add a search box. I will show you a few of them.
This code adds a search box to the primary menu.
I added if statement so that the search box will only show on the front page.
/* Adds search to primary menu. */
beans_add_smart_action( 'beans_menu[_navbar][_primary]_append_markup', 'myprefix_primary_menu_search' );
function myprefix_primary_menu_search() {
if (is_front_page()){
?>
<li class="tm-search uk-medium-visible uk-margin-large-left">
<?php get_search_form(); ?>
</li>
<?php
}
}
An alternative to the above code from https://github.com/templateflip/fast-monkey-wordpress-theme/blob/master/functions.php
// Add search in header after primary menu
beans_add_smart_action( 'beans_primary_menu_after_markup', 'fast_monkey_primary_menu_search' );
function fast_monkey_primary_menu_search() {
echo beans_open_markup( 'fast_monkey_menu_primary_search', 'div', array(
'class' => 'tm-search uk-navbar-flip uk-hidden-small'
) );
get_search_form();
echo beans_close_markup( 'fast_monkey_menu_primary_search', 'div' );
}
Another approach is to have only the search icon be seen.
When clicking the Search icon the menu items disappear and the Search box is seen.
To check it out in action see the theme banks by the Theme Butler
https://github.com/ThemeButler/tbr-banks
It uses php and JavaScript.
Add the following php code into the functions file:
// Load the js file into the functions.php file.
beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/assets/js/global.js', 'js' );
//search form
beans_replace_attribute( 'beans_search_form', 'class', 'uk-form-icon uk-form-icon-flip',
'uk-display-inline-block' );
beans_remove_markup( 'beans_search_form_input_icon' );
beans_add_smart_action( 'beans_primary_menu_append_markup', 'banks_primary_menu_search' );
function banks_primary_menu_search() {
echo beans_open_markup( 'banks_menu_primary_search', 'div', array(
'class' => 'tm-search uk-visible-large uk-navbar-content',
'style' => 'display: none;'
) );
get_search_form();
echo beans_close_markup( 'banks_menu_primary_search', 'div' );
echo beans_open_markup( 'banks_menu_primary_search_toggle', 'div', array(
'class' => 'tm-search-toggle uk-visible-large uk-navbar-content uk-display-inline-block uk-contrast'
) );
echo beans_open_markup( 'banks_menu_primary_search_icon', 'i', array( 'class' => 'uk-icon-search' ) );
echo beans_close_markup( 'banks_menu_primary_search_icon', 'i' );
echo beans_close_markup( 'banks_menu_primary_search_toggle', 'div' );
}
beans_add_attribute( 'beans_search_form', 'class', 'search' );
The CSS:
/* Search. */
.tm-primary-menu .tm-search {
width: 370px;
}
.tm-primary-menu .tm-search-toggle {
margin-left: 30px;
cursor: pointer;
}
We now need to add the folder structure for the JavaScript file as well as add the js file.
In your child theme root folder add an assets folder. Inside the assets folder add a js folder.
So it looks like this: root/assets/js
Inside the js file I called global.js (as it can also be used for additional JavaScript code) I added the following code:
!(function( $ ) {
$( document ).on( 'click', '.tm-primary-menu .tm-search-toggle', function() {
var searchSelector = '.tm-primary-menu .tm-search';
$( searchSelector ).toggle();
$( '.tm-primary-menu .uk-navbar-nav' ).toggle();
if ( $( searchSelector ).is( ':visible' ) ) {
$( searchSelector ).find( 'input' ).focus();
$( this ).find( 'i').removeClass( 'uk-icon-search' ).addClass( 'uk-icon-close' );
} else {
$( this ).find( 'i').removeClass( 'uk-icon-close' ).addClass( 'uk-icon-search' );
}
} );
} )( window.jQuery );
As one makes a search a search page is opened with various alternatives.
To adjust the phrasing of “Search results for:” to “Search results:”
Add this code (and adjust the returned name):
// Adjust the Search result page title.
add_filter( 'beans_search_title_text_output', 'modify_search_title' );
function modify_search_title() {
return 'Search results: ';
}Thanks to Codefactory for the code: https://community.getbeans.io/discussion/search-page-title/
Create a search page
NB! The above screenshot actually shows the results from a search.php that I made.
To create a search.php page. Create the page and add it to your root folder.
Then inside the php page add the following code and adjust:
<?php
// Modify the search page markup
beans_add_smart_action( 'beans_before_load_document', 'fast_monkey_search_setup_document' );
function fast_monkey_search_setup_document() {
// Post
beans_add_attribute( 'beans_search_title', 'class', 'uk-margin-bottom-remove' );
beans_add_attribute( 'beans_content', 'class', 'uk-article' );
beans_remove_attribute( 'beans_post', 'class', 'uk-article' );
beans_modify_markup( 'beans_post_title', 'h2' );
beans_add_attribute( 'beans_post_title', 'class', 'uk-h2' );
beans_add_attribute( 'beans_post', 'class', 'uk-grid-margin' );
// Post image
beans_remove_action( 'beans_post_image' );
// Post meta
beans_remove_action( 'beans_post_meta' );
beans_remove_action( 'beans_post_meta_tags' );
beans_remove_action( 'beans_post_meta_categories' );
// Remove article search
beans_remove_output( 'beans_no_post_search_form' );
}
// Add the search form
beans_add_smart_action( 'beans_search_title_after_markup', 'fast_monkey_search_field' );
function fast_monkey_search_field( $content ) {
echo beans_open_markup( 'fast_monkey_search_content', 'div', array( 'class' => 'uk-grid-margin' ) );
get_search_form();
echo beans_close_markup( 'fast_monkey_search_content', 'div' );
}
// Clean up the search results item markup
beans_add_smart_action( 'the_content', 'fast_monkey_search_content' );
function fast_monkey_search_content( $content ) {
$output = beans_open_markup( 'fast_monkey_search_content', 'p' );
$output .= beans_output( 'fast_monkey_search_post_content', substr( strip_tags( $content ), 0, 150 ) . ' ...' );
$output .= beans_close_markup( 'fast_monkey_search_content', 'p' );
return $output;
}
// Load beans document.
beans_load_document();
The code is from this file: https://github.com/templateflip/fast-monkey-wordpress-theme/blob/master/search.php
Resources:
https://community.getbeans.io/discussion/search-field-displayed-twice-when-added-to-nav-menu/
https://community.getbeans.io/discussion/menu-questions/#post-696
No comment yet, add your voice below!