Demos - https://0.s3.envato.com/files/182575275/index.html
Setup is done in the admin page accessible from the WP Dashboard. Ajaxer Page.
If the button saying Install Default Settings for {{your_theme}}, is there , then you should click that. Those are our recommeded settings. You can change transition and preloader after.
If there is no such button, it means that your theme is not in our predefined books and require some manual adjustment. Generally, it means to primarely just set the content container and the menu selector, which we will show you how to do by explaining each setting.
Enable Ajax?
Setting this to off will disable the plugin functionality, so it's mandatory that it's left to ON. Use OFF only for testing purposes.
Content Selector
This is the content selector. If you have basic html knowledge, it's easy to find out. If not, it's no problem, we'll explain below how to setup.
Tip! - the basic HTML / CSS selectors are . for class and # for id. First we need to go to our frontend and right click on a element from the content and click Inspect.
Next, the DOM tree will appear. We need to go as high as possible and look for an element that covers the content area ( in the blue area ) .
if it's not possible to select only the content, and the header gets selected too, we can remove it from the content with the Move Menu on Top of Content option
This is the element we selected in the tree. We need to go higher.
This element looks like a good match. It covers the whole content area. In this case, we can either select it by id and input in the Content Selector field - #content . Or select it by class and input in the Content Selector field - .site-content. It will be the same outcome in this case, but in other cases only the id or only the class might be present. Generally, id is prefered.
If we go a little higher in the tree we will see that the parent element contains all of the site which is not what we want, we want only the content to load:
This should be all the setup for the Content Selector field.
Menu Selector
This is the menu selector. We follow the same steps to find it out. We inspect a item in the menu and find the highest menu parent. In this case, the twentyfifteen theme it's #site-navigation that should be entered in this field.
Move Menu on Top of Content
If there is no way to select the container without the menu, you can use this option to place the menu on top of the content. It can work in some themes.
Transition
Choose from No Transition, Fade, Scale Down or Slide.
No Transition and Fade are direct transitions. These provide maximum compatibility.
Scale Down and Slide are more complex transitions and might not work in all themes and with all plugins.
We cannot guarentee compatibility with all 3rd party plugins. As long as the 3d party plugin is properly coded, it should work with this plugin, but otherwise it might not.
A properly coded plugin should load all their scrips via wp_enqueue functions. And it should apply functionality via a inline scripts like this format targeting a unique class :
[...]jQuery(document).ready(function ($){ dzsap_init_functionality(".ap_idx_2",settings_ap); });
Preloader
Choose from No Preloader, Bar or Fullscreen Bars.
Extra Items to be Replaced
These selectors will be searched in the new ajax loaded content and replaced in the current page accordingly, in the same order.
Extra Items to be Added
This is similar to the .. to be Replaced setting, but the difference is that each selector will be queried in the page. If it does not exist, then the element found in the ajax content will be added to the current page. If it is found, then the contents will be replaced.
This is useful for example for a footer player outside the content, like seen in the demo.
Scripts Execute after Ajax Call ?
Select this if javascript scripts in the page should execute after the ajax call is completed. This might increase 3rd party plugins compatibility.
Scripts to Reload
these scripts will be discarded and loaded again when the new page loads
If some scripts have some special initialization inside them you can choose to have them discarded and loaded again on page load. Demo input:
scripts.min.js,owl.slider.js
These will unload and reload on page load any scripts that contain scripts.min.js or slider.js
Script Call on Page Load
javascript call on page change . - warning
Only to be modified if you know what you are doing. - might break the change. - javascript call on each page load. Example input:
jQuery('.carousel-wrap .carousel-items,.blog-masonry .masonry-items .blog-item').css('opacity',1);
This will unhide the elements specified in the jQuery selector.
How to Ajaxify Search Form
Ajaxer tries to ajaxify the search form by default. First try to search something, and if the search is not done ajaxified, then proceed to this simple setup.
Right click the search field, click Inspect
Then you will need to search for the form element that contains it. In this case it's .searchform . After you found it, you can just to Ajaxer Settings and input it in the Search Form Selector field.
How to Ajaxify Comments
Ajaxer tries to ajaxify the comments form by default. First try to comment something, and if the comment is not done ajaxified, then proceed to this simple setup.
Right click the search field, click Inspect
Then you will need to search for the form element that contains it. In this case it's .comment-form . After you found it, you can just to Ajaxer Settings and input it in the Comment Form Selector field.
Developer Tips
Note: this is for advanced users only. Changes to any topic covered here can break the portal.
Recommended Programs
You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:
.js, .php, .scss - phpStorm SASS
If you are a developer you will notice there are some .scss files included too. This is the language for a css preprocessor which makes a developer's life easier. This is optional but if you want to try it here is the site.