Build Your Own Business Website header image

How to Add & Style Google Custom Search

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to add and style Google custom search by placing the custom search code in a text widget and styling it using custom CSS. We also demonstrate the code used on byobwebsite in a custom function.

Video Transcript

Member: I do have one other question.

Rick: Sure.

Member: If you can look at this screen again, she’s going to require… no, that search bar at the top is not the one that I need. I need the custom Google Search because she’s got websites that aren’t WordPress so I need to direct to those. But will I be able to fit that into that white space? Is there enough styling that I can do that or is that…

Rick: How did you put this in in the first place?

Member: Pardon me?

Rick: How did you put this in in the first place?

Member: It’s just in the widget, in your header widget.

Rick: Okay so you used the… oh, it’s a text widget. Sure, it’ll do exactly the same thing. Yeah, you…

Member: Except how do I get it that small because the one that they provide has a border and a background behind it and I only need just the bar and the button.

Rick: Well, see this is what mine looks like. That’s what I have.

Member: Should I just have a background behind it?

Rick: This is exactly what mine looks like. I styled the search button myself and I probably have some additional styling associated with this. Let’s just look and see what styling I have. Let’s see, let’s find the search. Okay, that’s my admin bar search. BYOB Custom Search… okay so you know, we’ve got a little bit of… I specified the font size and I specified the height of the text input and I specified the color of the button and the color of the button text and the hover. And you know, gave a little bit of margin but that’s all. And so it’s definitely possible fr you to reference those search elements. I have this stuff inside of a div called byob custom search and then I just referenced the generic input types. So let’s see, I think that’s under templates. I should just… I guess it isn’t. Let’s see, search. Okay, I do have it under templates. Display results… search for it using the search box to the right. Okay, let’s see. No, that’s not it. Okay, I have it closed… let’s see. It could be under custom functions php. Yeah, that’s where it is alright. That’s the… to the admin toolbar. What’s the next one? Okay, here it is.

So yeah, I just wrapped that thing in this div class byob custom search and then I just used the generic Google Custom Search text and then those styles just applied to it. Would it be helpful for you if I pasted this in the forum too?

Member: Yes please.

Rick: Okay. So this is not how I get the search in the admin bar which I don’t think you really care about. That is a litle bit more complicated. But this is how I put the… this is how I manually… or this is how I programmatically put the search bar on my site. And so copy that… I wish I had just hit add topic. So that’s this thing here, right?

Member: Yes.

Rick: Add topic. Add Google Custom Search Rick’s code. Okay so my php code, I’m just going to paste here and then… oh well… and then my css code, I made a mistake here. That’s not that. It’s this, yeah. And then my css code, I’m going to paste here, custom css.

So that’s the code that produces this, that you see there. And obviously, it doesn’t take up very much room, right?

Member: No, no. Great. Perfect.

Rick: Okay?

Member: Thank you very much.

Rick: You betcha.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 comments… add one
  • Toby Elwin February 19, 2013, 5:52 pm

    What about the Google CSE that offers a Two page layout, where the search opens a page within your site where search-results is a page you created with a query parameter embedded in the url?

    I am trying to work with their code in the search box, then their code in the “search-results” page, but having no luck.

    I get leery with php and css coding, especially since I plan to upgrade from Thesis 1.85 to 2.x very soon and do not want to lose the work.

    My question: do any of the Google custom search directions make it easy to build the CSE on WordPress 3.5 and will also work when I do get the gumption (and the time) to upgrade to 2.x?

    • Rick Anderson February 20, 2013, 5:49 am

      Toby, that’s the type of CSE we have here at BYOBWebsite. Yes, the directions are fairly easy to follow and they work just fine in 3.5.1. If you use a text widget to create the search box you only need a fairly simple function for the search page. When you move to Thesis 2 it will be easier.

Leave a Comment