August 08, 2011

Blog Search Module

A Search module can be added to a blog's sidebar to allow for readers to search for posts and pages containing specific content. The blog search makes it easy to find archived posts.

Adding the Search Module

At Design > Content, select the Search category. Then, select the Search module and click the Add this module button. Finally, click Save Changes to update your blog. The Chroma and Avatar themes will have the search included by default.

Note: The Artistic, Calender, Three Column with Recent Photos, Four Column, and Timeline Layouts do not support the blog search.

Searching your blog

Enter the keyword in the search field on your blog and click Search. The search results will display within the main content column and match the look of your blog. The results include posts, pages, and comments. You can sort the results by Best Match or Most Recent.

An option to subscribe to the search results is also available.

Search Tips

To limit the search results, enter title: or content: before your search terms. For example, if you are looking for a post titled "My Summer Vacation to Paris", enter the search terms: title:Paris. The results will be limited to only posts and pages which include Paris in the title, but not posts and pages which mention Paris in the body of the posts and pages. Similarly, use content: to only search the content in the body of a post or page.

Quotes can be used to search for exact phrases. For example, if you are looking for a post where "Not all those who wander are lost" is quoted, enter the search terms: "all those who wander" to limit the results to only posts and pages which contain that exact phrase.

Style the Search Module

With the Unlimited and higher plans, the Search Module can be styled using the Custom CSS feature.

For instance, you can increase the width of search field by adding the code at Design > Custom CSS:

.module-search input[type="search"] { width: 100%; }

The width for the search field is 75% by default. You can increase the width to 100% to better fill your sidebar or set a custom pixel width.

To align the search button next to the search field, you can use the CSS:

.module-search input[type="search"] {
width: 175px !important;
float: left !important;
display: inline !important;

.module-search input[type="submit"] {
display: inline !important;

To edit the search header content, you can place content before or after the Search heading. In this example, the heading becomes Blog Searches.

.module-search .module-header:before { content: "Blog " !important; }
.module-search .module-header:after { content: "es" !important; }

You can adjust the text to better meet the needs of your blog, and you do not need to add content both before or after.

Advanced Templates: Search Module Tags

If you are using an Advanced Template set for your blog's design, you can copy the code below into your templates to include the blog search on your blog.

Why do I receive an error when searching my blog?

The most common cause of an error when searching is incorrect Domain Mapping set up. If you have forwarding or masking in place, instead of mapping, you should deactivate your domain at Account > Domain Mapping.

To check the Domain Mapping set up, confirm the CNAME Record is correct for your domain as described in the verify CNAME Record article.

See the Domain Mapping FAQ for more information on the differences between mapping, masking, and forwarding a domain to your blog.

Updated 01 July 2015

Not quite what you are looking for? Check out these other articles:

  • Looking for details on who visits your blog? Add Google Analytics to your blog to get detailed page view information.
  • For information on creating a mobile friendly design, check out the article on mobile optimization.
  • Tips for search engine optimization can be found in the SEO article.

Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services