[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]
[tentblogger-vimeo 15994787]
***UPDATE – The above video is out of date since the iFrame system that Google CSE used to use is now old and deprecated. I have added a visual walk-through at the end of this post for a most up-to-date version!***
[Like the quality of the screencast? I use the Screenflow app for it!]
Challenge Type: Feature, Functionality
Time Required: 10-15 minutes
Impact: Big! Google’s CSE is awesome. Period. Not to mention that having a Search Box is a good idea anyway! And honestly, why not have the most powerful search engine technology powering your search on your blog?
Have you ever wanted to add a really robust search engine to your own blog? You can do that easily with Google’s Custom Search Engine Tool!
In fact, the video above walks you through that entire process in less than 10 minutes!
Here are some additional things to take note of:
- I’m using WordPress. Here’s why.
- I use CSE (Custom Search Engine) because it’s easy to create and setup, familiar to the end user, and the results are very relevant and valuable.
- You can style the look easily!
Pretty sweet, right?
Let me know if you’ve accepted the challenge and then link to your site with the new search engine!
[Interested in more thoughts about CSE? I wrote a post here about another option and performance issues as well as a tip on how to create a "Network-Wide Google Custom Search Engine". Sweet!]
Finally, I thought I’d share the reason why it would be best to pay for your CSE ($100.00 per year) if you can justify the cost at some point. Your goal, as much as you can control it, is to keep your visitors on your blog.
By having advertisements on the search results you give them “escape routes” to other content. One might argue that it pays you if they do but I’m of the camp where I’d rather they stay on my property and find value here, thus endearing them to my content and the community here, which I think pays off in the longer run.
Updated: Visual Walkthrough for Installing Google CSE
As I mentioned above the video is outdated and I didn’t have the time to make a new one – but I captured the process visually for your use!
It’s quite simple and here are the steps:
Head over to Google’s CSE Tool and click Create a Custom Search Engine.
Time to get started!
On the left you’ll see an option to start the creation of a New Search Engine – feel free to click that!
You might have some other search engines listed here as you build out other blogs that you’re working on. On a sidenote I think that Google CSE is a fairly complete solution and would recommend it for most blogs, depending on their unique needs of course.
The choice is up to you! There are definitely some other alternatives but none as robust as this option in my humble opinion.
The next step is to fill out the specifics of your Google CSE. You’ll want to input a name, description, and then the domain.
Just one blog to search or more than one?
For the Sites to search: area you’ll just want to start with your one blog – as you can see you can input more than one if you wish! But let’s start simple, shall we?
Click next and then next again and then find the Change Look and Feel button to get to the good stuff:
Nothing here for you right now...
There we go!
On the next page you’ll want to choose Two Page as the format and then style it as you wish. I recommend not doing anything for now – you can customize the design and style a bit later after you set it up.
Almost there...
Now you’ll have to enter the Search Results page that you’ve created in WordPress:
As you can see I created a WordPress page here on TentBlogger called “Search Results” with the post slug of /search-results/ – make sure you get this right as it won’t work otherwise!
You can even add your Google Analytics code in there to provide even more tracking for your Google CSE if you wish. I do have this in place for metrics and advanced analytics if you were wondering.
Finally, grab the code! You’ll want to put in a Text Widget the information in the first box and then the second set of code in your WordPress’ page:
A nice simple text widget.
And…
WordPress Page called "Search Result" with the post slug of /search-results
Then that’s it!
You’ll want to test, of course (and it might take a second, especially on a new blog that might not have been indexed yet):
So pretty! So usable! So... Google!
And that’s it!
You’ve done it – congrats! Let me know if you have any questions.
[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series. Check out the rest here!]
Going to implement this on the radio station site that I manage. Very nice! FREE is awesome too!
thanks buddy! i saw the tweet. nice!
No problem. Anything to make our site smoother and easier to use. I’ve been tracking stats with Google Analytics (which set up because of your mentioning it on your other properties). I am proud to report that our visitor amount has gone up since i’ve been using the tips you’ve given here. Thanks!
and THAT is what i LOVE to hear!!!
Tried it. Every time I tried to paste the code into my sidebar widget, it deleted everything between the ‘s. Will try again later.
really? that’s odd… did you use text widget?
Yeah. As soon as I clicked “save” it wiped the body of the code. Darn PC.
doh!
I was just about the ask in the forum boards how to do this. Will try to work on it soon!
Bam! Thanks so much. Seeing it through the video is sooo much easier than writing it out and putting up pics. This was really, really helpful.
Here’s what mine looks like. Simple: http://www.modernekklesia.com
nice job. easy stuff.
sweet! let me know when it’s up!
Fantastic tutorial on adding the search box and page. I have done this before but haven’t done it for WordPress so this will definitely come in handy. Thanks for making this!
sweet! enjoy.
I’m curious, why would you use Google search instead of just using the built-in search capabilities of WordPress? The WordPress search is free, already built-in to your site, has no ads, and the search results are fully customizable as part of your WordPress theme. Could you talk about some of the cons with native WordPress search?
Ben,
it simply isn’t that good out of the box. It’s been noted by the community at large that it might just be one of the weakest features that wordpress has to offer. there are ways to improve it though (see here).
it generally does need to be improved.
and so the next question is, “is this a better option than the already-super-awesome Standard Theme search?”
by the way, i haven’t commented over here before, but i’m really digging the premise of this site John. thanks for going with your gut on this one…
yes. or i’d be using it, right?
the standardtheme search is built off of wordpress’s… … perhaps i need to look into making that better….?
Done.
I noticed since transitioning to the Standard Theme (best theme ever!) my width was off on my results page. So instead of just changing the px width I though I would just follow along with your tutorial.
Good stuff. Thanks for all the shared wisdom.
sure thing adam! enjoy!
oh well. this doesn’t like me too much. it just kicks the search by to my home page with a mess in the url.
how did i mess this one up?
hmm. forget the right address for the results?
http://grab.by/6WGc
http://grab.by/6WFV
http://grab.by/6WG1
What looks wrong?
ah. you need some pretty permalinks.
got a resource or post you can refer me to Oh Master Jedi?
http://cl.ly/a9637903425e50b8dc2a
it’s in your settings in your dashboard.
fixed. but why isn’t the search page reflecting the width edit?
http://grab.by/6WMF
hah. it may have a minimum
Thanks for the post, John. I just added this to http://www.dustinsams.com, a friend of mines blog that I help maintain.
This search feature is already WAY better than the original.
sweet! great move! that was quick!
Dustin, I’m using the same wordpress theme on the radio station site I manage. Mine looks a bit different though. http://www.wngrradio.com
you’re killing it!
I’d watch that video but my university doesn’t like it: http://bit.ly/brNCBV LOL.
AHHAHA. and with my daughter’s cute innocent face…….
I know – I think that detail sets the scene perfectly.
hahah.
it’s functional!
http://www.davidnormanblog.com
good for you!
Looks like you need to change your width David. http://d.pr/iaEg
I’d love some help doing that. I’ve dropped it to 550 wide, but it didn’t budge at all. Ideas?
regardless of what numerical value i give it in the code, it’s still showing about 795 px wide. has anyone been able to edit the width of the search results box?
I haven’t had any issues with it. I was able to change with out any problems.
i think you may have to change it in google
got it. i had to disable caching, edit, then re-enable caching…
should work properly now at http://www.davidnormanblog.com
sweet! great stuff.
Hm, I’m having the same problem. disabled caching, edit, re-enable.. but still 795px… I’m at chojames.com
interesting. i’d have to see your embed code.
Hi John,
Here are my 2 screenshots from the results page and widget..
http://oi56.tinypic.com/148fg9.jpg
http://i52.tinypic.com/2rd8bjp.jpg
I set the width as 100 for now, but I’ve experimented with anything between 500-700 as well.
I’m also using Wp-supercache.
interesting. try 500, empty cache, and let me see? there might be something weird with your template… you’re using wordpress…
what other plugins are you using?
Hey John,
So after some major trial and error, finally got it to work. After all, I only had to change the “Specify where you want the advertising to be placed” from google to “Top&Right” -> “Top&Bottom”. Still not sure how that changed anything, but it works now. Thanks for such useful post & congratulations on your new born!
James
Awesome. It’s now on my site. I will have to mess with the colors a little bit.
sweet! great job!
Trying it out as a widget. Didn’t style it, I may do that later if I decide it’s a keeper there.
I’ll definitely put it somewhere.
http://www.freshroastcreative.com/blog/
word!
Is there any way to style it, I like the style of my current search box, you add this and it looks terribly plain and standard
Found it nevermind
Hey John! we can do the same thing but with Google Adsense. Have you tried that?
Thanks for the video.
of course!
Nothing can beat WordPress but it’s search function is not that good. So I switched to Google Custom Search few months ago… It’s superb…
great choice!
So, question. On the free version, do you get paid for clicks on the ads?
yes. you can make money via adsense for search.
Thanks…working on mine now after your vid
SWEET!
John – in Std Theme 2, is not a Google CSE?
standard uses native search capabilities.
Ok – thanks for the info
Great Tutorial – I just did it on my blog & it works great. Thanks.
sweeeeeeeeeeeeet!
John, I feel guilty not commenting on your post, thanks again, your blogs help!
:p lol great content.
Psst- u shud consider taking offerings after each posts of urs
mathew,
not a problem!
haha. i love what i do and i’m already compensated a lot..!
It doesn’t look like you are using Google CSE…..
oh, but i am…!
You are right. This was my bad. I didn’t see the “Google Custom Search” words in your search box, so assumed you were not using it.
I am assuming you were able to remove those words by paying Google the $100?
nope. still using the free version right now!
oh, and that’s because i did a little code myself.
It looks like the site has to get indexed before the search works???
not necessarily, but it has to index your site so give it some time.
Awesome. I just set it up. I like how the search results show up on the side bar too.
http://www.randrambles.com
Thanks!
great job!
So easy! Thanks John. I just added Google CSE to my sidebar via a widget.
When the designer is finished with the site, I’m sure it’ll look awesome.
awesome!
How do you monitor your GSE stats — just go to GSE site or do you use something else?
if you’re monetizing you can see it in adsense too. i use google stats as well.
Boom. Setup. Thanks.
Google has changed their options a little from the time of your video tutorial, but I found my way around.
Now to figure out how to style the darn “search” button. http://www.joinsomethingbig.org
sweet! congrats!
Finally found ten minutes to spare and got this taken care of. I had a little difficulty since they’ve changed some things since your video posted, but I think I have it working right. Check it out http://www.smalltownkidmin.com.
jared,
thanks man. i’ll have to take another look…
ALL: I updated this blog post with a visual walkthrough… thanks for those that mentioned it had changed…!
You’re always on the ball. Thanks for the updated instructions.
well, thanks man. you reminded me…! have to go back and update old posts.. it’s part of the strategy!
Just did this on my blog. Thanks!
Also made a cuter 404 page today at your suggestion as well!
omg! i love the picture…! and your styling is impeccable.
yikes!
When would you recommend adding Google’s CSE to a site?
Using CSE wouldn’t be any good for a new site with limited content would it? Or does adding CSE mean your site becomes indexed more regularly by Google?
some think that it helps index and that would make sense. i put it on day #1… or close to that.
Yay, put it in on my new blog. Seems that I have not been indexed yet.
what’s the new blog?
had some issues and finally figured it out using chrome dev tools. For some reason the code I pasted into my search results page had generated in two places. These caused syntax errors, resulting in the word “Loading” with nothing else.
I removed the empty lines and it solved my problem.
Phillip,
Your solution worked for me as well while I’m getting my blog set up. Thanks for sharing it!
awesome! glad this worked!
This fix just worked for me too. Thanks for sharing!
sure thing!
Thanks Phillip. I found one obvious empty line and removed it. I am now getting a search results page but it does look odd to me. See http://www.aushiker.com/search-results/?q=Surly for an example. Is this how it should look?
Thanks
Andrew
looks about right…
Okay thanks but I am seeing the results in boxes whereas your results are displayed the same as on Google. Not a big issue but was curious as to why it was happening.
some CSS issues with your theme i believe.
Is Google custom search increases blogs earning….??
it can, yes.
Is there a way to add this google search box to to a search link in our navigation (Home/Blog/Port/Etc/Search) header?
Wonderful post again man!
you could, for sure!
Great posting! After deleting “empty lines” it finally works. Thanks a lot. Is there a way to exclude file-permalink from search-results to make it clean? Or just “depth=1″ (excluding subdirectories) in results?
hmm. not sure. i’d have to look into that. it should eventually “correct” itself and show the most relevant.
Okay, thanks. I will stop “file-seo” in blog-posts. This might help CMS to “correct” the results and make ‘em clean and relevant.
good stuff.
I got everything installed, the search-results page created, but if I do a search, I just get the page that opens up and says “loading”
I know that google has to index the site, but how long should that take?
It sounds like you have blank lines in your code. I had the same issue and it has been mentioned here before. If you search/scroll back you should find more details. All I did was scrolled through my code looking for blank lines (I had two) deleted them and bingo it worked okay.
All the best fixing it.
Thanks! That fixed it… sheesh… overlooked simple things! thanks @Aushiker
No worries.
dope!
Hi John — I have a question for you — my blog is running on your Standard Theme that I purchased — I just do not know how to create the following to make this Google search work: “As you can see I created a WordPress page here on TentBlogger called “Search Results” with the post slug of /search-results/ – make sure you get this right as it won’t work otherwise!”
How do I create that page? Also, I think when I was messing around with the search.php file on the Standard Theme, I deleted the original file info that was there — can you just send me or comment here the original code — and then how I can create that search page? Thank you so much for your help in advance!
ah. the newest standard theme has this built-in. have you checked out the support forums too?
Ok got it — I have not checked the forums because I do not think I bought the license to access them — but your new theme is really cool so I will just buy it, upgrade to it and the issue should be resolved automatically — I am very amateur when it comes to coding etc, I just know how to write lol