How to add the search bar to mobile menu in wordpress? - php

I've added this code to my functions.php file:
function wpgood_nav_search( $items, $args ) {
$items .= '<li>' . get_search_form( false ) . '</li>';
return $items;
}
add_filter( 'wp_nav_menu_items','wpgood_nav_search', 10, 2 );
I've found it here:
adding search bar to the nav menu in wordpress
The problem: this code adds the search bar to desktop and mobile menus, but I need to add the search bar only to my mobile menu, because the desktop version of my site already has a search widget in the left sidebar.
How can I do this? Please, help me. Thanks!
Initializiation of my menus in functions.php :
// Initialize navigation menus
register_nav_menus(
array(
'primary-menu' => esc_html__( 'Primary Menu', 'bento' ),
'footer-menu' => esc_html__( 'Footer Menu', 'bento' ),
)
);
Thank you so much for your help! Finally I have decided to use my initial code and edit the searchbar's position and style with css, because I am not so good in coding:)

Basically do you do that by several process. Like following
By using jquery append function you can do. Paste this code in template JS file
$("here_put_menu_selector").append('
<li>
<form role="search" method="get" id="searchform" class="search-form" action="https://yourdomain.com/">
<div class="search-form-wrap">
<input type="text" value="" name="s" id="s" class="search-form-input" placeholder="search any"/>
<input type="submit" id="searchsubmit" class="button submit-button" value="Search"/>
</div>
</form>
</li>
');
Only on mobile devices visible that using CSS display property & hide that part from desktop/tablet devices.

Use the javascript code for adding the search box for mobile menu
$("ul.primary-mobile-menu').append('
// your html code to append
<li><form role="search" method="get" id="searchform" class="search-form" action="https://bookyspace.com/"><div class="search-form-wrap"> <input type="text" value="" name="s" id="s" class="search-form-input" placeholder="Знайти.."> <input type="submit" id="searchsubmit" class="button submit-button" value=""></div></form></li>
');
Thanks

#Vladislav Tiaglo
Add a class in the li item to the code you already used and said it´s working for both desktop and mobile:
<li> Add class to <li class="searchbox-position">
Then, in your css you code to hide the display for desktop:
#media (min-width: 840px) {
li.searchbox-position {
display: none !important;
}
}
Easiest way to make it work

Related

Adding/removing filter from another filter in Wordpress

I'm trying add/remove Wordpress search filter according to the page author of the page I'm currently on. The search bar is in the theme header and therefore independent of the page I am on. I would like to use the author ID of the current page to add a filter for the next search I would do in the search bar.
This is an e-commerce site. The search bar is in the header (independent of the page). I'm on the shop page. I'd like to search products (i.e. posts with the same author ID) related to the shop page I was on before the search action.
I have written the code for functions.php however it doesn't work, i.e "my_search_filter" is not added (nor deleted). What I'm missing?
function search_filter_by_page_author()
{
$author_id = get_the_author_meta('ID');
#echo $author_id;
if (in_array($author_id, array("1", "2"))
{
add_filter( 'pre_get_posts', 'my_search_filter' );
}
else
{
remove_filter( 'pre_get_posts', 'my_search_filter' );
}
}
add_action( 'wp_head', 'search_filter_by_page_author' );
function my_search_filter( $query )
{
if ( $query->is_search && !is_admin())
{
$query->set( 'author', '1, 2' );
}
return $query;
}
Here is an answer that may be what you're after. In my opinion, you should
Set a new searchform.php
Add your pre_get_posts (which by the way is an action, and not a filter)
searchform.php (example) - This goes in your theme or child theme root folder.
<?php
global $post;
$author_id = $post->post_author;?>
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search" class="searchform search">
<div class="form-group">
<input type="text" class="form-control" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php esc_attr_e( 'Search …', 'text_domain' ); ?>"/>
<input type="hidden" name="author" value="<?php echo $author_id;?>">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>
Search filter (put in functions.php)
add_action('pre_get_posts', 'search_filter_by_page_author');
function search_filter_by_page_author($query){
if ($query->is_search && !is_admin() && isset($_GET['author'])) {
$query->set('author', $_GET['author']);
}
return $query;
}
This may not do exactly what you're looking for, but I think you should be able to get a positive result from this as a starting point.

WordPress Search Error: ?s= in URL

So I'm doing a few stuff for this humanitarian association and they asked me to add a search button on their navbar.
So far I came up with two solutions but none of them work. They both add "?s=" into the URL, thus redirecting to an empty URL.
Example: if you type "programme" in the search field, the URL will be: http://pisad.org/?s=programme. This is an empty URL and it should ultimately redirect to http://pisad.org/nos-programmes-inedits/ instead.
The first solution tried: search on navigation menu plugin:
https://wordpress.org/plugins/search-box-on-navigation-menu/
The second solution tried: adding this code to the navbar
<form class="navbar-form navbar-right search-form searchform" id="searchform" role="search" method="GET" action="<?php echo esc_url( home_url( '/' )); ?>" id="searchform">
<div class="form-group">
<input type="text" class="form-control" placeholder="Rechercher" name="s" id="s">
</div>
<button type="submit" class="btn btn-default">Rechercher</button>
</form>
Any idea why it's like that?

Search page does not show the search results in WordPress

I have a searchform.php file which contains the following code:
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsumit" value="Search" />
</div>
Also in my index.php I've inserted this code:
<div class="search">
<?php get_search_form(); ?>
</div>
Now When I search for something I get no results. Therefore I added a search.php file to show the results in it but I still don't get the results. What kind of changes should be made? Or what piece of code is lacking?
Note that I want to show the results in a separate page which must be search.php in Wordpress.
You need to add search.php file inside the theme and in that you will need to add the view for the search result page and the result can be obtained by looping for e.g
while(have_posts() ) : the_post();
//here is your data
endwhile;

Stay on same page after form submit within WordPress

I've added my HTML page as part of the admin wordpress (see screenshot)
And I'm trying to get it so on each submit button, if the record is successfully added to the database a pop up shows up saying "Success!" and then clear the form data without leaving the page. At the moment my current set up tries to load the external page instead of remaining on the page in the screenshot. Here's my HTML and PHP:
<form class="pure-form" name="addAthlete" action="submitForm.php" method="POST">
<fieldset class="pure-group">
<input type="text" class="pure-input-2" name="membershipID" placeholder="Membership ID">
<input type="text" class="pure-input-2" required="required" name="firstName" placeholder="First Name">
<input type="text" class="pure-input-2" required="required" name="surname" placeholder="Surname">
</fieldset>
<button name="submitAthlete" type="submit" class="pure-button pure-input-2 pure-button-primary">Submit</button>
</form>
<?php
function showSuccess() {
echo "Success! One record added.";
}
if (isset($_POST['submitAthlete'])) {
addAthlete();
}
function addAthlete() {
include 'addAthlete.php';
showSuccess();
}
?>
I'm assuming the problem lies with the fact that the echo "Success" is trying to echo on the submitForm.php page which is how I've written it. This is because of the way the page is embedded into wordpress, you can see this below:
add_action( 'admin_menu', 'db_menu' );
function db_menu() {
add_menu_page(
'Database Form', // page title
'Database Form', // menu title
'manage_options', // capability
'database-form', // menu slug
'wpse_91693_render' // callback function
);
}
function wpse_91693_render() {
global $title;
print '<div class="wrap">';
print "<h1>$title</h1>";
$file = plugin_dir_path( __FILE__ ) . "submitform.php";
if ( file_exists( $file ) )
require $file;
print '</div>';
}
How can I get a pop up or something to show up within this WordPress page on each submit?
Thanks!
When you submit a form, it posts data to a new webpage by loading it. In order to stay on the same page, the action should take you to that same page ( move your processing logic there aswell, checking for posted arguments ) or if you don't want to see a reload, use ajax instead.

Wordpress Theme Options field not retaining value

I'm having what im sure is a simple issue but i can't manage to figure it out.
I'm coding a theme options page for my wordpress template and i've managed to get it where the values are saved and i can use them on the site but whenever i reload the theme options page all the form fields are blank and any previously applied settings are gone. My code is below.
<?php
//Theme Options Functionality is Below
if (get_option('pardue_theme_options')){
$theme_options = get_option('pardue_theme_options');
} else {
add_option('pardue_theme_options', array(
'sidebar2_on' => true,
'footer_text' => 'Made by William'
));
}
?>
<?php add_action('admin_menu', 'theme_page_add');
function theme_page_add() {
add_submenu_page('themes.php', 'Pardue Theme Options', 'Theme Options', 'administrator', 'themeoptions', 'theme_page_options');
}
function theme_page_options() {
global $theme_options;
$new_values = array(
'footer_text' => htmlentities($_POST['footer_text'], ENT_QUOTES),
);
update_option('pardue_theme_options', $new_values);
$theme_options = get_option('pardue_theme_options');
echo '<div class="wrap">';
echo '<h2>Theme Options</h2>';
?>
<form action="themes.php?page=themeoptions" method="post">
<label for="footer_text">Footer Text: </label><input name="footer_text" id="footer_text" value="<?php echo $theme_options['footer_text']; ?>" /> <br /> <br />
<label for="sidebar_checkbox">Sidebar 2 on: </label> <input name="sidebar_checkbox" id="sidebar_checkbox" value="on" type="checkbox" /> <br /> <br />
<input type="submit" value="Update Options" name="submit" />
</form>
<?php
echo '</div>';
}
?>
I found a good solution for coding my theme options. The plugin at the link below makes it very easy to code up theme options.
Link to plugin
Documentation is included when you activate the plugin.

Categories