0

briefly about me: I took a working student job in my university with no WordPress experience (but my professor knows that). I basically maintain my professor's website. My predecessor wrote the current theme with little to no comments. Problem: the search function doesn't work on mobile devices. And I have no idea why, nor for how long the problem has existed. All I can say is that when I search for blockchain on a desktop device, for example ([website]/index.php?s=blockchain&m=), a string is sent to the variable S and it is displayed. On mobile devices, the string is sent to the variable M and M is unfortunately not displayed: [website]/index.php?s=&m=blockchain Feel free to test this out: https://norbert-pohlmann.com/

Since, as I said, I took over someone else's work and have no idea about WordPress, I don't know exactly how to fix the problem. My predecessor can not help me at this point, unfortunately. I also looked into the standard theme Twenty Twenty and to be honest I have no skills to even understand how the search works there. I'm so sorry.

I can show you times the search from the file header.php:

<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">

                <form class="row justify-content-end" method="get" id="searchform"
                      action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <div class=" row justify-content-end pc suche">
                        <div class="col-lg-11 col-xl-11">
                            <table>
                                <tr>
                                    <td>
                                        <input class="form-control" placeholder="Suche" type="text"
                                               value="<?php echo esc_html($s, 1); ?>" name="s" id="s"/>
                                    </td>
                                    <td>
                                        <input class="btn btn-outline-search" type="submit" id="search_submit"
                                               value="Suchen"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="justify-content-end mobile">
                        <div class="col-auto">
                
                         <table>
                                <tr>
                                    <td>
                                        <input class="form-control" placeholder="Suche" type="text"
                                               value="<?php echo esc_html($m, 1); ?>" name="m" id="m"/>
                                    </td>
                                    <td>
                                        <input class="btn btn-outline-search" type="submit" id="search_submit"
                                               value="Suche"/>
                                    </td>
                                </tr>
                            </table>
                            
                        </div>
                    </div>
              
                </form>
            </div>

1 Answer 1

1

In WordPress the name for a search field must be s. WordPress automatically performs a search on any request where s is present.

For some reason your theme has a separate search field named m that is displayed on mobile. This won't do anything unless custom code is added to handle this. But that's not necessary.

Additionally, both fields are inside a single <form> element, which means that whenever the form is submitted, both the s and m fields are submitted. This means that on mobile a search is going to be performed based on the desktop search field.

What you need to two separate <form> elements, one for desktop and one for mobile, and each should have its own s element:

<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
    <div class="row justify-content-end">
        <form class="row justify-content-end pc suche">
            <div class="col-lg-11 col-xl-11">
                <table>
                    <tr>
                        <td>
                            <input class="form-control" placeholder="Suche" type="text" value="<?php echo esc_attr($s); ?>" name="s" />
                        </td>
                        <td>
                            <input class="btn btn-outline-search" type="submit" id="search_submit" value="Suchen"/>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
        <form class="justify-content-end mobile" method="get" action="<?php echo esc_url( home_url() ); ?>">
            <div class="col-auto">
                <table>
                    <tr>
                        <td>
                            <input class="form-control" placeholder="Suche" type="text" value="<?php echo esc_attr($s); ?>" name="s" />
                        </td>
                        <td>
                            <input class="btn btn-outline-search" type="submit" id="search_submit" value="Suche"/>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>

Also note the other changes I made:

  • I removed the id from the forms and inputs, since they would otherwise be duplicates, which is not allowed in HTML. You can add whatever IDs you like if you need them, as long as they're unique.
  • I replaced $_SERVER['PHP_SELF']; with home_url(), which is the proper way to get the homepage URL in WordPress.
  • The code had esc_html() with a second parameter set to 1. This doesn't do anything, so I removed it.
  • I replaced esc_html() with esc_attr(), as it's more correct for escaping attributes.
5
  • Thank you very much, this was helpful :) Nov 2, 2021 at 6:37
  • I just noticed that the search only works on the start page. But if I am on a post (like an article or a glossary entry) and then search for something, it just adds /?s=[keyword] after the current URL. Like: norbert-pohlmann.com/glossar-cyber-sicherheit/… The search within articles or lectures is great. It's only this small stupid issue with the post. Nov 2, 2021 at 14:24
  • I left some attributes off the first form tag by mistake. Copy the action and method attributes from the second form and put them in the first. Nov 2, 2021 at 17:13
  • Nice thanks :) If I can ask you one last thing, the current search is sorted by date, is it possible to sort them by relevance without any plugins? Nov 3, 2021 at 19:37
  • Results are sorted by relevance by default, so I can't say why that might be happening, or how to fix it. Try deactivating plugins to see if it resolves the issue. Nov 4, 2021 at 3:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.