This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

DZS Ajaxer Lite – Ajaxify Your WordPress Site and Comments

Description

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.

Installation

First thing you have to do is go to your WP Dashboard admin, click Plugin > Add New, then the Upload Plugin button.

demo install – https://youtu.be/RllS92VPJp0

FAQ

A question that someone might have

An answer to that question.

What about foo bar?

Answer to foo bar dilemma.

Reviews

September 11, 2017
While this plugin is a nice attempt, I was really frustrated to see that the Javascript source code is obfuscated preventing in any way to debug it. That's really annoying because it generates some errors after the page has been loaded and you have no way to understand what's going wrong. More over, you're violating the GPL licence by not providing the non obfuscated source code as part of the module.
Read all 2 reviews

Contributors & Developers

“DZS Ajaxer Lite – Ajaxify Your WordPress Site and Comments” is open source software. The following people have contributed to this plugin.

Changelog

1.0

  • release