To install this theme you must have a working last version of WordPress already installed. For information on installing the WordPress platform, please see the WordPress Codex. Upon downloading the "package.zip" file from Themeforest, you'll have all files you need inside. Extract the "package.zip" file and inside you will find the theme zip file called "rehub.zip", that is the file you need to install.

You can install the theme in two ways: through Wordpress, or via FTP. If you have trouble installing the theme via Wordpress, please proceed with installing it via FTP and you will be able to get around the issue.

I included the exported XML file from our demo, this allows you to quickly set up posts and images from demo site..

• The XML file is included within the download package at root level in a folder called Demo Data
• Navigate to WP Admin > Tools > Import
• Select and install WordPress importer
• Once its installed, select the XML file and upload it. It will take a few minutes to install and upload all content
• If you want to see the same data as on demo site, before importing XML file, install and activate plugins Woocommerce, BBPress, YITH Woocommerce Compare, YITH WooCommerce Wishlist, EasyDigitalDownloads. + ThirstyAffiliates, WooSidebars, MDTF, Visual Composer from theme bundle.
• After uploading demo data, go to Appearance, Menus and choose main menu. Assign it to primary menu area. And top menu to top menu area
• To import widgets, install plugin Widget Importer & Exporter and import file from demo data folder rehub.wpsoul.net-widgets.wie
• To import theme options - copy content from file in demo data folder "theme_option.txt", go to theme options - utility and import data

Making clone of demo site (rehub.wpsoul.net)

If you want to get full clone of demo site, with all settings, plugins and options, you can find instruction for this in Demo_data/how to get clone of demo site.txt

When enable this option, post will have editional bages in string and icon in post content.

REHub is very flexible theme, so you can disable parts of content that you don't need: breadcrumbs, social share buttons, ads after post, author block, related block, tags, etc. Also you can disable block with featured image (video, audio, slider) at top of post. You can do this in Post settings for any post.

Also you can disable some parts globaly in Theme Option - Global Enable/Disable

Paginated posts - is standart feature of wordpress. REHub theme has support for this feature. Example

To paginate any post just insert in content following code to wherever you want to break the post up into a new page:

<!--nextpage-->

To set one of the pages you have create as a Homepage:

1. Go to Settings > Reading
2. Select "A static page"
3. For Front page select the page you want in the select box.

By default on home page you can see last posts. But REHub theme includes powerfull page builder that helps you to build custom pages.

From version 3.9 you can choose between built-in page builder and layout builder based on Visual Composer plugin.

There are some difference between these page builders. Built-in page builder has only 13 blocks and it works in content area. You can't set full width blocks with it, you can't set custom titles and mix content and content blocks. Layout builder is much more functional, so I recommend to use it. But, as any other layout builder plugins, visual composer creates more load on server and can cause some problems if you have weak hosting.

How to activate Layout builder

At the top of each page in admin panel you will see such message

Activate plugin, if you need it.

Layout builder gives you instruments to mix different content blocks with custom elements, like headings, icons, backgrounds, tabs, images. You can make your content full width, centered, boxed, in columns. Infinite possibilities for creating custom layouts. Also, many content blocks have enhanced sorting and ordering options. This is useful when you want to divide your content on logical parts. Layout builder is based on Visual composer plugin from codecanyon.

Some tips for layout builder.

First of all, I recommend you to use "Page for visual builder" template on pages where you want to use visual composer. This is because such template has additional settings, where you can disable your header (this is good for landing pages), footer, disable default background, disable boxed style of content

When you add any element, layout builder creates row for it. Each row has some important options.

Type of row width

Inside content container means that row has inner width of parent container

Full width of content container makes width of row like parent content container.

Full width of browser window makes width of row ignore width of parent container.

Container with sidebar

By default, if you want to add layout with widget area, your sidebar will be 270px (if you will use 3/4 + 1/4 column layout) or 384px (if you will use 2/3 + 1/3). It's not good for ads. So, to fix this and create static sidebar in this row, enable this option and use 2/3+1/3 layout. Or use predefinite visual composer template "Row with sidebar area"

Make inner container center alignment?

This option is good when you use width row as full width of browser window. Sometimes, it's good to have full width background color or background image, but text and other content place to center (this prevents stretching content)

Inline, float, margin tips

Most of elements has field Extra class name. I have made some useful classes which you can add to this field

inlinestyle - use it if you want to make some elements on the same line. For example, some icons

floatleft - this makes element float: left

floatright - this makes element float: right

font80

font90

font110

font120

font130

font140 - By default, text block has font size as text block of theme content, but you can increase or reduce size. For examle, font80 - makes font size of text element 80% as default font size

mr5

mr10

mr15 - makes margin from right. mr5 - 5px, etc

ml5

ml10

ml15 - makes margin from left. mr5 - 5px, etc

bg_r_b - set background image position to right bottom

bg_r_t - to right top

bg_l_b - to left bottom

How to activate Built-in page builder

To use it create any page and select in Page Attributes Template "Page Builder" and save page. After saving you can find additional block Page Block Builder

In this block you can create custom pages with 13 different content blocks. You can sort them and create any number of blocks.

Note! Page builder is ajax based and blocks load with small delay on some hostings.

Each block can be with title or without. You have option of creating 3 types of title positions.

Left above line



Left inside line



Centered inside line



Also you can add custom url near title like this

I recommend you to use short titles and links for better visualization in responsive design.

You can create any number of blocks but try to avoid of using more than 4-5 blocks at once because it can slow your website.

It's very easy. Just go to theme options - homepage options and enable Display Homepage carousel

There are two base for carousel. Editor's choice posts (we discuss them in this chapter) and tag.

Also, this element is available from layout builder.

There are 5 post formats in REhub theme: regular post, video post, music post, review post, gallery post.

All post formats differ each other by top part of posts and icon labels on thumbnails. Also many of content blocks in page builder and sidebar have opportunity to filter content by post formats.

Video format enables video player in top of post, music post format - music player, gallery post format - gallery slider with thumbnails, review post format enables ability to add review block and user rating system, regular format - standart featured image. Also you have ability to disable top part of post. For this just turn off in Post settings checkbox Disable Featured Image, Video or Gallery in top part on post page.

You can view all post formats in demo site.

Review post

Review post format is most powerfull post formats with big amount of settings. First of all you need to select type of review: Review post or product review, woocommerce product review and review with list of affiliate links. Demo of simple review post , demo of product post, Demo of woocommerce product review, demo of affiliate list

The method what you need to use is depend on what affiliate functions you choose to use with theme.

Review post has review block that display after post content, but if you enable shortcode inserting you can add it in any place of content by [review] shortcode. Just copy this shortcode to any place

After saving data you can see annimated block in post.

Each of this part are set in setting fields

Overall score can be calculated automatically. Just leave it without changes for this. Or you can set it manually.

You can set color type of review box in Theme options - Review/Affiliate

Post review has built-in schema format.

Theme has 2 ways of user reviews. You can choose them in Theme options - Review/Affiliate

Simple ratings is just 5 star rating function that works on ajax.

User reviews with criterias based on comment function and it allows to set full review with criterias.

If someone leave user review and you approve this review, your review box will show editor's review score and user review score

Product review is the same as review, but has offer block. All data from this offer will be saved in post database, so you can use this data in another places of theme. For example, in top reviews list You can add offer block if you choose post format as review format and choose type of review as product review, woocommerce product review, product review with affiliate links.

Note. You can add offer block to post also with shortcodes. The main difference between offer box shortcode and adding offer box from post settings - shortcode doesn't save offer data to post data.

For example, if you add offer block to post settings, you will see price, button in string of posts on home page and in archives. If you add offer block as shortcode, post will be as simple post in post strings.

Let's see examples of types of product review

Simple Product review

Woocommerce product review

Product with affiliate list and Product review with woocommerce offers list

Each of product review type is based on different way of affiliate options of theme. Docs for affiliate functions

From 4.6 version of theme, Rehub has enhanced support for Affiliate Egg plugin.

Logic of plugin is very simple. There are many supported shops and affiliate sites. You need just to insert link from product page ofshop to plugin page and plugin will parse to your site all information about product (link, price, title, description, photo and even specifications, comments, etc). You can also add multiple products or link on shop category.Then you choose output template. Plugin has near 6 templates, but Rehub theme increases this number to 20 different templates (product cart, comparison lists, buttons, carousels, tabbed cart, etc) + 3 custom widget. All theme's custom templates has postfix [custom], so, use them if you want to have good looking blocks.

See video with some of examples

Plugin is paid. It's price $45, but, good news, Rehub Theme buyers will get plugin license only for $20. If you bought our two themes or licenses - plugin will cost $15 for you. If you bought 3 or more - plugin will be free for you. To get your plugin license, please, write on my email from contact form

Currently, plugin supports more than 40 shops. Among them:

• Amazon.com
• Aliexpress
• Babadu
• Ebay.com
• iHerb.com
• Pleer
• Ozon
• Quelle
• Tom Tailor
• Topbrands
• Wikimart
• Yves Rocher
• Yoox
• Rendezvous

If you want to get any shop to supported shop list - write to us and we can make parser for you. Also, you can try to make your parser. Examples of parser you can find in folder plugin_folder/application/shop/parsers. To make custom parser, create folder with name affegg-parsers in theme folder

Affiliate Egg instructions

First of all, you can add to each storefront 3 types of links. 1 - single link, 2 - multiple links, 3 - link on catalog

When you add link on catalog - add before link such code to limit parsed items. Example, [catalog limit=10]http://supershop.com/super-catalog

After parsing of product data, plugin will generate shortcode - insert it on your page. Example, [affegg id=10]

There are some tips for the shortcode. If you added multiple products or catalog, you can use shortcode [affegg id=10 next=3] This will show only first 3 position. If you add in content of post this shortcode again - this will show next 3 positions, etc. Also, you can use shortcode [affegg id=10 offset=5 limit=3] - to show 3 items from fifth position.

Deeplink

To get comission from affiliate links, you must add deeplink (partner link ID or parameter). Each shop and affiliate system have it's own deeplink. Add not only ID, but also a name of parameter, for example, for Iherb.com you must add rcode=PVT241, not just PVT241

Auto updating and other settings

Plugin have autoupdating of products. You can set time of delay in settings. Also, there are some other usefull settings. For example, Save meta to post. This setting allow plugin to store data from product that you added to post as shortcode. Data will be stored in meta fields of post, so, you can use it for different things, for example, for creating filters, etc. Also, theme will automatically show this data in snippet of loop.

The most important names of custom fields where plugin will store data. affegg_product_price - for price, affegg_product_orig_url - for original product link, affegg_product_img - image of product

Custom templates and parsers

You can hire us if you want to create custom parser or custom output. Please, write on my email from contact form

Affiliate settings

REHub theme has a really powerfull system for creating affiliate stores and websites. The most unique feature is hybrid system with many relations between affiliate store, review posts, link cloaker, products. Let's talk about different ways of affiliate settings

First of all, you need to answer on some questions. How many affiliate products do you have? How offten do you plan to change prices, links of products? Does your product has only one link or lists of affiliate links? Do you want to create separate product page or not? Do you want to auto update prices with some plugins?

Theme provides 3 ways of affiliate options. Manual inserting in post, connecting posts to thirstyaffiliates offers and connecting posts to woocommerce offers.

Manual inserting - good if you want to have logic one post - one product.

Thirstylink is better if you have average number of affiliate products, when you want to create offers list with best price, offers archives, cloak links, track links, add coupons. Thirstyaffiliates offers are virtual, so, each offer don't have separate page

Woocommerce offers is most powerful. Each offer has it's own separate page, can be added automatically (with wp all in one import plugin or similar), can be auto updating. Each offer can be added to comparison, wishlist. You can sell this offers from your site (just setup offer as simple product) or can be as affiliate external link (setup offer as external product). Also each offer can have specification, coupons. You can also create lists of offers, archives, etc.

Manual settings in review posts

From 4.4 version you can add offers to section Post offer.

Good thing - now you don't need to set post as review for using this option. This means that you can add offer to any post type.

In post offer section you can add price, coupons, date of ending of coupons, also, coupons can have reveal function.

Review post with product review

For creating such posts, create post setting like on image above. After this you will see additional fields. First field I will describe in next part of tutorial. You can leave it blank. Then you can add description, thumbnail, price, button url, coupon and even enable countdown. So, when you publish your page, product offer appears on page

Default place of product offer is bottom of content, before review, but you can insert this block at any place of content. You need to enable "shortcode inserting" for this.

Offerbox shortcode

Another way to inserting offer to post is using built in shortcode plugin.

Choose Offer Box shortcode and fill all fields. Please, don't use many symbols in button text. Good example is "see offer", "buy this".

Offer box with shortcode looks the same, but it has some differences. First of all, offer box shortcode can be used in any post formats, even in music post formats. But, when you create product review, your data will be saved in post and can be used on other pages (for example, in top lists)

From version 2.0 theme has bundled Affiliate Link Builder (plugin ThirstyAffiliate). This plugin can cloak your links and has many others good options. I created enhanced relations between this plugin and theme. First of all, you need to install it.

Click on link to begin installing plugin. After installing, activate plugin. Now, you can see new post type

You can use affiliate link builder in two ways: as simple link cloaker and as affiliate offer builder. If you want use it only as link cloaker, just add in link only name and Destination URL. After saving you will get cloaked url.

Also you can use it as offer builder. For this, you need to set all fields. After saving, you can choose affiliate link-offer in different options of theme. Each link will be not only cloaked link, but like full offer with name, description, brand, image, button and link.

For example, in product review, that I described early, you can choose this affiliate offer

So, if you choose affiliate offer in this field, you don't need to manually set all others fields below, because data for each field will be parsed from data of affiliate offer from affiliate link builder.

Another good option that I added from version 2.9 of theme - is image for category of links. Let me explain on example. Each offer has it's own thumbnail

You can add this thumbnail at this place

First image from this field will be used as thumbnail. But very often people use for this thumbnail logo of shop, for example logo of amazon or ebay. So, you need to upload this logo to every affiliate link. But from version 2.9 you can upload this image not for each link offer but for each brand. For this, create new category for links. Each category will be brand or shop. For example, create category and name it "Ebay".

Then insert link to image of brand logo

If you want to use this logo as offer thumbnail, just don't attach any image in link offer and set category with shop image.

How to create product review with affiliate offers list

Sometimes, you'd like to create product review that has many offers from different shops. No problem, REHub has such options. Just choose type of review - product review with affiliate links list

Affiliate list has one description of product and unlimited number of offers.

Another good way that I really love - using woocommerce for affiliate products. I am surprised, but many people don't know that woocommerce has awesome functions for this. You need only to choose type of product - Affiliate product when you create your woocommerce product.

Woocommerce offer products has many advantaged before others. First of all - each affiliate product has it's own page. Second - your affiliate product has many unique woocommerce functions. For example, you can add specification of each product and all products can be compared by each other or can be added to wishlist (install plugins YITH Woocommerce Compare and YITH WooCommerce Wishlist for this). Third - you have products store page with filters, so you can use it like catalogue page.

And, of course, I add relations between theme and woocommerce products. You need only to choose type of product review "Woocommerce product review" and choose product in select field after this. And you get such beautifull and good conversion block in your review page

Your users can buy product, view specification and photos of product from review page, so they don't need to do additional click to see your woocommerce product. Less clicks - more conversion.

Also. If you want to create list of offers - choose type of review - Product review with woocommerce offers list and choose your woocommerce offers.

How to add cloaking of links to woocommerce external links

It's easy, just install plugin https://wordpress.org/plugins/woocommerce-cloak-affiliate-links/

In ReHub theme you can create different archives fro your products. They are available for woocommerce offers and thirstyaffiliates offers.

The most easiest way is to use visual composer module (you must install it)

There are many ways to choose posts for each of this modules. You can choose by tag, category, id, name, set different orders, etc.

All links from thirstyaffiliates go to external url (because thirstyaffiliate offer doesn't have separate page on site).

Also, there are some differences between grid of woocommerce products and columns of woocommerce offers.

1 - images in grid are not cropped

2 - links in grid (from image, title, buttons) go to external site (if product is external). Links in columns from title, images go to inner page of offer.

3. Grid has equal height columns

The last thing I want to tell you - is the most powerfull thing of rehub affiliate functions.

It uses when you want to create affiliate products with separate page and this product has different deals from different shops.

So, you need to create your affiliate product with woocommerce product. Then add each deal (offer) to affiliate link builder. You can add only price, url, image and category (brand/shop) of each link.

Then, in bottom of each woocommerce product you can find such panel.

Here, you can add your affiliate deals and related review post. Also, you can disable main button of woocommerce product (just don't insert any link to Product Url). After saving, your product will have such block

Also, this block will be available from review post if you choose this woocommerce product as item for product review.

If you use new analytics.js, you can add tracking to your affiliate buttons. Go to theme options - Reviews/Affiliate - Add tracking? and enable this option.

So, google analytics create tracking for all offer buttons, you can find report under "Action" category and "click on offer button" action in google reports.

Top lists - is one of the best marketing instrument in the world. People loves them, because they can choose and compare different products. So I created some unique and very usefull functions and ways to create top lists.

There are three different ways to create top lists: top post's table, list of affiliate offers, top list inside content.

Top post's table

This type is usefull if you want to create top of posts. From version 4.2, you have powerful top table constructor for creating unique lists with unlimited possibilities.

Steps to creating this table.

Create your page and choose Top table constructor in page attributes

Save your page, now you can see additional panel in bottom of page. You can choose to display definite category or manual select posts, style of design, construct your columns, add any meta value, etc.

After setup all data, publish your page.

If you want to show only posts with reviews inside table, add rehub_review_overall_score to Base of sorting

Also, when you add your settings, at bottom of page you can find shortcode. You can copy it and insert this top table to any page.

Also you can connect your top table and MDTF, so, you will have filterable amazing listings like on PRO sites

See tutorial and overview

Top post's list

The setting of top list page is very similar to top table. choose in page attributes template "Top rating page" and add settings to panel

Difference between top table and top list

Top table has more options, you can create add any type of meta fields to it, all columns are sortable and customized. Top list is for quick setup your best scored reviews. Also, tables on mobiles are scrollable (from left to right), top list on mobiles has block listed format

Top comparison charts

The setting of top comparison charts page is very similar to top table. choose in page attributes template "Top charts constructor" and add settings to panel. See tutorial

This list is good when you want to create list of different offers (not reviews). Each item has image of product, title, description, category name or image (use it for shop name or logo), sale price, old price and even coupon.

There are two possible ways. Thirstyaffiliate lists and woocommerce lists. You can add them from layout builder (offers list and woocommerce product list) or by shortcode

For Thirstyaffiliates

[wpsm_afflist show="10" cat="ebay"]

Where cat - it's name of thirsty affiliate category, show - number of offers to show.

Also, you can just specify link/offer ID's in shortcode like this

[wpsm_afflist ids="23,26"]

You also can find this shortcode in shortcode plugin

And for woocommerce

[wpsm_woolist data_source="tag" tag="24" show="5"]

This is for show products based on product tag ID

And this is for show by products ID's

[wpsm_woolist data_source="ids" ids="11"]

Example - demo

Each of item from top list goes to it's headings. It's very easy to create with this shortcode post like "Top of .... of the year".

What do you need? Just add your content as usual, and create headings H2. Each item must have own heading + content.

Then, in place where you want to add top list, add shortcode

[wpsm_toplist]

That's all. See the magic in action.

Also, you can add shortcode with button in text editor

From 3.0 version of theme I integrated plugin Wordpress Meta Data & Taxonomies Filter

It's bundled with theme, so you don't need to buy it. Note, version of plugin that bundled in theme works only with theme. If you use it outside REHub theme you will have some bugs. But all functions are the same and all shortcodes and documentations from this plugin work the same way.

I will try to describe all process and tricks to setup directory, filtered catalogue, product specification and using of directory constructor of theme.

Installing plugin

First of all, you need to install and activate plugin. From 3.0 version you can see notification in top of admin panel.

This theme recommends the following plugin: Meta filter (for creating catalogs and specification).

So, install and activate plugin. Now, you will have MDTF Filters tab in admin panel. Go to MDTF Settings where by checkboxes set post types we want to use. It's working with any post type, so, you can create filtered directory from your posts or create new post types\add to existing new criterias. For example, you can create filtered directory from your easydigitaldownloads products or woocommerce products. You can create real estate, car, gadget, laptops, events directory on your site.

Next, you need to think about logic of your catalogue and create set of filters. Each filter is like position in specification. You can add any number of fields in filter, but I recommend you to group all fields into filters. For example, I want to create camera review website. I take specification of camera.

So, my filters will be: Body type, Max resolution, Effective pixels, Sensor size, etc. As you can see, each criteria has only one value, but sometimes your criteria will have multiply options. For example,

In this cases you need to add many fields to each filter. Let's do this job with me to make process more clear.

Add supported post type in plugin settings, then create MDTF category. Category is like group of filters, this is very usefull if you have different type of products with different filters.

Ok, add new filter. Title of filter will be title of criteria in specification. It will be used in widget

and in specification shortcode

Next step - is to set fields. You can add taxonomies,checkboxes,drop-downs, range-sliders, calendars and textinputs. Most of cases you will need checkboxes and sliders. All settings for each field is available after click on toggle button.

Checkboxes has option to be true or false. So, you need this field for creating something like this

Checkboxes is the most quicker html items when we talk about adding them to filter: press Append Item and write its title, that is all, do not even toggle the item box, it is checkbox by default.

Important thing - checkboxes in specification will have only title, so it's title will be also it's value. Like this.

Next field is dropdown. The main difference from checkbox is that dropdown has title and values. It's usefull for criterias that can have only one value from set of values. For example,

And, of course, instead of creating one dropbox with values, you can create set of checkboxes.

Dropdown has such look in specification

Next field is slider. It's used for creating numbered field with slider.

The look in specification is absolutely the same as previous. It has title and value. What if we have 8 products worth 1000$ and 2 for 5000$, it is not convenient set range from 0 to 5000 because of this 2 items. Here is a pair of interesting moments, if your customer will drag left slider to the right, and no touch left one ajax-recount will show him 8+2 items because by the logic recount of price goes from minimal value to bigger, so and that 5000$ items will be in search. And if your customer drag the left slider to the right, to 1000, so ajax recount will show all items from 1000 to infinity.

Next field is calendar, but It's very easy. Can be used for event date or date of product release.

Next field - is textinput. It uses in very exceptional cases. It has function as simple wordpress search by text. For example, you add some product description by this field and users can enter word (s) in this field. If item has such words in this field, filter will be active. For example, you can duplicate title of your product in this field, so users can search products by title. Also, sometimes I add quick specification or small product description in this field and use it in another places of theme (for example, in top review lists)

Here is last html item – taxonomy, if you add this to the filter it means only that in this place will be placed taxonomies which will be selected in widget or shortcode (will be described hereinafter) and nothing more else. Its cant be reflected. And one more, remember this – to show selected taxonomies which were selected in widget or shortcode you should add taxonomy html item to filter=) Just drop it and forget!

After creating filter, don't forget to add it to some category and save. Also you can set it's position in Sequence attribute.

Heights: On front widget – means max height of the current filter on front after which scroll appears:

Reflections

Now very important moment when we are talking about Price or scores that already exist in your posts! The plugin sometimes bought when site works already, and products or posts already have price or other values that saved in metakeys that already exist. Now, you can reflect this value and use it in filters. For this, just add name of this custom field.

After filter setup you need to add data to each of your post. For this, choose your category of filter and add your data

Now one moment. Imagine situation that you have 500 products and we want to filter them by taxonomies and price which is reflected in built-in constructor. It is very big work to select in each product by hands filter-category. To make it for 1 min you can do next: go to filter-categories and press ours one, look its ID in browser address row

in our case it is 74

Go to the plugins settings and scroll on the same bottom of the page 

and set data as on screen. Select post type we need, in our case here it is product. Press Assign. After the page reloading for all ours 500 products were set filter-category we need. We can use this when it is lazy for us each time select filter-category in each product =). That is all, we have filters, we have data in posts, next we need set widget in sidebar or shortcode somewhere

Now, you need to understand logic of directory pages. First of all, you need create page for output template + form with filters. REHub theme has many predefinite templates and shortcodes for this to create any type of catalogue. I will try to explain on examples.

Work with widgets

The plugin has 2 widget to filter: MDTF and MDTF Taxonomies only. We need first when we are going to filter post by meta data and taxonomies on the same time. Second can filter by taxonomies only, we can use it after the plugin installation – drop to any sidebar you need and go. So lets consider first widget. If you are planning to use second widget read this instructions too, it is useful for understanding some moments.

Drop the widget in sidebar, write title, select filter-category we are going to filter with. Make your attention to 2 checkboxes on the screen: Hide meta values filter options – check it if you are going to filter by taxonomies only, 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 another way errors, and vice versa. As we drop the widget just now press save to init JavaScript properly. We do it only on first time after dropping the widget on the sidebar.

Next, very important things

Results output page link- this is a page url where user will see results of filtered content.

By default, when you activate your plugin, new page "MDTF Results Page" will be added automatically. And it will be used as output page link by default. But I strongly recommend you to set url where you have your catalogue in this field

Results output template is a template file of theme which is used for results display. By default, it uses search page template, but it's not very well, so I added some awesome templates for creating your directory + catalogue constructor + some ajaxed templates. See next chapters for description of templates

Reset link - is link where user will be redirected after clicking on reset button. I recommend to set the same url as Results output page link

Another settings of data filter widget

Let's consider taxonomy block in the widget. Do you remember what I wrote about taxonomy html-item in filter, so which taxonomies must be on front decided is here, just check them and save the widget

Lets consider taxonomy options when you are pressing Options button. You can select here how the taxonomy will appears on the front: checkbox or drop-down. You can select title for first option of the taxonomy if it is drop-down, select which terms to hide if you are not want to show them 

One secret! Imagine that you have taxonomy Locations, and want to show this as: Countries, Regions, Cities – parent,child,child – and each has its own title of first option. It simple, just write in textinput Custom name/title for taxonomies: Countries^Regions^Cities

If you selected the taxonomy view as checkboxes, another option appeared Block max height – you need to set it in pixels if you have for example 300 terms and such high box can broke your layout on front. If you set this max height scroll bar will appear if block takes more than 300 px.

How to make filter widget with white background

Just open style.css file of theme and find in bottom such code

/***for dark widget - you can delete if you want white widget***/
.sidebar .widget.widget-meta-data-filter { background-color: #212121; color: #fff; padding: 20px }
.sidebar .widget.widget-meta-data-filter h3, .sidebar .widget.widget-meta-data-filter h5 { color: #fff }
.sidebar .widget.widget-meta-data-filter h4.data-filter-section-title { background-color: #5b5b5b; color: #ffffff; margin: 20px -20px 10px !important; padding: 10px 20px; }
.sidebar .widget.widget-meta-data-filter .mdf_textinput, .sidebar .widget.widget-meta-data-filter select { border: 1px solid #fff; }
.sidebar .mdf_widget_found_count { background-color: transparent; color: #fff; font-size: 13px; font-weight: bold !important; padding: 0; }
.sidebar .widget.widget-meta-data-filter .mdf_range_max, .sidebar .widget.widget-meta-data-filter .mdf_range_min, .sidebar .widget.widget-meta-data-filter .mdf_calendar{ border: 1px solid #fff}
/*** ***/

Delete it. That's all

How to add filter widget only on page with catalog

Use for this plugin Woosidebar that bundled in theme. Also I recommend you do not use plugin custom sidebars for this purpose.

Adding form by shortcode

Adding filter form by shortcode has very simillar logic, but more customizable.

First difference, that you can choose what fields to include to form.

Also, you can choose taxonomy.

There is one feature in shortcodes – skins, you can select how your shortcode will appear on front

I created some skins for you.

Default and dark - is shortcodes by default. It has 3 column and button in the end.

Defaultfullwidth and darkfullwidth - is form that you can use with full width layout. It has 4 column.

Also, I create darkmobile and defaultmobile shortcodes. What do they mean? As you know, mobiles has small resolution, so website has only one column on mobiles. Sidebar is displayed at bottom of page, and when you add filter widget to sidebar it will be visible under all content. So, if you want to show filter form also before catalogue results (but only on mobiles), choose this layout.

After saving shortcode, copy code and paste in any page where you want to see form

Also, you can use shortcode styles darksidebar and whitesidebar for using shortcodes in sidebar text widget. Why do you need them if you have MDTF widget? Because filter form by shortcode have a good and useful function - you can hide any field or group of fields.

There are some ways to set MDTF output

1 way - with visual composer.

From 3.9.2 version of theme you have very easy way to install mdtf output on page. For this, I added special module in visual composer. (see how you can enable visual composer in theme)

Add it to page. If you have sidebar or shortcode that works only on page with output, set the same name "self" for output link and for reset link in settings of mdtf widget or shortcode. If you have sidebar with mdtf widget overall whole site, you need to set output link as the link of page where you inserted MDTF module.

Also, in settings of module, you can enable ajax mode of working. But, note, for correct work, you need to have widget or shortcode with enabled ajax mode on the same page.

2 way. Creating filterable top table

Demo of this template with filter

You can connect your top table with filters. For this, set template-toprating as output template

3 way. With catalogue constructor

Demo 1, Demo 2, Demo 3

For creating settings of constructor, add page (it will be main page of your catalogue) and set template catalogue constructor in page attributes

Now you can see additional panel with settings. Let me explain each setting.

Enable title of page before posts? - if you enable this, your catalogue will have title.

Enable content of page before posts? - this will include content of page before catalogue items

Choose design of posts - there are 3 different type of design

Fetch Count - this is how many posts you would like to show on one page. I recommend to use 9 or 12 for 3 column design, and 10 for lists and 2 column.

Name of post type - this option is very usefull if you want to create directory from custom post type. Set name of any post type. Most of plugins create custom post type and you can use any of them to create your unique catalogue.

Show taxonomy - another good option, that you can show in results any custom taxonomy.

Show exerpt - if you want to show exerpt, set how many symbols.

Add values from custom fields

These great set of option will make many developers and customers very happy. Now, you can show any value from custom meta fields of your website. Each set of fields has it's own icon, title and value + css class, so, if you know css, you can create unique style of catalogue without php codding. Only with use of css.

Also, in previous part I tell you how to set names of custom fields with plugin. Now you can use them in this place.

If you know css you can change your design of catalogue in any unique way, because each row has it's own class. For example, I created this style in 5 minutes without changing any files of theme. Just add some css to theme options - general options - custom css

Add button to end? This option add read more link to end of item (or affiliate button)

4. Woocommerce template

5. Easydigitaldownload

From 3.6 version of theme, you can add full ajaxed templates. What is the main difference between ajaxed templates and regular. When you filter your content with ajaxed template, your link doesn't change and always looks good. But ajaxed templates are not so flexible as catalogue constructor, because all settings are inside php file. I have included 4 predefinite templates which are ready for ajax. All of them are in mdf_templates folder of theme. If you have php skills, you can change them or use as is.

For using ajaxed filter, create blank page and add such shortcode to it

[mdf_results_by_ajax shortcode='mdf_custom template=template/list post_type=post orderby=date order=desc page=1 per_page=10 pagination=tb' animate=1]

See description of attributes

For template attribute you can use such names of predefinite templates

template/list (for any post type)

template/column (for any post type)

template/reviewlist (better for posts with review)

template/offer (for thirstylink post type)

Also, it's very important to use on this page mtdf filter or widget with enabled ajax options

For output link and output template in settings of widget or shortcode, add - self

Ajaxed woocommerce product page

You can also create ajaxed woocommerce filtered page. Logic is the same, but you need to add another shortcode

[mdf_results_by_ajax shortcode='mdf_products columns=3 per_page=12 pagination=tb' animate=1]

See description of mdf_products

Another great option of filter plugin is ability to add sort panels to filter results.

First of all, you need to create sort panel. Go to MDTF filters - MDTF Sort panels. Then, when you add sidebar or shortcode, you can choose this sort panel. More about sort panel

Tip: Use this name if you want to sort posts based on score of review

From 3.6 version of theme, you can add slide out search panel. This is very usefull if you use full width templates.

For adding such panel, you need to change your search shortcode

[mdf_search_form id="749" slideout=1 location="right" action="click" onloadslideout=0 toppos="247"]

In this shortcode, you must change id to your's. (you can find it on page where you create shortcode)

In this mode you can slideout search form from right or left, and use for it additional parameters:

• slideout – set 1 to activate this mode (1/0)
• location – right or left – side of shortcode slideout popup
• action – click or hover – when to show shortcodes popup
• onloadslideout – is should be shortcode slideout popup be opened after page loading (1/0)
• speed – how quickly show/hide popup, in miliseconds
• toppos – position in pixels from top in pixels
• fixedposition – is should be popup fixed (1/0)

Tip. How to add full width 4 column woocommerce products page

Create page and set it template as full width template. Then add such shortcodes to content

<style>.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{width: 22.75%; margin: 0 3% 2.992em 0;}
.woocommerce ul.products li.last, .woocommerce-page ul.products li.last{margin-right:0;}</style>
[mdf_results_by_ajax shortcode='mdf_products columns=4 per_page=12 pagination=tb' animate=1]

This page is good with slideout panel

Many of customers ask me to create specification functions. So I made this. When you add all data for criterias you can easily add specification of product on your page by shortcode

[wpsm_specification]

This shortcode shows specification of current post. Also, you can show specification for any post by shortcode

[wpsm_specification id="34"]

Also, you can easy add this shortcode by button in text editor

Another great option that I added to v 3.0 - is product chain shortcode. You can use it to create finder for any of post types.

Also you can add this shortcode to text widget

Note. For using this shortcode, you need to install plugin mdf-taxonomy-chain-menu. You can find it in theme folder/plugins/mdf-taxonomy-chain-menu.zip

For adding this taxonomy chain use shortcode

[mdf_chain_menu post_slug='product' taxonomy='product_cat' term_id=0 exclude'' show_count=1 button_title='Watch It' target='_blank']

* post_slug – which post slug to use in chain menu. Default is ‘post’
* taxonomy – taxonomy which terms show. Default is ‘category’
* term_id – start term ID. 0 means all
* exlude – which terms hide. Use comma
* show_count – show count of posts in term. Default is 0
* button_title – title for button with link of selected post. By default is ‘GO!’
* target – how to open selected post. Default is ‘self’

REHub theme is compatible and customized for woocommerce plugin. It's best self hosted plugin for wordpress with tons of great extensions.

if you need to set up woocommerce just install woocommerce like you do for other plugins and thats all about it. you dont need to do anything else.

Also, you can insert custom woocommerce page with some modules of Layout builder. (see how you can enable visual composer in theme)

Woocommerce docs

See also about enhanced woocommerce affiliate functions of theme

Some words about images

By default, woocommerce generates square thumbnails. 200*200, 400*400, 600*600. Sometimes, if you use tall and narrow images, crop is bad. So, you can just disable croping. For this, go to Woocommerce - Settings - Products tab and click on link "Display" under tabs. Then untick hard crop checkboxes. After this, you need to regenerate your thumbnails with plugin Regenerate Thumbnails

Ecwid is third-party platform based on ajax. It's simple and effective. Go to main site of ecwid to see all of advantages

I can recommend Ecwid if you have slow hosting and don't want to waste your time for setting shop. And Ecwid has one very interesting option - you can use your magazine not only on website but also on facebook and other platform that support ecwid apps and javascript widget.

REHub theme has full support of ecwid and provide customization of ecwid shop.

Add new page and select Ecwid shop template in Page Attributes and save page. In write panel select Text view and insert ecwid widget

<div><script charset="utf-8" type="text/javascript" src="http://app.ecwid.com/script.js?4191037"></script><script type="text/javascript">// <![CDATA[
 xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","id=my-store-4191037","responsive=yes");
// ]]></script></div>

Change 4191037 on ID of your store (you can find it in your ecwid account).

Then go to Appearence - Widget and add to Ecwid widget area 3 text widgets: for cart, for navigation, for search.

Add to cart text widget code

          <div> 
            <script type="text/javascript" src="http://app.ecwid.com/script.js?4191037" charset="utf-8"></script> 
            <!-- remove layout parameter if you want to position minicart yourself --> 
            <script type="text/javascript"> xMinicart("layout=attachToCategories"); </script> 
          </div>

For navigation

          <div> 
            <script type="text/javascript" src="http://app.ecwid.com/script.js?4191037" charset="utf-8"></script> 
            <script type="text/javascript"> xVCategories(); </script> 
          </div>

For search

          <div> 
            <script type="text/javascript" src="http://app.ecwid.com/script.js?4191037" charset="utf-8"></script> 
            <script type="text/javascript"> xSearchPanel(); </script> 
          </div>

Don't forget to change 4191037 number to your ID and set titles for each widget.

Also make sure that you enable in Theme Options - Appearence/color Ecwid store customization.

When you change color scheme of website, ecwid pages and customization change color to match design, but if you want to change titles on buttons and more deeper customization, I include psd sources for each element of ecwid store in folder PSD > ecwid. Also in folder PSD you can find all ecwid store pages in psd. If you want to add such beautiful thumbnails with shelves like in my demo you can use psd source "thumbnail" in folder images > ecwid

I included one interesting shortcode - Autocontents. It automatically add contents based on some tag. For example, you can divide your long article by h2 heading, so for creating autocontents add such shortcode

[wpsm_titlebox title="Contents" style="1"][contents h2][/wpsm_titlebox]

Satisfy results.

Also, you can use more powerfull wpsm_toplist shortcode, see how to use it

Sometimes, when you add shortcode in post, you will find some incorrect spaces. This is because of wrong wordpress autoformatting. For fixing this problem, just add to function.php code

remove_filter( 'the_content', 'wpautop' );  
add_filter( 'the_content', 'wpautop' , 99);  
add_filter( 'the_content', 'shortcode_unautop',100 );

For adding slider. There is super easy way to add slider with post images to post. Add any pictures from standart wordpress uploader.

You can add many photos at once, just hold ctrl. When you upload pictures, don't insert them in post, just close popup

Click on shortcode button. Choose slider from post images shortcode in media section. Click to insert. And, it's wonder. All images that you uploaded from post will be in slider.

Note, slider generates images with large size of pictures. You can change this size if you need on page Settings - Media. Width of post content is 765px, so I recommend you to use it. And I like 400px height, but you can add any height.

For easy adding carousel. Click on standart add media button of wordpress. Create gallery of images and insert it in post. No matter what gallery settings you set, so leave it by default. Then go to text view of visual editor. In place where gallery added you find code like

[gallery ids="1042,1041,1040,1043"]

Copy only ids, it will be like 1042,1041,1040,1043 and erase gallery shortcode. Click on theme shortcode button. Choose Gallery carousel shortcode, then you can add title of gallery, insert copied ids. And click insert button for adding to post. That's all, enjoy.

How to add notice on your ads when users use adblock plugin

From version 2.2.0 you have an option to set notice on your ads when people use adblock that cuts ads. Go to theme option - Ads option to enable this option. If you want to add such notice to your post (or widget ads), just wrap your add with

<div class="mediad"></div>

Categorizator - is like directory of all categories on site. Such page is good to help users navigate on site, also, such page can be used on home page as module. There are several things for this from 4.4 version

1. Categorizator shortcode

Shortcode has some options. By default it shows you all categories, but you can enable or disable definite categories

2. Second way is to use category carts. (you can use them not only for categories)

You can find cart box module in shortcodes and also in Visual Composer modules