Adifier Documentation

Classified Ads WordPress Theme

Installation

Inside of the Adifier_WP/01_Adifier_Theme folder you will find the theme zip caller adifier.zip. For those who are familiar with the theme installation is the same as for any other theme. For those who do not know how to install the theme, please follow this short installation tutorial.

 

Installation Procedure

The first thing you need to do when you want to install a new WordPress theme is to login to your site admin page. Once there, go to Appearance -> Themes.

Here, you will see all the themes you have currently installed in your application. To add another one, simply click on the Install Themes tab.

To installl Adifier theme click on the Upload link at the top of the page.

Now, click the Choose File button, select the archive of your theme from your local computer and press the Install Now button.

In few seconds, WordPress will upload and extract the theme archive for you. All you need to do next is to press the Activate link under the message for successful theme installation.

After the theme has been installed, there will be notification about to isntall required plugins for the theme. Click on the link Begin Installation and on the next page select all plugins and select bulk action Install

After that click on Return To The Required Plugins Installer and again select all the plugins and this time select bulk action Activate.

Demo Content

In order to import demo you need to follow these steps.

1. Go to Appearance->Import Demo Data and click on Import Demo Data and wait for the process to finish. If you receive errors 500 or 404 or you do not see Success message then make sure that max_execution_time on your server configuration (php.ini) is not set high enough ( it would be best to set it to 0 - zero for unlimited time )

2. Go to Settings->Permalinks and set permalinks to Post Name and click Save Changes

Options

All theme options are available in Adifier WP which you will find in the top left corner. Here we will only mention options which needs a little more details so you know how to use them

 

 

Ads

In order to add/edit ad navigate to Ads in the WordPress dashboard. There you will see the list of already created ads and option to Add New. Everything related to the ad is located on edit screen of the  advert. Most of the options there are self explanatory so here we will mention only specific ones.

Images

On the front end first image is featured image followed by images from the details of the ad. You can change the order of the images by dragging and dropping them while the featured image will always be the first one.

Ad Type

From the dropdown you are able to select type of the ad. When type is Sell you input Price, when it is Auction you input Start Price and for the rest you do not set price or start price at all.

Contact Information

With these settings you are able to overwritte settings from the profile. In order not to setup  map location and phone number on every single add, users can setup default location and phone in their profile options. If however certain ad is located elsewhere and / or seller shoud be contacted via another phone number these options will allow you to add those information.

Ad Report

When and ad is reported you will receive mail with report reason and link to edit screen of the reported ad. This field will hold the reason so you can act accordingly.

Additional Information

In this box you will see custom fields. In order for this field to be populated you need to select categories. Categories are always selected from the top parent to latest child and not latest child only. In order for custom fields to appear when parent and child are selected, they must also be selected in the categoies option of the custom field group ( categories on which to show group of custom fields )

Display Author, Comments

By default these are hidden by WordPress and in order to activate them just visit Screen Options in the right upper corner and check author discussion and comments

Why two locations

First location which you are selecting with checkbox is used when you are set to filter ads by predefined locations while other one ( with map ) is used when you are using geo location and also in order to dispaly location on the ad single page. In the location on map you also have country, state, city and street but they are auto populated once you select place on the map while allowing you to edit them. When value of geo location is selected to be displayed on single or profile pages values of these fields are being used.

Auctions

Since other types of ads are simple and self explanatory here we will write a few words about auction ad. Auction has separate expiration time option ( which you set in the theme options and it is usually shorter )

When user visits his own auction he will not be able to see bidding box. Other users will see this:

Minimum value of the next bid is determined with latest bid + bid step which you also configure in theme options. Bidding history will reveal bidding values but it will not reveal persons who bid. When user places a bid, that auction is recorded to the list of their auctions and he/she can access it from their dashboard. To protect the buyers when seller deletes auction it will be removed from their dashboard but it will remain for you in the backend so in a case of complains from the buyers you will have information to react on. Once the auction has ended seller is informed about the buyer who bid the highest value and in the same time that buyer is informed about he wining the auction. Seller has 24h to contact the buyer. Seller on the auction edit screen has the information about all the bids and links to buyers profile as well as the contact options so in a case where some buyer declinedd to purchase goods seller can contact other buyers ( if he wants to ).

Categories

Ad categories beside their regular options have 3 more and those are:

  • Category Image - this image is being used on categories element wehen you select style with background image
  • Category Marker - this is being used on displaying ad on the map. It is important to note that you can assign marker to parent and all children will have that marker, if you want specific child to have different marker just add it to that child.
  • Category Icon - this one is also being used on categories element

Search

In order to activate the search you need to create one page with Search tempalte assigned to it

Orders

Orders represent purchased packages and ad promotions. You can access them from the WordPress dashboard by clicking on the Orders. Each order has information about the buyer, transation and purchased goods. They also have option to refund it ( only full refund is available ). When transation is via Bank it is stated that you need manually to do the refund. After you've done manuall refund then you can check refund checkbox which will remove products from the users's profile / ad. When working with Authorize.Net and PayUMoney you must allow at least 24h in order for payment to be settled before issuing refund.

Custom Fields

Access Custom Fields panel from the WP dashboard

Adding New Group

First step is to create new group of fields. Input it's name ( for your reference in backend ) and select categories in which to be displayed. When selecting categories make sure that you've selected all categories in hierarchy ( from top parent to deepest child ). Once you've saved group it will appear in the right box. In order to add cusotm fields to group click on the group name.

Adding Custom Fields

Name of the custom field is also it's main label. If the field is type of numeric range you can add prefix and / or suffix. If you want to add prefix use this '[PREFIX]' and sbustitute PREFIX with your desired one and for suffix use this '(SUFFIX)' and replace SUFFIX with your own one.

You can skip slug and it will be generated from the Name of the custom field. If you want a specific one make sure it does not contain special chars or spaces. You can use - and _

Default Sort Order is how you want for the values to be sorted for this field.

Field description will better explain you and your users what field represents.

Field Fixed will allow you to setup your predefined values which users can not expand. For example you want field to have only options Yes nad No then you will set this option to Yes and you will add terms Yes and No on your own. If the value is set to No then users will be able to add required fields from the front end.

After you've added custom field it will appear at the right box from where you are able to edit/delete it or to configure terms. When you click on configure terms you will notice default WordPress taxonomy edit screen.

 

Conversations

In this panel you will be able to see list of all conversations between the users, by click on one of them you will be able to see list of messages with control of deleting both of them

How Users Start Conversation?

In order to keep the messages organized by an ad, users can contact other users only from the ad single pages. When they visit an ad a contact button will appear under the phone button which will allow them to initiate conversation. In their dashboard they will be able to continue it. When user visits his own ad he will not be able to see the button.

Reviews

In this panel you will be able to see list of all reviews between the users with control of deleting them.

How Reviews Work?

Let's say we have two users. User S (seller) and user B (buyer). User B visits ad from user S and he sees contact button. He sends initial message. In it's dashboard next to conversation he will see a star representing button for review but it is disabled. It will remain disabled until user S responds. This is done so we can protect both buyers and sellers. Once the button becomes active user B will rate user S as seller while user S will be able to rate user B as a buyer and those reviews are available for all users to see them. Once the review is submitted it can not bre changed.

User Profile

Adifier expands user profile settings by adding User Details section. Location set in the profile page is by default applied to submitted ad ( if it is not set on ad edit screen ). User status is set to Inactive untill it confirms mail.

Builder Specifics

Theme uses page builder to form home pages, How It Works page. Working with the page builder is pretty straight forward since it has explanation on each action ( hover over icon ). Here we will explain only more complicated things we've used in building the theme.

Pulled Shadowed Box

Start by adding new row. Click on the row layout button and in the custom columns input box input 1/12+10/12+1/12. Usualy we assume that there are 12 columns on the page and we can setup column in any way but keeping the amount in columns to be 12 ( fo example we can setup two columns 7/12 and 5/12 or 6/12 and 6/12 ). Or you can select three columns and then with dragging set their width. In this case make first and last column to be 8%.

in the middle column add categories element and set it to your needs.

In order to pull it up open column settings

Switch to Styling -> Background and place any color you like ( default is #f8f8f8 ) Then switch to Box tab and set upper margin to negative half of the box height ( you will see box height on the front end ), set padding for the content, then scroll down to border radius and set that and at the bottom set box shadow. Here's the values used on the demo:

Side Image

In the demo two column ( 5/12+7/12 ) has been used.

1. Open style settings of the row and enable option Equal Height which will make columns equal height

2. Open style settings of the left column and navigate to Styling -> Box and in the Padding option set 100px for topa dn bottom padding.

3. Open style settings of the right column and navigate to Styling -> Background and enable Advanced background option. Select an image and then scroll down and set BG Repeat to No, BG Position to center, BG Attachment to scroll and BG Size set to custom and in the input box write 100%.

4. Depending on the image you are using you may have to adjust settings to your needs.

Widget Icons

In  order to add some icon you first need to add Text widget to sidebar and switch to Text mode like shown on this image:

Now you can add HTML tag for the icon. Note that part style="margin-10px;" is not required and it is there just to improve the look of icons

Available list of the icons:

 Button with heading font and / or login/register modal opening

If you want for button to have font same as heading fonr add header-alike class to Button extra class option

If you want to trigger login or register modal from button put #login or #register into link option depending what you need. For submit link use #submit it will show login for logged out users and link to submitting form for the logged in users

Beaver Builder

In order to make Beaver Builder compatible with bootstrap ( regarding widths ) you must do the following. Open Global Settings

Then set  Rows -> Padding to 0, Rows -> Max Width to be 1140 and Modules -> Margins to 0

Custom Sidebars

Custom sidebars are there so you can organize sidebars for pages which use page builder. You can set number of custom sidebars in Adifier WP -> Overall -> Custom Sidebars. In order to use sidebars on page builder open your page and from the list of elements select Widgets then click on WordPress SideBar. From the list of the sidebars select the one you want and it will be added to the page. You configure widgets on that sidebar in Appearance -> Widgets

XML/CSV/XLS Import

In order to import ads from first you need to install plugin WP All Import. In order to do that go to Plugins -> Add New and search for it and from there you will be able to install it and activate. Also you need to install & actiavte Adifier Import which is offered to you by theme.

Working with WP All Import is explained here http://www.wpallimport.com/documentation/getting-started/importing-an-xml-or-csv-file/

Adifier Import ads custom options for importing which you can access from Adifier Import

Images can be accessed from Adifier Images

In order to import Advanced Data like Make, Model, Color etc... First you need to create them in Custom Fields section ( explained in the docs ). You only need to create fields and not values since those will be imported. For example for category Vehicles you create nested field with name Model|Make and that's it.'

Next go to import and in the section Taxonomies, Categories, Tags you will see your created custom fields. From here you can now map them just like regular categories ( explained in the video above )

Retina

If you want to have crisp images on the mobile phones ( mostly for the logo ) you can use plugin https://wordpress.org/plugins/retina-2x/ which will show double image on mobile phones. Basic of the plugin is that when you are prearing images prepare regular and double images. Double image must be named exactly like the regular one with the addition of @2x. So for example if the image name is IMG.png the double one would be IMG@2x.png and upload it at the same time in order to have it in the same directory.

Another solution is that you create SVG logo in which case you will not need any third party plugin. After you've uploaded logo you must go to Appearance section and define at least width of the logo.

Optimizing Theme

Main thing in order to have fast site is to have good solid hosting. This rule applies on any theme available. In order to optimize adifier you can install these plugins:

 

Image Watermark

In order to have image watermark feature go to Plugins -> Add New and search for plugin called 'Image Watermark'. Once you've installed and activated it go to it's settings in Settings -> Watermark. Most imnportant part you must do is to to set these options:

1. Enable watermark for - select 'on selected post types only' and from the offered post types select only 'advert'

2. Frontend watermarking - enable this option

This one is optional:

Automatic watermarking - if you want to watermark images related to ads which you upload in admin backend ( opn advert edit screen ) enable this option

These two options will enable that images uploaded from frontend are watermared and only images related to ads.

Plugins And Scripts

Plugins used to create Adifier theme:

  • Redux Framework

Scripts used to create Blogus theme:

  • Bootstrap
  • jQuery
  • Magnific Popup
  • OWL Carousel Slider
  • jQuery CSS Customizable Scrollbar
  • Dropzone
  • MarkerClusterer
  • Google Maps
  • Select2
  • DateTimePicker

FAQ

1. API Key added but map is not loaded or search by places does not show any suggestions

You have issue with your API. Open browser console F12 switch to Console tab and read errors which google gives you and fix them ( ignore warnings )

 

2. How to change header bg image?

Open section settings http://prntscr.com/kr1d4i

 

3. Site is broken after theme activation

PHP version on your server is outdated. Contact hosting company so they can update it per WordPress requirements  https://wordpress.org/about/requirements/

 

4. How to transalte the theme?

a. Download .pot from languages folder
b. Open it in poEdit program and translate strings
c. Save file with your language code as file name
d. Upload generated po and mo file back to languages folder
e. Change language in Settings->General.

 

5. How to update the theme?

a. Download All Files & Documentation to get changelog
b. If you did not edited theme files delete current version and install new one or install plugin http://envato.github.io/wp-envato-market/ for easier update.
c. If you did edited then move modifications to new files and install the theme
d. If you have edited theme files via child theme switch to parent theme and update it then update child theme files which are changed in recent update ( list of changed files is in changelog )

 

6. Demo content not fully imported

If you did not saw All Done message then your server configuration for max script execution time is set to low. Contact your hosting company and tell them to increase it or set to 0 ( zero ) for unlimited

 

7. Why images after import are grey ones?

Images from demo are not included in the demo content, in place of them, placeholder image is being used ( same behavior like demo images ) in order not to violate image license.

 

8. I've created Facebook app but it throws error with code 191

You did not placed redirect URL here http://prntscr.com/l3mgml located in Adifier WP -> Social Login facebook section

 

9. Emails are not sent ( contact, message, registration,... )

Go to Adifier WP -> Emails and make sure that email domain is same as domain of the site. If it stills goes to spam or you are not sure if your server is configured for sending mails contact your hosting company. Most likely they will probably recommend usage of SMTP so you need this plugin https://wordpress.org/plugins/wp-mail-smtp/

 

10. Clicking on Submit Ad goes to home page or refreshes current page

You have installed and activated YOAST seo plugin which disables author pages by default. Follow this tutorial to enable it https://kb.yoast.com/kb/disable-enable-author-archives/

 

11. You are using Autoptimize but submit page does not work.

Go to Settings -> Autoptimize and place this seal.js, js/jquery/jquery.js,tinymce.min.js here http://prntscr.com/lhwgul

 

12. How to add labels to menu like NEW on demo?

Go to Appearance -> Menus and from top right corner open Screen Settings and enable Description Then in each item of the menu you will have textarea in which you write what ever you want

 

13. Child theme usage

It is used to store changes of main theme files. Install & activate it just like normal theme. Copy file you wish to edit from main theme to child theme respecting it's folder structure ( if file is in includes folder create that folder in child theme )

Rate

If you like this theme rate will help me a lot.