WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Using the search box in different theme? (22 posts)

  1. metteonline
    Member
    Posted 11 months ago #

    Is it possible to use the search box from Twenty Thirteen in my own theme - child theme of Magazine Basic?

    I 've been searching for a plugin exactly like this one, expandable, on the navigation bar.
    Can I copy the code somehow?

  2. paulwpxp
    Font hero
    Posted 11 months ago #

    That's actually CSS :focus pseudo class, and also with CSS3 transition for the slide out effect. You can take a look at theme stylesheet directly, see how it works and apply it to your own.

  3. sscalifornia
    Member
    Posted 10 months ago #

    I wanted to do this for myself and figured it out but for some reason it doesn't work well in safari. That's also true of the twenty thirteen theme. The icon is way off of the right side. Does anyone know why this is and how to fix it?

    @metteonline you need to find out the class of your search input. Use firebug for this. Mine was .search-input yours could be too, but check.

    The css for it is:

    .search-input {
    	background-color: transparent;
    	background-image: url(images/search-icon-white.png);
    	background-position: 5px center;
    	background-repeat: no-repeat;
    	background-size: 24px 24px;
    	border: none;
    	cursor: pointer;
    	height: 30px;
    	margin: 0;
    	padding: 0 0 0 34px;
    	-webkit-transition: width 400ms ease, background 400ms ease;
    	transition: width 400ms ease, background 400ms ease;
    	width: 0;
    }
    .search-input:focus {
    	background-image: url(images/search-icon.png);
    	background-position: 5px center;
    	background-repeat: no-repeat;
    	background-size: 24px 24px;
    	background-color: #fff;
    	cursor: text;
    	outline: 0;
    	width: 230px;
    }

    Again, just make sure it's targeting your search input class. And if you want a custom search icon make sure you name it the same or change the image name above. Also make sure you don't have another css rule defining the width of your input.

    Hope this helps and if anyone knows a fix for safari that would be great.

  4. metteonline
    Member
    Posted 10 months ago #

    The thing is, I don't even know how to place the search box in the navigation bar (!) If I managed, I will try your css. Thanks.

    btw, you didn't provide a link to your site, but on my devices the search icon in Twenty Thirteen looks the same on all browsers (including Safari)

  5. sscalifornia
    Member
    Posted 10 months ago #

    To put it into the nav bar, you'll need to open up header.php, find where the nav bar is and add:
    <?php get_search_form(); ?>

    You could wrap it in a div like this:
    <div id="search-form"><?php get_search_form(); ?></div>
    to have more control over it.

    By the way the twenty thirteen icon does look the same in safari, it's the positioning of it that is off. When the search is opened it moves to the right place but when it's closed it does a weird jump. Hope this helps.

  6. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    Make sure than any changes to theme files are made ONLY in a child theme - http://codex.wordpress.org/Child_Themes - otherwise they will be overwritten when WP is updated. It's also imperative to have an unmodified copy of the default theme for troubleshooting purposes.

  7. metteonline
    Member
    Posted 10 months ago #

    @sscalifornia

    In my header.php I can place the search box anywhere but within the navigation bar. I don't know if it is some css that's causing this ...

    If you have the time, can you tell me where exactly to place it?
    The code for my nav bar is:

    <nav id="site-navigation" role="navigation">
    <h3 class="assistive-text"><?php _e( 'Main menu', 'magazine-basic' ); ?></h3>
    <a class="assistive-text" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'magazine-basic' ); ?>"><?php _e( 'Skip to content', 'magazine-basic' ); ?></a>
    <?php echo str_replace ( '</li>', '', wp_nav_menu( array( 'theme_location' => 'primary', 'echo' => false ) ) ); ?>
    </nav><!-- #site-navigation -->
    <nav id="site-sub-navigation" role="navigation">
    <h3 class="assistive-text"><?php _e( 'Sub menu', 'magazine-basic' ); ?></h3>
    <?php echo str_replace( '</li>', '', wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'secondary-menu', 'echo' => false, 'fallback_cb' => false ) ) ); ?>
    </nav><!-- #site-sub-navigation -->

    Thank's for your patience.

    - and yes, I'm doing it in my child theme :)

  8. sscalifornia
    Member
    Posted 10 months ago #

    Without being able to see it and not knowing where you want it to show up in the bar, I would say you place it after the last element it the first nav. Say you want it flush right like in the 2013 theme, you could do:

    <nav id="site-navigation" role="navigation">
    
    <h3 class="assistive-text"><?php _e( 'Main menu', 'magazine-basic' ); ?></h3>
    
    <a class="assistive-text" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'magazine-basic' ); ?>"><?php _e( 'Skip to content', 'magazine-basic' ); ?></a>
    
    <?php echo str_replace ( '</li>', '', wp_nav_menu( array( 'theme_location' => 'primary', 'echo' => false ) ) ); ?>
    
    <div id="search-form"><?php get_search_form(); ?></div>
    
    </nav><!-- #site-navigation -->
    
    <nav id="site-sub-navigation" role="navigation">
    
    <h3 class="assistive-text"><?php _e( 'Sub menu', 'magazine-basic' ); ?></h3>
    
    <?php echo str_replace( '</li>', '', wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'secondary-menu', 'echo' => false, 'fallback_cb' => false ) ) ); ?>
    
    </nav><!-- #site-sub-navigation -->
    #search-form{
    float:right;
    }

    The second nav appears to be a mobile nav. Then you can use the css above on the input. If it's not working make sure you're targeting the right input class. Good call on the child theme by the way. Hope this helps.

  9. metteonline
    Member
    Posted 10 months ago #

    Well, I'm almost giving up ...
    I placed the searchform exactly as you suggested. And it shows up just underneath the nav bar ... - just as I tried to place it between every element of the nav in my first try but either it shows up just on top or below the navigation.

    Sorry, can't provide you a link as I can't open the site to the public yet, and it doesn't seem possible to attach an image of the site in this forum ... Thanks anyway

  10. sscalifornia
    Member
    Posted 10 months ago #

    Well, I hate to have you give up. I understand you not wanting to post a link here, but if you want to send me a link to your site, with your the search bar in there, on the contact form [redacted] I can take a look and try to help you further.

  11. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    @sscalifornia - please keep help on these forums per
    http://codex.wordpress.org/Forum_Welcome#Helping_Out

  12. metteonline
    Member
    Posted 10 months ago #

    No worries, I've removed the Coming Soon mode and you can now see where the search box is placed when I put the code exactly where you suggested.

    View it here

    Thanks again for your help. It's is highly appreciated.

  13. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    First, your child theme style.css file should contain ONLY changes, not a copy of the entire parent theme style.css file.

    Right now, none of the code in your child theme is working because of this stray code here - the wid:

    wid
    /* =Normalize.css v2.1.0 by Nicolas Gallagher - http://necolas.github.com/normalize.css/

    Remove that and then add the margins to the CSS here:

    #search-form {
        float: right;
        margin-right: 5px;
        margin-top: -33px;
    }
  14. sscalifornia
    Member
    Posted 10 months ago #

    First of all, I wasn't taking this to a private area to discuss it. He didn't want to post his site and I didn't want to post my email. Secondly you don't need to use negative margins to place the bar up there.

    @metteonline here's what you need:

    .menu-main-container {
        background-color: #2B2139;
        float: left;
    }
    #search-form {
        float: right;
        margin-right: 20px; /* to match your other right gutters */
        background-color: #2B2139; /* if you want the purple across the bar */
    }
    #site-search {
            background-color: transparent;
    	background-image: url(images/search-icon-white.png);
    	background-position: 5px center;
    	background-repeat: no-repeat;
    	background-size: 24px 24px;
    	border: none;
    	cursor: pointer;
    	height: 20px; /* if you want the input box the same size as the bar */
    	margin: 0;
    	padding: 0 0 0 34px;
    	-webkit-transition: width 400ms ease, background 400ms ease;
    	transition: width 400ms ease, background 400ms ease;
    	width: 0;
    }
    #site-search:focus {
    	background-image: url(images/search-icon.png);
    	background-position: 5px center;
    	background-repeat: no-repeat;
    	background-size: 24px 24px;
    	background-color: #fff;
    	cursor: text;
    	outline: 0;
    	width: 230px;
    }

    Make sure your icon image names are the same as the ones in the css. Hope this resolves your issue and feel free to ask if you need anymore help.

  15. metteonline
    Member
    Posted 10 months ago #

    Thank you guys!

    I had to use some of both suggestions to make it work.
    I gave the site-search a max-width so the box didn't come on top of the navigation when viewed horisontally on a ipad.

    @ WPyogi, still learning good WP habits, my child style.css is now almost clean. And I would never have found out about the stray wid code by myself. Didn't understand why the css didn't work on my search box.

    @ sscalifornia, thanks making the animation so easy. I literally just had to copy and paste.

    I'll put the coming soon mode back on in a day or so. Until then you can view the result on the site.

    I guess this topic is now resolved :)

  16. metteonline
    Member
    Posted 10 months ago #

    Oh well, just as I thought everything was perfect, it is not ...

    Thanks to WPyogi and sscalifornia I managed to place my search box nicely in the navigation bar. But the css of #site-search of course also affect the search box in the mobile version (the site is responsive) which is really awkward.

    If you guys are still there - or anyone else - do you know how to style the search box/#site-search on the desktop version seperately from the mobile version?

    My site will stay open a little longer, try view the search box on a mobile device or drag the browser window.

  17. sscalifornia
    Member
    Posted 10 months ago #

    This can be done with media queries. I.E.

    @media only screen and (min-width: 0px) and (max-width:760px){
    .class {
    	style-name:style;
    }
    }

    Just set the min a max widths to the screen size you're trying to target. You can do as many as you need. Just replace the .class with your class or id and style with your new styles, like any other css.

  18. metteonline
    Member
    Posted 10 months ago #

    Of course ... I got so used to getting help so I forgot to think (!)
    Problem yet again resolved. Cheers :)

  19. sscalifornia
    Member
    Posted 10 months ago #

    No problem, glad to help.

  20. whereskarlo
    Member
    Posted 6 months ago #

    If anyone is still listening I would like to hijack this thread quickly. I am using WooCommerce and TwentyThirteen and want to add post-type to the search box.

    This is what I want to add:
    <input type="hidden" name="post_type" value="product" />

    However, search.php doesn't contain the definitions for the search function. I couldn't find it in search.php either. Where can I modify the form <?php get_search_form(); ?> is calling?

  21. whereskarlo
    Member
    Posted 6 months ago #

    Never mind. Adding searchform.php and following the official instructions for creating the form solved my problem.

  22. mielie007
    Member
    Posted 4 months ago #

    Hi

    I found this post because I would like to incorporate the search bar from twenty thirteen theme in my child theme based WP Advocate.

    I have inserted the following code into my header.php file.
    <?php get_search_form(); ?>

    and I have updated the style.css on the child theme with the things that I want to overwrite on the original theme. I also copied the image files from the twenty thirteen theme.

    @import url("../wp-advocate/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    /* Remove Text display on home page */
    .home .entry-title {
    	display: none;
    }
    
    /* Mystickymenu */
    .myfixed {background-image: none !important;}
    
    /* Change Transparent image on theme */
    #inner-header-wrap {
    		background-image: url(library/images/trans-b2.png);
    	}
    
    /* Search bar in menu from Twentythirteen theme */
    
    .menu-main-container {
        background-color: #2B2139;
        float: left;
    }
    #search-form {
        float: right;
        margin-right: 20px; /* to match your other right gutters */
        background-color: #2B2139; /* if you want the purple across the bar */
    }
    #site-search {
            background-color: transparent;
    	background-image: url(images/search-icon-white.png);
    	background-position: 5px center;
    	background-repeat: no-repeat;
    	background-size: 24px 24px;
    	border: none;
    	cursor: pointer;
    	height: 20px; /* if you want the input box the same size as the bar */
    	margin: 0;
    	padding: 0 0 0 34px;
    	-webkit-transition: width 400ms ease, background 400ms ease;
    	transition: width 400ms ease, background 400ms ease;
    	width: 0;
    }
    #site-search:focus {
    	background-image: url(images/search-icon.png);
    	background-position: 5px center;
    	background-repeat: no-repeat;
    	background-size: 24px 24px;
    	background-color: #fff;
    	cursor: text;
    	outline: 0;
    	width: 230px;
    }

    But my page doesn't display the spyglass icon or hide the text input field. I the the standard search field with the standard search button.

    Please could somebody help me to sort this out.

Reply

You must log in to post.

About this Topic