Support » Plugin: Bop Search Box Item Type For Nav Menus » editing the placeholder

  • Q: I’d like a placeholder in my search input field, how would I go about this?

    A: This is set via the Attribute Title field in the menu item editor in the admin area.

    ^^ where is that? I don’t see it anywhere. thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author joe_bopper

    (@joe_bopper)

    Hi Judy,

    I’m pretty sure the problem you’re having is because Appearance > Customize still isn’t up to scratch and WordPress has an obsession with not showing you most of the options available. The customizer doesn’t allow change of Screen Options, so instead you must go to /wp-admin/nav-menus.php. In there open the tab in the top right corner and Title Attribute should be a tickbox there. This will allow you to edit the placeholder in the menus page and in the customizer.

    Hope this helps.

    Cheers,
    Joe

    hi Joe,

    thanks! i found the label and added “Search.” It’s not showing up. Here is the html output. The first instance is the desktop version which is fine (mobile is hidden). The second is the mobile version (desktop hidden) which is where I want the label “Search” in what is now an empty box.

    
    <li id="menu-item-257" class="bop-nav-search menu-item menu-item-type-search menu-item-object- no-mega-menu">
    <form  id="menu-item-257" class="bop-nav-search menu-item menu-item-type-search menu-item-object- menu-item-257" role="search" method="get" action="http://plushdesign.net/civiltester/">
    
    <div>
    <label class="screen-reader-text" for="s">Search</label>
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
    </div>
    
    </form>
    </li>
    
    <li id="menu-item-259" class="mobile-search menu-item menu-item-type-search menu-item-object- no-mega-menu">
    <form  id="menu-item-259" class="mobile-search menu-item menu-item-type-search menu-item-object- menu-item-259" role="search" method="get" action="http://plushdesign.net/civiltester/">
    
    <div>
    <label class="screen-reader-text" for="s">Search</label>
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search Mobile" />
    </div>
    
    </form>
    </li>
    

    this is the dev site link: http://plushdesign.net/civiltester/

    see screenshot and notes: https://www.plushdesign.net/civiltester/ScreenShot.pdf
    tx again!

    • This reply was modified 1 year, 2 months ago by  judyhicks.
    • This reply was modified 1 year, 2 months ago by  judyhicks.
    • This reply was modified 1 year, 2 months ago by  judyhicks.
    Plugin Author joe_bopper

    (@joe_bopper)

    Hi Judy,

    It looks very much like your theme doesn’t support html5 and the placeholder attribute isn’t available in prior versions of html. Therefore, unless you can make it so your theme supports html5, a placeholder is unavailable. Here’s how you can do it: https://developer.wordpress.org/reference/functions/add_theme_support/#html5

    BTW, the “Search” you’re seeing in the current html is for screen readers (i.e., for the blind) and so is hidden from usual view.

    Cheers,
    Joe

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘editing the placeholder’ is closed to new replies.