{"id":13236,"date":"2019-08-05T07:28:15","date_gmt":"2019-08-05T07:28:15","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=13236"},"modified":"2024-01-08T15:01:45","modified_gmt":"2024-01-08T15:01:45","slug":"jetsmartfilters-how-to-create-visual-filter-with-posts-data-source","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-posts-data-source\/","title":{"rendered":"How to Create Visual Filter with the Posts Data Source"},"content":{"rendered":"\n
\n

Before creating a Visual Filter<\/strong><\/a>, make sure that you have added a post relation. It can be one-to-one, one-to-many, or many-to-many \u2014 it doesn\u2019t matter which type of relation you create, but choose only one to add the filter for.\u00a0<\/p>\n\n\n\n

In our tutorial, we use a one-to-many post relation with the \u201cCountry\u201d Custom Post Type<\/strong> as a parent object and the \u201cTours\u201d Custom Post Type<\/strong> as a child.<\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Add a New Filter<\/strong><\/strong><\/h2>\n\n\n\n
\n
\n

Go to the WordPress Dashboard > Smart Filters > Add New <\/em><\/strong>directory.<\/p>\n\n\n\n

Initially, you should define the Filter Name<\/strong> and select the \u201cVisual\u201d Filter Type <\/strong>to enable filtering by colors or images.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

Then, choose the \u201cPosts\u201d Data Source<\/strong>.<\/p>\n\n\n\n

In the Post Type<\/strong> drop-down menu, you should pick the post type that you\u2019ve assigned as a parent in the post relation.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

Next, select the Type <\/strong>of Visual Filter<\/strong>: a \u201cColor\u201d or an \u201cImage\u201d option. Then, define its Behavior<\/strong>, which can be either a \u201cCheckbox\u201d or \u201cRadio.\u201d These options refer to workflows similar to the Checkboxes Filter<\/strong><\/a> <\/strong>and Radio Filter, <\/strong>respectively.<\/p>\n\n\n\n

Then, press the \u201cAdd New<\/strong>\u201d button next to the Options List <\/strong>label to adjust the filter options according to the ones you have in the parent post type.<\/p>\n\n\n\n

\"options<\/a><\/div>\n\n\n\n

The Label<\/strong> field is optional. It\u2019s common for the visual type to leave this field empty, as the color or image is more informative than the text.<\/p>\n\n\n\n

Choose the needed Value <\/strong>from the drop-down list (these values must comply with the posts from the parent post type).<\/p>\n\n\n\n

Then, specify the color if you\u2019ve chosen a \u201cColor\u201d Type<\/strong>, and in case you\u2019ve selected an \u201cImage\u201d Type<\/strong>, select a certain image.<\/p>\n\n\n\n

\"visual<\/a><\/div>\n\n\n\n

If you select the \u201cRadio\u201d Type<\/strong>, additional options appear:<\/p>\n\n\n\n

\"additional<\/a><\/div>\n\n\n\n