- This topic has 37 replies, 4 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
April 12, 2020 at 9:19 am #1236353DavidStaffCustomer Support
Hi there,
you can use a Hook Element to add your search function:
https://docs.generatepress.com/article/hooks-element-overview/
The hook to place it there is the
inside_navigation
hookApril 12, 2020 at 12:35 pm #1236524AnonymousThanks David. Can you elaborate on its function when the option “Enable navigation search is enabled” as well as its configuration?
April 12, 2020 at 8:00 pm #1236764TomLead DeveloperLead DeveloperThe method David described is separate from the Navigation Search option, so you would keep that turned off.
Then you can insert and style a static search box directly into the navigation.
April 13, 2020 at 8:06 pm #1238060AnonymousHi Tom,
Which option should be used to achieve the outcome?
April 14, 2020 at 2:27 am #1238304DavidStaffCustomer SupportI would do the following:
1. Disable the Navigation search.
2. Create new Hook Element – selecting theinside_navigation
hook. Add the code provided here to generate the form:https://developer.wordpress.org/reference/functions/get_search_form/#comment-367
3. Set Display Rules to entire site.
This will place the form inside the same container as the Navigation. It will require some CSS to position – which we can help with but will need to know what layout you’re using e.g Navigation as Header.
April 14, 2020 at 12:10 pm #1239113AnonymousThanks David. The code doesn’t render correctly. See https://imgur.com/a/24UARub
April 14, 2020 at 4:13 pm #1239282DavidStaffCustomer SupportAah my apologies – edit the Hook element and check the
Execute PHP
option.April 14, 2020 at 9:18 pm #1239452AnonymousHi David,
That required the following line of code to be commented which is undesirable.
define('DISALLOW_FILE_EDIT',true);
What other options are there without needing to comment out the code below?
April 15, 2020 at 2:34 am #1239652DavidStaffCustomer SupportCouple of options:
1. Use this filter to allow PHP to be executed in Hooks only:
https://docs.generatepress.com/article/generate_hooks_execute_php/2. Use a function in your functions.php
https://docs.generatepress.com/article/using-hooks/
So your code would be something like this:
add_action( 'generate_inside_navigation','tr_navigation_search' ); function tr_navigation_search() { ?> <form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div> <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label> <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" /> </div> </form> <?php }
April 15, 2020 at 11:20 am #1240545AnonymousThanks David.
The recommendation for the first option is that it remains disabled.
How is the second option different?
April 15, 2020 at 8:34 pm #1240919TomLead DeveloperLead DeveloperHi there,
The second option is just custom PHP – it’s what the Hook Element writes for you. The result is the same as using a Hook Element, but it doesn’t require you to turn on file editing.
April 15, 2020 at 11:55 pm #1241040AnonymousThanks for the clarification Tom.
What’s the recommended change for the search box and submit button to appear where the search magnifying glass appears when it is enabled in the navigation i.e. to replace the magnifying glass with the search box and submit button?
April 16, 2020 at 9:21 am #1241834TomLead DeveloperLead DeveloperThat’s what the code should do, we’ll just need to style it with CSS once it’s added.
April 16, 2020 at 12:08 pm #1242020AnonymousSorry, I should have been clearer.
The search box and submit button now works. What is the recommended CSS style so that it appears in the same location as the magnifying glass as it’s part of a list at the moment?
April 16, 2020 at 4:08 pm #1242225DavidStaffCustomer SupportThis is the basis of the CSS:
.inside-navigation { display: flex; } .inside-navigation form { order: 5; }
-
AuthorPosts
- You must be logged in to reply to this topic.