How Can I Add a CNN.com Search Box To My Web Site?

For the most part, it’s true that if you can do something on one Web page, you can do it on any Web page. Duplicating the basics of a site search is one of the easiest too. Turns out that most site searches are done with what’s know as a “method=get” form. What this means is that the search term shows up in the URL of the search results page. Copy that URL and you have your filled-in searches, but unwrap that search language and you can create your own search box with just a few lines of HTML.

You will need to do a little bit of fiddling with code, however, so if your Web site page doesn’t let you work with plain text (for example, you couldn’t do this on a Facebook business page) then you might be stymied in your efforts. But if you’re running on WordPress, for example, you can indeed go into ‘text’ mode and paste in the HTML desired.

CNN is an interesting site in this regard because their search tool is a lot more sophisticated than it may seem at first blush. Go onto the CNN.com home page, click on the magnifying lens icon on the top right, and request a search without entering a search query term. You end up here:

You can slice and dice search results quite a few ways, as shown, both by section of the CNN site and by type of media. Not only that, but you can constrain searches by date too, if you want to see what was published last year or even two days ago only about a specific topic.

Enter a search term like “Abraham Lincoln” and you’ll get a variety of results:

What’s far more important is to notice what’s in the address bar for this search results page. It looks like this:

https://www.cnn.com/search?size=10&q=abraham%20lincoln

Everything after the “?” are name=value information for the CNN site search engine. You can see size=10 (which determines how many results you get per page) and q=abraham%20lincoln which is, of course, the search pattern with spaces replaced by the sequence %20. That’s your pre-filled out search URL, so you can create a link like this:

<a href="https://www.cnn.com/search?size=10&q=abraham%20lincoln">Abe Lincoln @ CNN</a>

Here’s that button so you can click and see how it works: Abe Lincoln @ CNN.

Since you also know that the search is given to the URL ‘https://www.cnn.com/search’ and that the actual search pattern is known by the field name ‘q’ you can also create a simple search box too:

<form method="get" action="https://www.cnn.com/search">
Search CNN: <input type="text" name="q" />
</form>

That’s it. Again, here’s the working code, ready for you to try:

Did you do a search? That’s it. Now, to make things a bit more fancy, you could add a hidden field that passes along the results per page “size” variable:

<input type="hidden" name="size" value="10" />

So that’s everything. But what about all those categories and specific searches? If we go back to the CNN site and constrain the search to Entertainment and look just for photos, the resultant URL tells the story:

https://www.cnn.com/search?size=10&q=abraham%20lincoln&category=entertainment&type=gallery

In other words, categories are passed as category=value (in this instance, entertainment) and the type of search result is constrained by type=value (with our value being gallery).

Now you can build a link like this: The latest photos of Tom Cruise at CNN.

How does that work? I’ll let you figure out how to put all the pieces together at this point!

Pro Tip: I’ve been writing about HTML and Web page design for quite a while. I even wrote a couple of books on the topic. Definitely check out my HTML and Web design help area while you’re here. Thanks!