WordPress.org

Ready to get started?Download WordPress

Forums

Travelify
[resolved] Add search bar to header (15 posts)

  1. maidanet
    Member
    Posted 11 months ago #

    I'm trying to add a simple search bar to the header.

    I have a child theme created. I've added:
    travelify-child/library/structure/header-extensions.php

    Now in header-extensions.php there is a comment:

    **
     * Shows Header Part Content
     *
     * Shows the site logo, title, description, searchbar, social icons etc.
     */

    Is there an option to enable the searchbar?

    And, in lieu of that, where can I put <?php get_search_form(); ?> in that file to show up where the social icons would normally be?

  2. Jesin A
    Member
    Posted 11 months ago #

    Create a functions.php file inside travelify-child and place the following code

    add_action('travelify_header','header_search');
    function header_search()
    {
    get_search_form();
    }

    After this the search box will appear in the HTML code but will not be visible because of improper alignment.

    To align the search box properly add the following code to the style.css of your child theme

    #branding input.s {
        border: 2px solid;
        cursor: text;
        text-indent: 10px;
        width: 200px;
    }
    #branding .searchform {
        float: right;
        margin: 50px 50px 0;
    }
    #branding input.s:focus {
        border: 2px solid;
        width: 300px;
    }
    #branding .assistive-text {
        position: static !important;
    }
  3. maidanet
    Member
    Posted 11 months ago #

    Thank you so much, Jesin.

    I can see it in the HTML, but I still can't see it on the page. When I inspect the element, I can see that it is being placed on the very top of the header. I can't see what's overwriting the placement.

    http://www.finditindenver.com

    Also, just out of curiosity, why doesn't the code work if you put it in travelify-child/library/structure/header-extensions.php? I tried it, but no go.

  4. Jesin A
    Member
    Posted 11 months ago #

    You're welcome!

    That is because there is an error in the style.css of your child theme. You've placed the CSS code inside a.readmore {}

    The code after /* Readmore */ should be

    a.readmore {
    	border: 1px solid #002E4D;
    }
    #branding input.s {
        border: 2px solid;
        cursor: text;
        text-indent: 10px;
        width: 200px;
    }
    #branding .searchform {
        float: right;
        margin: 50px 50px 0;
    }
    #branding input.s:focus {
        border: 2px solid;
        width: 300px;
    }
    #branding .assistive-text {
        position: static !important;
    }

    Also, just out of curiosity, why doesn't the code work if you put it in travelify-child/library/structure/header-extensions.php? I tried it, but no go.

    WordPress checks only the files mentioned in the template hierarchy inside the child theme directory.
    So the file you placed inside the child theme directory will not even come into the picture as WordPress "includes" only the files mentioned in the template hierarchy.
    Using a child theme only these files can be overridden (with the exception of functions.php as WordPress loads both the child theme's and the main theme's functions.php).

    Hope I cleared your doubts :-)

  5. maidanet
    Member
    Posted 11 months ago #

    I apologize for taking so long to reply, but thank you so much for finding that I was nesting the css inside another element declaration.

    I asked about the files because I have used other themes that had nested php files that I was able to change via the child theme. :)

    Thank you again for your help!

  6. Jesin A
    Member
    Posted 11 months ago #

    You're welcome!

    Please mark this thread as resolved if it solves your problem.

  7. maidanet
    Member
    Posted 11 months ago #

    This is partially-related, but could I use this method to put a search box in my featured text box on the home page?

    Do you know where the files are for the slider featured image?

  8. Jesin A
    Member
    Posted 11 months ago #

    Where is the "featured text box", is it the image of the buildings or the weather that is displayed beneath it?

  9. Jesin A
    Member
    Posted 11 months ago #

    Add this PHP code to the functions.php file of your child theme

    function featured_search()
    {
    get_search_form();
    }
    add_action('travelify_header','featured_search',20);

    Then this to the style.css of your child theme

    #branding .searchform {
      float: right;
      position: relative;
      right: 30px;
      top: -80px;
    }
  10. maidanet
    Member
    Posted 11 months ago #

    Jesin, thank you again.

    The css seems to be conflicting with the first search form in the header next to the site logo. I will need it in both places. Is there another place that the code can be injected with a different ID?

  11. maidanet
    Member
    Posted 11 months ago #

    I tried putting this in the functions.php:

    function featured_search()
    {
    	get_search_form();
    }
    add_action('travelify_main_container','featured_search',20);
    
    ?>

    and this in my style.css

    #container .searchform {
      float: right;
      position: relative;
      right: 20px;
      margin-top: -440px;
      z-index: 999;
    }

    I think I need to do additional styling underneath, but I think that should work...

  12. javierdavid2014
    Member
    Posted 8 months ago #

    Hi, I'm new at wordpress I also want to add an adavanced search bar to the header in order to show it in all my pages, I am using Responsive Diectory Theme by presspremium with nexia child theme. Is really important to my to be able to do this and also customize the search bar as I want, how can I do this? I tried using the code y above but it didn't work out.

  13. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    @javierdavid2014 - this forum is for a specific theme - "Travelify" - see that at the top of this page? - and since you are using a commercial them, you need to ask the developers for help. Commercial themes aren't supported on these forums.

  14. selvacsc
    Member
    Posted 4 months ago #

    Hello sir..
    I have search.php file and i want to display search box in header with responsive view.. I dont know, how toad.. anybody know, plz help me..

  15. theatereleven
    Member
    Posted 4 months ago #

    It's easy to place a search field anywhere on your site. Simply place this code in the template file:

    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
    	      <div class="blog-search">
    		  <input type="text" class="header-search-field" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
    		  <input type="submit" class="header-search-submit" value="Search" class="footer-button" />
    	      </div>
    	    </form>

    Then via CSS styling, adapt for responsive. You'll notice above that I added classes to the field and submit button.

    Hope that helps!

Reply

You must log in to post.

About this Theme

About this Topic

Tags