Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1408567


    I tried the solution of @mike here to use the shortcode for the AJAX search in the blog’s sidebar:
    –> here
    and in the documentation here –>

    I have added this to my code snippets plugin:

    add_shortcode('avia_search', 'get_search_form');

    Then I placed the widget “Custom HTML” in my sidebar with this shortcode:


    So far so good, it works, but it is not the ajax functionality, i.e. when I type a search term then a popup opens with the search results.
    This works fine in the main menu where I have added the search icon via the theme settings.

    How can I apply the ajax search functionality to the shortcode in my sidebar please?
    Thank you.


    Hey BeeCee,

    Thank you for the inquiry.

    You have to wrap the shortcode inside a special container with the class name “avia_search_element”.

    <div class="avia_search_element">[avia_search]</div>

    You can also use the avia_sc_search shortcode if necessary.

    Best regards,


    Thank you, but both solutions look very weird and with both shortcodes the ajax is not working like the search icon in the menu, for example.


    <div class="avia_search_element">[avia_search]</div>
    is now in two lines


    <div class="avia_search_element">[avia_sc_search]</div>
    has no icon, not the term “Search” as with using the other shortcode.

    I would like to have the Search Widget like the standard WP Search widget output (in my screenshot the third one), only with the Ajax functionality.

    Could you please take a look at my site?
    Private data are in my last post here and at widgets you can see these 3 variants.
    Thank you.


    To fix the SEARCH – SHORTCODE IN DIV CLASS icon and input field alignment try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .sidebar .custom-html-widget .avia_search_element #searchsubmit {
    	width: 10%;
        padding: 0;
    #top .sidebar .custom-html-widget .avia_search_element #s {
    	width: 85%;
        display: inline;
        float: left;

    this seems to correct:
    in my test the search results show correctly:

    Best regards,


    Yes, I see, now it works fine with the first search widget, thank you.

    But just for my understanding:

    what is the difference between these 2 shortcodes:

    as used in the first search widget (where now ajax search is working)

    as used in the second search widget (which has no ajax functionality and no search icon) ?


    [avia_sc_search] is a protected function from the search.php that is not meant to be loaded directly, so don’t use that one.

    Best regards,


    I understand, thank you very much for your time, you can close this thread now.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Ajax Search Shortcode for sidebar is not working’ is closed to new replies.