Hi, I want to add a submit button to the end of the search box because I think most people expect to have a button to click rather than press enter. I’ve actually managed to add the button by modifying searchform.php but I still have two problems. Firstly there is a gap between the search box and the button (see image - http://img222.imagevenue.com/img.php?image=05709_search_122_976lo.jpg). Secondly, I’d like to use an icon instead of text. I know Travelify uses Genericons and that there is a genericon search icon (genericon-search), but how do I add it to the button? Can it be styled in CSS or do I have to add some sort of function in functions.php?
I should add that I modified searchform.php by adding some code from Dazzling whch seems to work, but Dazzling also has a search form function in extras.php which Travelify doesn’t have. Any advice on this greatly appreciated.
@jwhittaker
I need to see your website in order to provide you with any CSS. These are custom implementations and I don’t know what code you have added on searchform.php or elsewhere.
But one thing I know for sure is that you can simply replace “Go” with “Search” in the same searchform.php.
Actually I changed ‘search’ to ‘go’ just to try it. My site’s on localhost unfortunately. All I did was change the code in searchform.php as follows:
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" class="searchform clearfix" method="get">
<label><input type="text" placeholder="<?php esc_attr_e( 'Search', 'travelify' ); ?>" class="s field" name="s"></label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Go', 'submit button', 'travelify' ); ?>">
</form>
I haven’t added or changed anything else search related except to move it to the header.
At first I was a bit confused with your question. Sorry about that.
You can use code like this to add search icon using Genericons:
.search-submit:before {
content: '\f400';
font-family: 'Genericons';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 2px 3px;
color: #fff;
border-radius: 2px;
font-size: 14px;
*overflow: auto;
*zoom: 1;
*display: inline;
}
I am not 100% if the right element will be targeted as it would be much better to see it on a live site but the basic idea would be like I have mentioned above.
Thanks Aigars. It didn’t work unfortunately. I think it’s the right element because changing some of the code did affect the button, but only when the ‘before’ was removed. I found something on the net to the effect that ‘before’ and ‘after’ doesn’t work with input. I changed the code in the searchform and used <button> instead and managed to get the icon to display but then couldn’t get it to align with the box. I’ll take another look at the code in the Dazzling theme because iirc <button> was used there in some way.
Dazzling uses inline font icon <span class="glyphicon glyphicon-search"></span> which is something that not going to work for Travelify.
However, if you have Jetpack social icons enabled you will have access to Genericons CSS, so you can use this code instead
<span class="genericon genericon-search"></span>
If you don’t have Jetpack enabled then you will have to add this code to Theme Options - Other - Custom CSS
.genericon {
font-size: 16px;
vertical-align: top;
text-align: center;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
display: inline-block;
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
speak: none;
}
.genericon-search:before { content: "\f400"; }
This should get the job done.
Sorry Aigars, I just couldn’t get your code to display the icon. Only by going back to <button> could I get it to work. I managed to get the positioning almost perfect - http://img45.imagevenue.com/img.php?image=71825_search2_122_412lo.jpg - but the code was such a fudge that I’ll either just use text or scrap the button altogether.
I can’t spend any more time on this but thanks for you help, I greatly appreciate it.
It looks Ok for me in screenshot you just posted.
Don’t spend too much time on it, if you are still having problems when your website is live, just let me know and we will work for there. It is so much easier to work when you see actual HTML and CSS in place.
I had to play around with padding and borders of both the icon and background to get it like that and it’s still not pixel perfect, but you’re right, I can always revisit this at a later date if I want. Thanks again.
