[cn_multi_category_search]

The category shortcode option has five parameters that can be set. These parameters must be in order and pipe delimited. The pipe character can be found above the Enter key on the key.

• The first parameter is the category ID. This is represented by x in the example above. The category ID can be found on the Connections Categories admin page.
• The second parameter is the text placeholder that will be shown as the “Show All” text, the first option in the dropdown.
  • TIP: Entering 0 (zero) for this parameter will remove the “Show All” option from the dropdown.
• The third parameter is the initial text shown in the dropdown.
• The fourth parameter is the text shown in the search results message after performing a search using that dropdown to filter the directory. The %s will be replaced with the category chosen when performing a search.
• The fifth parameter is optional, but if set will only accept the select and checklist values. Setting this parameter to checklist will display the categories as a checklist instead of a dropdown.

Multiple category dropdowns, or checklists, can be by repeating all the parameters multiple times, separated by commas. Here’s an example which will display two category dropdowns:

[cn_multi_category_search category='a|Show All|Choose from Category A|Searching in Category A: %s,b|Show All|Choose from Category B|Searching in Category B: %s']

In the above example, you would change a and b to category ID’s from the Connections Categories admin page.

Instead of showing both categories as dropdowns, you can change one or both to display as checklists as in this example:

[cn_multi_category_search category='a|Show All|Choose from Category A|Searching in Category A: %s,b|Show All|Choose from Category B|Searching in Category B: %s|checklist']

Category a will display as a dropdown and Category b will now be displayed as a checklist.

Whether or not to display the category counts in the dropdowns/checklists, next to the category name. Here’s an example:

[cn_multi_category_search category='x|Show All|Default Text in Dropdown|Search Results: %s|select' show_category_count=true]

The default is false. Valid values are true or false.

To disable the keyword search, add enable_keyword to the shortcode and set the value to false.

[cn_multi_category_search enable_keyword=false]

The default is true. Valid values are true or false.

The default is false. Valid values are true or false.

The default is false. Valid values are true or false.

The default is false. Valid values are true or false.

NOTE: This is the State field.

The default is false. Valid values are true or false.

The default is false. Valid values are true or false.

To change to enable the zip code search, add enable_zipcode to the shortcode and set the value to true.

[cn_multi_category_search enable_zipcode='true']

• NOTE: You must have the Google Maps API Key setup.
• NOTE: The default country and state set on the Settings admin page.
• NOTE: This field autocompletes the street address when setup correctly. If it does not, the search will not work.

By default the search results will be shown on the page set as the Directory Homepage. If you need to a different page you need to set this option to false.

[cn_multi_category_search force_home='false']

• NOTE: This must be used in conjunction with the home_id shortcode parameter.

Use the home_id shortcode parameter to define which page the search should be redirected to. By default, it will be the page set as the Directory Homepage.

[cn_multi_category_search force_home='false' home_id=x]

• NOTE: This must be used in conjunction with the force_home shortcode parameter.
• NOTE: The x shown in the above example should be replaced with the page ID.
• NOTE: The page set as the home_id needs to have the [connections] shortcode on it.

The default is 5:5 Miles|10:10 Miles|15:15 Miles|20:20 Miles.

The following example shows how to change the radius dropdown options to KM.

[cn_multi_category_search radius_options='5:5 KM|10:10 KM|15:15 KM|20:20 KM']

• NOTE: The number before the colon is the distance. After the colon is the option name in the dropdown.
• NOTE: You must also set the radius_unit shortcode option to km.

The default is mi.

[cn_multi_category_search radius_unit='km']

To change to kilometers radius_unit to the shortcode and set the value to km.

The placeholder string for the zipcode text field.

[cn_multi_category_search placeholder_zip='Postal Code']

How can I change the accent color?

Add the following CSS to the theme’s custom CSS area found in the Customizer ( Appearance → Customize → Additional CSS ). Change the color as desired. The following example changes the accent color from blue to yellow.

.select2-container--sscit .select2-selection--single {
	border: 2px solid #706a0b;
}

.select2-container--sscit .select2-selection--single .select2-selection__arrow {
	background: #706a0b;
}

#cn-multi-category-search select, #cn-multi-category-search input[type=text] {
	border: 2px solid #706a0b;
}

.select2-container--sscit-radius .select2-selection--single {
	background-color: #706a0b;
	border: 2px solid #706a0b;
}

.select2-container--sscit-radius .select2-selection--single .select2-selection__arrow {
	background: #706a0b;
}

#cn-multi-category-search button#cnmcs-search-submit {
	background: #706a0b;
	border: 2px solid #706a0b;
}

.select2-container--sscit .select2-dropdown {
	border: 2px solid #706a0b;
}

.select2-container--sscit .select2-results__option--highlighted[aria-selected] {
	background-color: #706a0b;
}

.select2-container--sscit-radius .select2-dropdown {
	border: 2px solid #706a0b;
}

.select2-container--sscit-radius .select2-results__option--highlighted[aria-selected] {
	background-color: #706a0b;
}

How can I change the layout from stacked to horizontal?

The default layout is stacked because it is mobile-friendly. If you would like to change the layout to a horizontal layout, this can be accomplished with custom CSS. Change the widths, margins, and large screen media query breakpoint as desired

Add the following CSS to the theme’s custom CSS area found in the Customizer ( Appearance → Customize → Additional CSS ).

#cn-multi-category-search div {
	margin-top: 20px;
	margin-right: 40px;
	width: 30%;
	display: inline-block;
}

@media (max-width: 1025px) {
	#cn-multi-category-search div {
		margin-top:20px;
		margin-right: 40px;
		width: 100%;
		display: block;
	}
}