How to add a mobile-only search bar

If you'd like to have a prominent search bar on your site that displays on mobile, we'll show you how in this tutorial! Find your theme name below and follow the instructions.

Charlotte, Magnolia, & Pippa themes

  1. Click here and copy the code.
  2. In your WordPress dashboard, go to Appearance > Editor > Theme Functions (functions.php).
  3. Scroll to the VERY bottom, make a couple line spaces, and paste the code. Click Update File.
  4. Next, click here and copy the code.
  5. Go to Appearance > Customize > Additional CSS and paste the code in the box. Click Publish.
  6. Lastly, go to Appearance > Widgets and add a search bar to the Mobile Search widget area.

Vivienne theme

  1. Click here and copy the code.
  2. In your WordPress dashboard, go to Appearance > Editor > Theme Functions (functions.php).
  3. Scroll to the VERY bottom, make a couple line spaces, and paste the code. Click Update File.
  4. Next, click here and copy the code.
  5. Go to Appearance > Customize > Additional CSS and paste the code in the box. Click Publish.
  6. Lastly, go to Appearance > Widgets and add a search bar to the Mobile Search widget area.

Any other 17th Avenue themes

  1. Click here and copy the code.
  2. In your WordPress dashboard, go to Appearance > Editor > Theme Functions (functions.php).
  3. Scroll to the VERY bottom, make a couple line spaces, and paste the code. Click Update File.
  4. Next, click here and copy the code.
  5. Go to Appearance > Customize > Additional CSS and paste the code in the box. Click Publish.
  6. Lastly, go to Appearance > Widgets and add a search bar to the Mobile Search widget area.