How To Add Search Box in Thesis Theme Navigation Bar

How To Add Search Box in Thesis Theme Navigation Bar

Mell Howard
How To Add Search Box in Thesis Theme Navigation Bar

Hello! I'd be happy to help you add a search box to the navigation bar in the Thesis theme. Here's a step-by-step guide to get you started:

  1. First, log in to your WordPress dashboard.
  2. Go to the Appearance section and click on "Editor" to access the theme code.
  3. Look for the file called "custom_functions.php" and click on it to open it.
  4. Start by adding the following code snippet at the beginning of the file, right after the opening PHP tag:

php
add_filter('wp_nav_menu_items', 'add_search_box_to_nav', 10, 2);
function add_search_box_to_nav($items, $args) {
if( $args->theme_location == 'primary' ) {
$items .= '<li class="menu-item menu-search">';
$items .= '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">';
$items .= '<input type="search" class="search-field" placeholder="Search..." value="' . get_search_query() . '" name="s" />';
$items .= '<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>';
$items .= '</form></li>';
}
return $items;
}

  1. Save the changes you made to the "custom_functions.php" file before closing it.
  2. Now, go to the Appearance section again and click on "Theme Options" for the Thesis theme.
  3. In the Navigation Menu section, select the Primary Navigation Menu and save your changes.
  4. Refresh your website, and you should now see the search box added to your navigation bar.

That's it! You've successfully added a search box to the Thesis theme's navigation bar. Feel free to customize the code or the search box's appearance to match your website's design. Let me know if you need any further assistance!

Professional Academic Writing Service 👈

How To Add Adsense To Thesis Theme

Check our previous article: How To Add Adsense To Thesis Theme

Report Page