Content of the page

Step-by-step

Content of the article

Easy Entry Video

Start

  1. Install and activate the plugin
  2. Go to the plugins settings in /wp-admin/edit.php?post_type=meta_data_filter&page=mdf_settings  and there check post types you want to filter on the site:
  3. It is no matter for the plugin to work with woocommerce products or with any another post types, the plugin works great with all post types which were checked in plugin settings page!
  4. Read about the plugin settings here: Settings
  5. IF YOU WANT TO USE TAXONOMIES ONLY FOR THE SEARCHING - Quick start with taxonomies only
  6. Create filter-category:  Filter-category combines filter-sections: where you can create filter-items: taxonomy place-marks, checkboxes, drop-downs, range-sliders, calendars and textinputs - all what you will need it on the backend of your posts to make them searchable: In one post can has selected only one filter-category!! Question: why its necessary to create many filter-categories? Answer: for example you have a lot of custom post types on your site, books posts and real estate posts - it is clear that they have different filter parameters because of their nature - so we have to create 2 filter-categories and combine under them different filter-sections with filter-items created especially for that objects.
  7. Filter-category we need is created. So lets create filter-items. Press button 'Add New Filter Section',  give it any name, for example 'Basic', and press 'Prepend Filter Item' or 'Append Filter Item' -  there is no difference, its just for your convenience. Prepend - add new filter-item to the top of the filter-section, Append - add an html-item to the sections bottom. If you want to change the order of the html-items- you can drag it by mouse.
    Item Name - enter any text by your logic, lets name it as Price.
  8. Press Toggle and all options for the current html-item will be appeared. Item Type - select range-slider, next set price range, for example from 0 to 1000 write there: 0^1000. What if your shop has 8 products worth lest than 1000$ and 2 products for more than 5000$? It is not convenient set range from 0 to 5000 because of this 2 posts only. Here is a couple of interesting moments - if your customer will drag left slider to the right without touching left one - ajax-recount will show him 8+2 items because by the logic recount of price goes from minimal value to the infinitely max integer, so that means that 5000$-items will be in the searching too. And if your customer drag the left slider to the max-right position, to 1000 in this example - ajax-recount will show all items from 1000 to the infinity.
  9. Another parameter of the range-slider is: 'Slider step' - set 1 or any another integer number, possible to set float value (example: 0.1) if you need it. Prefix and Postfix - usually uses as signs of money "Item Description" - description of the html-item on the seacrh form on the site front, which appears as tooltip: 
  10. Press 'Publish'. And we have something like this: . Look on 'This is woo price, and I want to set range from min price to max price from database' - select yes if this is woocomerce price - in such way range will be automatically set from min price in the shop to the max price.
  11. Further, lets add a couple of checkboxes (Seasons: winter and summer) and drop-down html-item. We have some ways to create them: add this html-items on the same filter-section, or create new one, and as we have not a lot of html-items in this filter lets create them in the same filter-section where the price already created.
    Here is an example where I had to create system of filters with a lot of filter-sections: http://general.wp-filter.com/category/notebook-posts/ - just an example where filter-items set should be created in its own filter-section.
  12. Checkboxes is the most simple html-items when we talk about adding them to filter-section: press 'Append Filter Item' and write its title, that is all, do not even toggle the item box options, it is checkbox by default.
  13. Lets add drop-down, press Append Item, in its title write 'Fashion', in Item type select drop-down, add options by pressing button Prepend drop-down option or Append drop-down option  no matter, it is only for convenience, if you need you can drag them by mouse after creating.
  14. We have something like this: 
  15. 'Drop-down first option title' - first option text of the created drop-down
  16. If you want to hide drop-downs title on the front - set sign tilde before it '~', example: ~My drop-down
  17. That is all! Press Update. Now lets consider some moments which can be useful. For example you do not want to show title of the filter-item on the front, no problems print tilde sign '~' before it: 
  18. Next, "Item meta key" by default is not beauty, looks as smth like this: medafi_5393540d4024e, to make meta key of the current html-item more beauty it is enough to rename it, for example rename key as medafi_price and press change meta key button. Ajax request will show that its changed. Important: the key must begins from 'medafi_' prefix! You can rename it in any time, and it is not important is this key already uses in posts or not, but better do it on the beginning of the way!
  19. Now very important moment when we are talking about Price! MDTF plugin sometimes installed when site works already, and products already have prices in their meta fields. For example in woocommerce it is _price. So, to make such already defined meta keys searchable the plugin has functionality named as reflections - reflecting of value of other meta key. For using this you need in the prices html-item which we created in built-in meta data constructor check checkbox "Reflect value from meta key" and write in activated textinput near that checkbox write meta key which we want to reflect, in our case it is '_price' and press button Update:
  20. Checkboxes can be reflected with meta keys which have values as 0 or 1 only
  21. Drop-downs can be reflected with meta keys which has the same value as its drop-down <options> keys
  22. Textinput can be reflected by meta keys with any text values
  23. Calendars doesn works with reflections at all!
  24. Here is the last html-item - taxonomy, if you will add this to the filter-section it means only that in this place will be placed taxonomies which will be selected in MDTF widget or MDTF shortcode (will be described hereinafter) and nothing more else - this is just place-marker for taxonomies. This html-item can not be reflected. And one more - remember next - to show selected taxonomies which were selected in MDTF widget or MDTF shortcode you should add taxonomy html item to the filter-section! Just drop it and forget!
  25. Last moments, options of the filter in the backend sidebar:
  26. Sequence - position of the current filter-section among other filter-sections which are in the same filter-category in the seacrh form on the site front. So it is only sequence of filter-sections on the front: 0,1,2, ..... You can set it here too:
  27. On front widget - means max-height of the current filter-section on the site front where scroll appears if its height is more than defined here:
  28. On backend - created for your convenience on backend, just imagine that your current filter-section has 30 checkboxes, without this feature it very inconvenient to check checkboxes in the post backend.

Assign data to the posts

  1. IF YOU WANT TO USE TAXONOMIES ONLY FOR SEARCHING - READ this article
  2. We have filters, but to filter posts we have to set data in each of them to make them searchable. Now we have logic structure only but not data installed into our posts to start filtering.
  3. Lets assign data to posts. As an  example lets consider woocommerce products as an example here (it is not matter for the plugin - its works with any WordPress post types), of course in the plugins settings we checked post type 'product' already. In the product backend look for "Meta Data Filter Options" metabox  and in the drop-down selects filter-category which we need ajax will load the form with filters for this products and you can set data there you want 
  4. In the same way set filter data to all another posts
  5. Now one moment. Imagine situation that you have 500 products and you want to filter them by taxonomies and price only which is reflected in the built-in meta data constructor. It is very big work to select in each product by hands filter-category. To make this task instantly you can do next: go to the filter-categories and click on the filter-category you need, look its ID in browser address bar  in this case it is 74
  6. Go to the plugins settings and scroll on the same bottom of the page  and set data as on the screen. Select post type you need there, in our case it is product, write filter-category ID in "Enter filter ID" textinput. Press Assign. After the page reloading all 500 products are searchable by MDTF filters.
  7. You can use this way for all cases when its possible to reflect meta data.
  8. That is all, you have filters, you have data in the posts meta fields, next what you need is set MDTF widget in the any sidebar or MDTF shortcode.

Working with MDTF widgets

  1. The plugin has 2 widgets for filtering: MDTF and MDTF Taxonomies only. First we need to filter post by meta data and taxonomies on the same time. Second can filter by taxonomies only, we can use it instantly after the plugin installation - drop it to the any sidebar you want and go ahead! So lets consider first widget - MDTF. If you are planning to use second widget read this instructions too, as its useful for understanding some moments.
  2. Drop the widget in the sidebar, write title there, select filter-category you are going to use for filtration  Make your attention to checkboxes on the screen: Hide meta values filter options - check it if you are going to filter by taxonomies only by this widget, meta options will not be shown on the front, Hide taxonomies values filter options - check this if you are going to filter by meta values only, taxonomies will be hidden on the front. By the way if you want to filter data only by "taxonomies only" check  Hide meta values filter options necessarily, another way errors with searching will appears, and vice versa for meta data filtering only.
  3. After you dropped MDT widget- press Save button to init the widgets JavaScript actions properly. Do it only for first time after dropping the widget on the sidebar.
  4. Results output page link - when the project can has 10 different output pages by any reason -  this option in the current widget is very useful!
  5. Results output template - you can write there your own output template path, another way leave it empty and its will be taken from the plugin settings. But if you are developer and you want to use it, do next: set Results output page link  like http://my_site.com/metadata-filter-results-page (metadata-filter-results-page page created after first activation of the plugin  ), Results output template - write there search_output and create new file in the folder of current wp theme - search_output.php  . Of course you will need to add there your custom PHP code for posts outputting. It is powerful feature with which you can create any layout for outputting seacrh results ... Watch please this video with more details.
  6. About 'MDTF Taxonomies only' widget options you can read here http://wp-filter.com/document/quick-start-taxonomies/
  7. Lets consider taxonomy block in the widget. Do you remember what I written about taxonomy html-item item the in filter-section (about taxonomy mark-place)? Taxonomies which should be appeared on the site front - just check them and save the widget.
  8. Lets consider taxonomy options when you pressing 'Options' button:
  9. You can select here how the taxonomy will appears on the front: checkbox, drop-down or multi-drop-down (js emulation). You can select title for first option of the taxonomy if it will be displayed as drop-down, select which terms to hide if you do not want to show them 
  10. One secret! Imagine that you have taxonomy 'Locations', and you want to show drop-downs as: Countries->Regions->Cities - parent->child->sub-child - and each of them should has its own title of the first <option> in the drop-down. It simple - just write in textinput 'Custom name/title for taxonomies': Countries^Regions^Cities
  11. If you selected the taxonomy view as checkboxes, another option appeared Block max height - you need to set it in the pixels if you have for example 300 terms and such high box can broke your layout on the front. If you set this max-height scroll bar will appear if block takes more than 300 px.
  12. Sort-panel - read this article please.
  13. That is all. All is ready for filtering!
  14. Notes. Sometimes any WordPress themes or plugins broke search query, and after filtering you can see text: No products/posts found. Just for such cases its created shortcode [mdf_force_searching] which helps if you have such issue - just drop it on the same bottom of the header.php of your current wp theme as on the screen:
  15. If you doesn want to show on the site front name of any filter-section or for any filter-item - just set '~' (tilde) before title of it: 

Working with MDTF shortcodes

  1. The plugin has 2 shortcodes - [mdf_search_form] and [mdf_search_button]. All they creates in the same place here:
  2. The principle of their working is the same as in MDTF widgets: select filter-category, for appeared html-elements use drag-and-drop or even hide by sections or by elements:
  3. Another options the same as in MDTF widgets.
  4. There is one feature in shortcodes - skins, you can select how your shortcode will be appeared on the site front
  5. But the question - where can I take that skins? By default the plugin has some skins, if you want more - you can create it yourself if you know CSS or order it on any freelance site. I can describe here the technology how to create it.
  6. First you should go here 
  7. In folder skins you will find some skins. Copy and paste on the same directory default skin and rename it for example in dark, without spaces!
  8. Enter in your dark skin styles.css file:  Change all css classes skin_default to skin_dark. Save the file, go to any search shortcode and select your new skin, insert this shortcode somewhere, for example in the post content editor  save and look its view on the site front.
  9. Now play with CSS code as you want
  10. Shortcodes is very convenient feature, they can be inserted in any place of the site and you not need sidebars for them. Here is shortcode example inserted in the file header.php:
  11. Shortcode button is the magic featured search shortcode! Here is example of using it:
  12. Press the button: - will be opened orange popup with the MDTF search form. For such shortcodes use skin 'popup'
  13. Button shortcode is good thing for your customers when they searching something on your site, for example on single pages.
  14. One note about shortcodes: if you inserted new html-element in the filter-section, it will not be appeared instantly in the shortcode. To display it there you should go to that shortcode backend and re-select filter-category there and then press 'Update' button.
  15. That is all about shortcodes.

Working with marketing links

  1. The plugin has very useful feature named as constant links. What for are they? Imagine that you have clothing store, and you want to send to your partners links: "twisted winter clothes from the Germany for man". But just look on the result search link by this parameters: the link is not very informative!
  2. And now look on the next SEO-friendly link - http://woocommerce.wp-filter.com/best-soda-twisted-pullovers - its looks a lot better. This link will show the same result but looks another.
  3. Here is the place where you can construct such links: 
  4. Its simple: make on the site front seacrh combination you want using MDTF filter, then copy from the browser address bar result search link, go to MDTF constant links and create new one, drop the copied search link in the textarea there and press button Save - you will get smth like this: http://woocommerce.wp-filter.com/self-search-6-2/?slg=product&mdf_cat=56&page_mdf=880. Then install this plugin and there create new SEO-friendly-link using link you got in the constant link page. That is all! Now you can share this link on another sites, Facebook, Twitter, Google+, etc ...

 


 

Afterword

Now you know enough about the plugins functionality. I can recommend you if you have questions look into here FAQ or in the plugin CODEX to get info about MDTF shortcodes, functions, hooks and hints! + You can always read the plugin documentation articles. Look RECOMMENDED PLUGINS, they can help you in some tasks, for example with creating custom taxonomies, or with showing MDTF widgets only in that pages where you want using special conditions. And of course - if you have very big filter - always use any cache plugin for WordPress.

Also watch video tutorials about creating any filters and MDTF features.