Website Search in ↓markdown↓ CMS

If you have published more than a few articles to your website, or uploaded lots of useful content, how do your visitors find all your hard work? Once a website goes beyond a few pages and images a search option is a must. This article covers adding a search box (or search bar) to help visitors to a ↓markdown↓ CMS based website.

Using Free Website Search From Search Providers

This tutorial will add search to a ↓markdown↓ CMS website using the power of the well know search engines such as Google, Bing, DuckDuckGo, Yandex and others. The search box added to the website is based upon the website search solution coverd by the article Add Search to Website Quickly and Easily for Free. That article covers using a search provider's search URL combined with a site search option and a simple HTML form. A HTML form search solution that can be used on a ↓markdown↓ CMS website.

The advantage of using an existing search provider is that they index your website anyway. So why not take advantage of that work. A ↓markdown↓ CMS website comes with the ability to generate a comprehensive site map file, call sitemap.xml. This file is picked up by the search providers and used to find out what pages exist on the website. The search providers add those pages to their search information. Information that is used for site specific searching.

If every page on a website is accessible from links within the site then seaching you site is easy for the search engines. That is why ↓markdown↓ CMS generates, automatically, an alphabetical index of all available pages. Once indexed by the search engine visitors will be able to find the specific items or text within the website using site search.

Adding the Site Search Box

The site search article listed the site search URL for the major search providers. It then provided the HTML code for a site search form, here using the DuckDuckGo website search URL with example.com the site to search:

<form action="https://duckduckgo.com/?"
  oninput="q.value=document.getElementById('search').value +' site:example.com'">
    <input type="text" id="search" required=""/>
    <input type="hidden" name="q"/>
    <input type="submit" value="Search"/>
</form>

It is easy to add this code to a default ↓markdown↓ CMS based website. A ↓markdown↓ CMS website is laid out using a grid based Cascading Style Sheet (CSS). Each column in the grid is approximately one twelfth the width of the web page. The default installation has a three column wide space top right in the header reserved for search. This traditional search location, as used on this website, is where vistors expect to find the search option.

Instead of a using a plugin or database with associated code the free search functionality is achieved by adding the above code to a text file in the root of the ↓markdown↓ CMS website. The above HTML search code is then added to each page viewed.

Create a text file called search.code.txt, edit the file and add the above code. Don't forget to change example.com in the code to your website's address. Upload the file to root of the ↓markdown↓ CMS website. Change the code as required, e.g. here the Search caption on the button is changed to Find.

If required you can give the site search code file a different name, but you will need to change the setting in the configuration script site-config.php in the site root.

That is site search sorted for your website. Please note that the search page does not open within your site but is provided by the search provider.

See Also

For other articles on using ↓markdown↓ CMS see the post Build a Website from Scratch with ↓markdown↓ CMS.