Viewing 30 posts - 1 through 30 (of 42 total)
  • Author
    Posts
  • #1045194

    Hi Support / Everyone,

    We currently have search form in our main menu/nav bar, but we want to move it into the header_posline search where the phone number/social media icons are displayed.

    Can anyone assist us with how to have the search form displayed in that area instead?

    #1045236

    a quick and dirty way would be to create a shortcode for that search item in child-theme functions.php:

    function search() {
      global $avia_config;
      ob_start();
      get_search_form();
      $form =  htmlspecialchars(ob_get_clean()) ;
        return 
              '<a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>&nbsp;&nbsp;&nbsp;';
      }
    add_shortcode('search', 'search');

    and then you can place [search] for that search item.
    for example in the enfold – header – extra-elements – phonenumber field f.e.:
    [search] <a href="tel:+49123456">+49123456</a>

    #1045242

    The results list is a bit uglier than on the normal field-
    i look for a different input – just a moment

    #1045266

    if you can live with this position
    see example-page: https://webers-testseite.de/ostler/

    this to child-theme functions.php

    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
    function avia_append_search_nav_mod(){
              global $avia_config;
              ob_start();
              get_search_form();
              $form =  htmlspecialchars(ob_get_clean()) ;
    
              $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                            <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                              <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                            </a>
                        </li>';
    
        echo $items;
    }
    
    function custom_shift(){
    ?>
    <script>
    (function($){
    	$('#header_meta #menu-item-search').prependTo('#avia2-menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');
    #1045563

    Hi,

    Thank you very much for sharing @guenni007, did you have any luck with that @fluffyduck?

    Best regards,
    Rikard

    #1045607

    well you can try this
    Either you put the phone link in the top menu and don’t use the Phone-Number option. Then you take the above code, because it places the search function in front of the complete menu.

    Or – also don’t use the Phonenumber option, add both things via Functions.php with the following code:

    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
    function avia_append_search_nav_mod(){
              global $avia_config;
              ob_start();
              get_search_form();
              $form =  htmlspecialchars(ob_get_clean()) ;
    
              $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                            <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                              <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                            </a>
                        </li>
    					<li class="phone-info">
    					   <a href="tel:+49123456">+49123456</a>
    					</li>';
    
        echo $items;
    }
    
    function custom_shift(){
    ?>
    <script>
    (function($){
    	$('#header_meta .phone-info').prependTo('#avia2-menu');
    	$('#header_meta #menu-item-search').prependTo('#avia2-menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');

    see result here: https://webers-testseite.de/ostler/

    outside the top-menu the ajax menu doesn’t work the way it should – guess there are too many css rules missing to style the results dropdown.

    #1045620

    I’m not having any success with any of these items, I must be doing something wrong.

    I attempted each method, method #1 with the function in the child theme fucntions.php and putting the [search] into the phone field, displayed [search] on the actual website.

    then I tried the second method, added code to child field , nothing in the phone field and nothing was displayed in the nav bar section.
    Same with the third option.

    Do I need to do any other modifications other than add those code segments to the child functions.php file?

    #1045861

    this is the fastest way – but the results list in the flyout div is not the nice styled one as if you got it in main nav menu: Link

    this one here : Link provides the styled result window.

    if you got troubles even with method 1 – there must be something wrong with your setup or input into the child-theme functions.php.
    Because you see that it is working on my Enfold 4.5.1 and WordPress 5.0.1 installtion. Link
    I tested the shortcode method too on that installation – the only thing that was bad is the mentioned styling of the ajax results list.
    The reason seems to be that on an enfold menu the search item is styled – out of enfold menu it is not.

    #1045863

    if you can not post here a link to your site to see the setup. Provide for the mods here on Private Content Input Field Account Details that they can look for it.

    #1045881

    Hi Guenni007, I’ve provided the url in private content now. I’m going to try method 1 again , like yous aid thats the simpliest, surely I can’t be stuffing up inserting some code into child functions.php and then adding [search] to an input box.

    #1045891

    Here is my child functions.php modification for your first method, just to see if we can get something working.

    <?php
    
    /*
    * Add your own functions here. You can also copy some of the theme functions into this file.
    * WordPress will use those functions instead of the original functions then.
    */
    
    #add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
    
    function search() {
      global $avia_config;
      ob_start();
      get_search_form();
      $form =  htmlspecialchars(ob_get_clean()) ;
        return
              '<a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>&nbsp;&nbsp;&nbsp;';
      }
    add_shortcode('search', 'search');
    
    function enfold_customization_header_widget_area() {
      dynamic_sidebar( 'header' );
    }
    
    add_filter("kriesi_backlink","new_link");
    function new_link(){
    $kriesi_at_backlink = "";
    return $kriesi_at_backlink;
    }
    
    function custom_shift(){
    ?>
    <script>
    (function($){
        $('#header_meta #menu-item-search').prependTo('#avia2-menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');
    
    /* Create shortcode for parent page. */
    function list_parent_page() {
      global $post;
      $parent_id = $post->post_parent;
      $parent = $post->post_parent;
      $parent_title = get_the_title($parent);
      $link = get_permalink($parent_id);
      $parent_title = "<a href='$link' title='$parent_title'>$parent_title</a>";
     if($parent) {
            return $parent_title;
      }
    }
    function list_current_page() {
      get_the_title();
    }
    add_shortcode('parentpage','list_parent_page');
    add_filter( 'widget_title', 'do_shortcode' );
    
    // fix for PHP shortcode
    function do_php_shortcode_fix($content) {
        global $shortcode_tags;
        // save current shortcodes
        $old_shortcode_tags = $shortcode_tags;
        // remove all shortcodes, then re-add just our php and echo shortcodes
        remove_all_shortcodes();
        add_shortcode('php', $old_shortcode_tags['php']);
        add_shortcode('echo', $old_shortcode_tags['echo']);
        $content = do_shortcode($content);
        // and now put back the original shortcodes
        $shortcode_tags = $old_shortcode_tags;
        return $content;
    }
    function fix_php_shortcode_init() {
        global $shortcode_tags;
        if (isset($shortcode_tags['php'])) {
            // Move do_shortcode back to default of priority 11
            if(remove_filter('the_content','do_shortcode', 9))
                add_filter('the_content','do_shortcode', 11);
    
            // filter the content to deal with just the php and echo shortcodes
            // early on as priority 8 (before any WP formatting)
            add_filter('the_content', 'do_php_shortcode_fix', 8);
        }
    }
    
    // add fix for PHP shortcode, with priority 12 so it
    // comes after the PHP shortcode has been initialised
    add_action('init','fix_php_shortcode_init', 12);
        
    #1045925

    well if you use the shortcode only – you might not use the shift. Because the Position is on that method right.

    so get rid of :

    function custom_shift(){
    ?>
    <script>
    (function($){
        $('#header_meta #menu-item-search').prependTo('#avia2-menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');

    but the reason why i would use the other method is – the look and feel of the results list.
    Try first that – as you like and see what i mean on your own installation.

    ___________

    PS: on top you have outcommented the part of header widget area:
    the code is a whole part of:

    add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
      dynamic_sidebar( 'header' );
    }

    you have a # infront of the add_action part

    ____________

    PPS:
    you can have your own backlink instead fo kriesi ones by:

    function new_link(){
    $kriesi_at_backlink = "<a href='https://your-new-link'>Your Text here</a>";
    return $kriesi_at_backlink;
    }
    add_filter("kriesi_backlink","new_link");
    #1045946

    by the way : for what is that
    // fix for PHP shortcode
    ?
    where did you get that code from?

    #1046074

    I’m not sure why the fix for phpshortcode is there. I have inherited this site to fix / make modifications for a client after their developer vanished.

    So I keep finding wierd items, I still can’t get these search items to show, there must be some additional custom css or other code thats conflicting with it. I’ll keep trying, thank you fro yoru help so far, very much appreciated.

    Almost wondering if I just try shift the search form with css up into the navbar section if I can’t get one of these modifications working.

    #1046194

    I’ve created a dev copy of this site and still can’t get any of these options to work :(

    #1046198

    Ok, I just got your first method working, the problem was a custom ‘helper-main-menu.php’ in the child theme /include directory.

    I updated that with the latest version from the parent theme and then attempted your first method with the [search] in the phone field and sure enough the search icon was displayed and when clicked will popup a little search form. I agree this is not a clean method.

    I then happy that worked, went to try your second method and unfortunately nothing showed up in that search spot, will see if I can spot any reason why thats not working.

    #1046201

    Ok more success with your other methods, seems the problem was when I was copy/pasting the code from the forum into vim, there were some character issues.

    Retyping the whole part, now brings up the search icon, is there a way to actually retain the search form input box in the header though, rather than all methods where you click on the search glass icon, and it pops up the search form?

    #1046203

    Here is something interesting, I think I can work with just the search symbol there possibly (depending on the client request)
    However I tried to put a space between the search icon and the phone icon.

    Then another search icon appeared in the header, you can see it in this screenshot , its small and orange, it behaves exactly the same as well, but seems to have been hidden.

    code used

    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
    function avia_append_search_nav_mod(){
              global $avia_config;
              ob_start();
              get_search_form();
              $form = htmlspecialchars(ob_get_clean());
    
              $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                            <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                            <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                            </li>&nbsp;&nbsp;';
            echo $items;
    }
    
    function custom_shift(){
    ?>
    <script>
    (function($){
            $('#header_meta #menu-item-search').prependTo('#avia2-menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');

    Any idea where that other search icon came from? should we be using that one somehow?

    #1046239

    you only have to use one of the methods. if you use the code above get rid of the shortcode function and remove from phonenumber input field the [search]

    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
    function avia_append_search_nav_mod(){
              global $avia_config;
              ob_start();
              get_search_form();
              $form =  htmlspecialchars(ob_get_clean()) ;
    
              $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                            <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                              <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                            </a>
                        </li>
    					<li class="phone-info">
    					   <a href="tel:+6123278777">07 3237 8777</a>
    					</li>';
    
        echo $items;
    }
    
    function custom_shift(){
    ?>
    <script>
    (function($){
    	$('#header_meta .phone-info').prependTo('#avia2-menu');
    	$('#header_meta #menu-item-search').prependTo('#avia2-menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');

    And it is hard to say from a screenshot where it could come from. A life link – which you do not have now – will be more informative.

    PS : for me it looks like the small one is from the code above and the other one from the shortcode.
    You have to style the little one via css.
    The code from me above with the phone number inserted this way is for having your search icon infront of the phonenumber. Then the phonenumber is part of the top menu. And you have to leave the phone info field empty on Enfold.

    • This reply was modified 5 years, 11 months ago by Guenni007.
    #1046244
    This reply has been marked as private.
    #1046245

    The one from the screenshot is using the method where the phone number wasn’t included and without the [search].
    The only time that second search icon appeared, was when I tried to put a space between the search icon in front of the phone number, i put 2 x nbsp and then it suddenly appeared.

    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
    function avia_append_search_nav_mod(){
              global $avia_config;
              ob_start();
              get_search_form();
              $form = htmlspecialchars(ob_get_clean());
    
              $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                            <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                            <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                            </li>&nbsp;&nbsp;';
            echo $items;
    }
    
    function custom_shift(){
    ?>
    <script>
    (function($){
            $('#header_meta #menu-item-search').prependTo('#avia2-menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');
    #1046251

    you see here the difference of both methods

    shortcode:

    functions.php as top-menu list point:

    • This reply was modified 5 years, 11 months ago by Guenni007.
    #1046253

    i can see your dev page – and that is definitly from the shortcode. Maybe it is an caching problem.
    Look to the phone info input field and to your functions.php

    #1046255

    can you post your functions.php again here as a copy ?

    PS to style the small “good” one use this in quick css:

    #header_meta #menu-item-search + a {
        font-size: 20px !important;
        position: relative;
        top: -10px;
        left: 8px;
    }
    
    #header_meta .avia-arrow-wrap {
        right: 20px !important;
    }
    #1046259

    And you are still on enfold 4.4.1 i don’t know when it starts to name the top-menu avia2-menu but on your code there is no avia2-menu

    so try to change the code above from
    $('#header_meta #menu-item-search').prependTo('#avia2-menu');
    to:
    $('#header_meta #menu-item-search').prependTo('#header_meta .sub_menu');

    and see what happens

    #1046262

    Doesn’t seem like anything changes if I modify that header_meta line.

    I’m going to go try style that small one now per your instructions, I must say thank you so much for your assistance with this, has been remarkable.
    As for 4.4.1 I swear we only upgraded to that like last month or maybe 1-2months ago!! :(

    #1046264

    please – always think on caching and merged files of enfold ( Enfold / Performance tab ) – sometimes you see the changings not directly

    #1046265

    Oddly, if I comment out your code (even after leaving in the modified css for the other search icon) both search icons now disappear.

    #1046266

    i can see here that there was an entry on phone-info field:

    #1046267

    yeah, thats using your ‘method #2’

    and the second search icon is displayed only when I insert
    &nbsp;&nbsp; in your $items variable block

    Here is the current functions.php

    <?php
    
    /*
    * Add your own functions here. You can also copy some of the theme functions into this file.
    * WordPress will use those functions instead of the original functions then.
    */
    
    add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
      dynamic_sidebar( 'header' );
    }
    
    add_filter("kriesi_backlink","new_link");
    function new_link(){
    $kriesi_at_backlink = "";
    return $kriesi_at_backlink;
    }
    
    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
    function avia_append_search_nav_mod(){
              global $avia_config;
              ob_start();
              get_search_form();
              $form = htmlspecialchars(ob_get_clean());
    
              $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                            <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                            <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                            </li>&nbsp;&nbsp;';
            echo $items;
    }
    
    function custom_shift(){
    ?>
    <script>
    (function($){
    //      $('#header_meta #menu-item-search').prependTo('#avia2-menu');
            $('#header_meta #menu-item-search').prependTo('#header_meta .sub_menu');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_shift');
    
    /* Create shortcode for parent page. */
    function list_parent_page() {
      global $post;
      $parent_id = $post->post_parent;
      $parent = $post->post_parent;
      $parent_title = get_the_title($parent);
      $link = get_permalink($parent_id);
      $parent_title = "<a href='$link' title='$parent_title'>$parent_title</a>";
     if($parent) {
            return $parent_title;
      }
    }
    function list_current_page() {
      get_the_title();
    }
    add_shortcode('parentpage','list_parent_page');
    add_filter( 'widget_title', 'do_shortcode' );
    
    // fix for PHP shortcode
    function do_php_shortcode_fix($content) {
        global $shortcode_tags;
        // save current shortcodes
        $old_shortcode_tags = $shortcode_tags;
        // remove all shortcodes, then re-add just our php and echo shortcodes
        remove_all_shortcodes();
        add_shortcode('php', $old_shortcode_tags['php']);
        add_shortcode('echo', $old_shortcode_tags['echo']);
        $content = do_shortcode($content);
        // and now put back the original shortcodes
        $shortcode_tags = $old_shortcode_tags;
        return $content;
    }
    function fix_php_shortcode_init() {
        global $shortcode_tags;
        if (isset($shortcode_tags['php'])) {
            // Move do_shortcode back to default of priority 11
            if(remove_filter('the_content','do_shortcode', 9))
                add_filter('the_content','do_shortcode', 11);
    
            // filter the content to deal with just the php and echo shortcodes
            // early on as priority 8 (before any WP formatting)
            add_filter('the_content', 'do_php_shortcode_fix', 8);
        }
    }
    
    // add fix for PHP shortcode, with priority 12 so it
    // comes after the PHP shortcode has been initialised
    add_action('init','fix_php_shortcode_init', 12);
Viewing 30 posts - 1 through 30 (of 42 total)
  • The topic ‘How to insert search form into header_posline next to phone number?’ is closed to new replies.