Support » Theme: GeneratePress » generatepress search how to change visual display

  • Resolved brainyc

    (@brainyc)


    Hi all,

    I would like to change the visual display and behaviour of the build in search of the theme generatepress.

    target: just on the left side of the search icon where should be a searchfield always visible. if you enter a search phrase then clicking on the search icon and that would cause the search.

    How can I change the current generatepress seach to such a search? Any help is highly appreciated.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    So instead of the current navigation search, you want a search bar with a button to always be visible?

    Let me know 🙂

    Thread Starter brainyc

    (@brainyc)

    Hi Tom 🙂

    … thank you for your quick reply. Yes, exactly a search bar with a button to always be visible. hm… how easy it could be explained 😉

    Now there is only the icon always visible.
    The text should be right on the leftside of the current icon of the horizontal navigation and always visible.
    Within the following div tag
    <div class=”inside-navigation grid-container grid-parent”>

    Any help is highly appreciated

    brainyc

    Theme Author Tom

    (@edge22)

    Hmm, you could try this.

    1. First, disable the current navigation search.

    2. Next, add this function:

    add_action('generate_inside_navigation','generate_add_custom_search');
    function generate_add_custom_search()
    {
          echo '<div class="custom-search">';
                get_search_form();
          echo '</div>';
    }

    3. Then add this CSS:

    .custom-search {
          float: right;
    }

    It will probably need some CSS tweaking to integrate with the look of your site, but that should be a decent start.

    Let me know 🙂

    Thread Starter brainyc

    (@brainyc)

    Dear Tom,

    THANK YOU soooooo much for your super fast and great and kind reply. I will try on Monday and let you know whether it worked.

    Thank you for your answer highly appreciated.

    brainyc

    Thread Starter brainyc

    (@brainyc)

    Dear Tom,

    Thank you kindly! that’s what I did look for.

    How can I include this the best way into the responsive part?
    mean if it is a mobile then it should be as the last list item.

    originally there is:
    <li class=”search-item” title=”Search”><i class=”fa fa-search”></i>

    so shall I write instead of your suppose <div class=”custom-search”>
    a li tag like <li class=”custom-search”>
    or <li class=”search-item”
    so that it works?

    any help highly appreciated.

    Thread Starter brainyc

    (@brainyc)

    Dear Tom,

    another question then… quite like your icon used. Would rather like the icon instead of the search button.

    But that’s the secondary question. First one is the above one to get the search work also in the responsive menu. As it is not included there the way your supposed.

    Thank you in advance for your kind help

    brainyc

    Thread Starter brainyc

    (@brainyc)

    Dear Tom,

    … now found a solution under
    https://wordpress.org/support/topic/search-bar-in-the-main-menu-or-in-a-container-div-containing-both-in-floats

    search for add_filter that’s a working solution.

    But how to float: right only when it screen (not mobile not tablet)

    thank you
    brainyc

    Thread Starter brainyc

    (@brainyc)

    hi dear Tom,

    today’s my lucky day 😉 found out also imagine.
    solution:
    float: none in mobile.css
    and float: right in style.css

    Thank you so much for your help

    brainyc

    Thread Starter brainyc

    (@brainyc)

    Dear Tom,

    …now only need your image (<i class=”fa fa-search”></i>) instead of
    <input type=”submit” class=”submit” name=”submit” id=”searchsubmit” value=”Search”>

    maybe you can help if some time left.

    Thank you

    brainyc

    Theme Author Tom

    (@edge22)

    Hi there,

    Can you link me to your site with the search in the nav so I can make sure the CSS I give you with the search icon is correct?

    Thanks! 🙂

    Thread Starter brainyc

    (@brainyc)

    Hi dear Tom,

    unfortunately cannot link you to the site. But it is the CSS of yours. Do you think you can help me anyway ?-)

    Thank you

    brainyc

    Theme Author Tom

    (@edge22)

    Hmm, try this function instead then:

    add_action('generate_inside_navigation','generate_add_custom_search');
    function generate_add_custom_search()
    {
    ?>
    	<div class="custom-search">
    		<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    			<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
    			<input type="submit" id="searchsubmit" value="<i class="fa fa-search"></i>" />
    		</form>
    	</div>
    <?php
    }

    Hi Tom,
    please how can I translate the words “Search” (button) and “Search …” (page 404 and anywhere else)? Tried to find them in the search.php file, but did not.
    Thanks.

    Theme Author Tom

    (@edge22)

    You can either use filters: http://generatepress.com/knowledgebase/filter-list/

    Or you can translate the theme using a tool like Poedit: http://poedit.net/

    Then add your custom language to your child theme: https://codex.wordpress.org/Function_Reference/load_child_theme_textdomain#Example

    Thanks for the options.

    I must have missed the searchform.php, because that was all I needed to edit. Got it translated.
    Thanks.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘generatepress search how to change visual display’ is closed to new replies.