Benefits of enqueuing styles and scripts in osclass
Benefits of enqueuing styles and scripts in osclass

We all wish that our website stand out in comparison to others and don’t want to get noticed for being slow to load. With the help of custom style and script we try and make our website stand out. But loading lots of style and scripts can be a real pain when it gets jumbled and starts to conflict with each other eventually causing problems in terms of functionality, user experience and SEO.

A number of osclass themes and plugins are still doing it the wrong way which causes the website to break. Osclass Enqueue function will help you ease this situation.

What is osclass enqueue function ?

It is an osclass recommendation and best practice to load styles and scripts with the enqueue function. The way you add style and style is as import as the content of the file.

Osclass two enqueue fucntion osc_enqueue_script() and  osc_enqueue_style(). The osc_enqueue_script() function will load javascript files and the osc_enqueue_style() will load the css files. Both function accepts two parameter “id” and “path to the file”.

The purpose of osc_enqueue_script () function is to tell Osclass when and where to load a script, as well as about any dependencies it may have. This method enables everyone from the theme developer to the plugin developer to use the same built-in JavaScript libraries that come bundled with your Osclass installation. This way, your site avoids loading the same third-party script over and over, slowing down your page load speed and causing conflicts with the site’s theme or other plugins.

Why Does the Enqueue Function Exist?

Over time osclass community has grown huge. There are thousands of developers building osclass thems and osclass plugins and have uploaded it in the osclass market which has over 600+ themes and plugins. Theses themes and plugin will help us customize our site and make it look better.

Osclass enqueue script and style function exists to keep things running smoothly. The function enables you to add external scripts and styles in a way that helps prevent plugin conflicts. It’s a method everyone can follow so that our own sites, as well as those of our clients and customers, look great and function properly.

How Does It Work?

There are several great articles out there explaining how to properly register and enqueue styles and scripts.

<?php 

function add_scripts_and_style(){
//registering a javascript file
osc_register_script('myjs', osc_base_url() . 'oc-content/plugins/awesome_plugin/js/myjs.js', 'jquery');
//Enqueueing the script
osc_enqueue_script('myjs');
//Enqueueing a style
osc_enqueue_style('mycss', osc_base_url() . 'oc-content/plugins/awesome_plugin/css/style.css');
}

osc_add_hook('init', 'add_scripts_and_style');

I have used init hook to load the scripts with means it will execute on webpage initialization.  To read more about hooks read Osclass hooks explained, how to add and run osclass hooks

Registering and enqueuing scripts

The osc_register_script() accepts two parameter the “id” and “path to the js file”. In the above example we have used “myjs” as the id you can use any name for the id but it has to be unique. We cannot register scripts and style with the same id.

The second parameter we have passed is the path to the js file in our plugins folder. The osc_enqueue_script() accepts one parameter the id of the script to load, in our example its myjs as we have registered the script with the id of “myjs”.

Unregister scripts

The osc_unregister_script($id) function will remove script from the queue, so it will not be loaded. The function accepts the id of the script as a parameter.

Enqueuing styles

The osc_enqueue_style() function will load the css style. It accepts two parameter like osc_enqueue_script() function the first one is the “id'” and the “path to the css file” In the example above we have used “mycss” as the id and the we have added the path to the css file.

Pre registered scripts

Osclass pre registers some of the more common javascript files. Here is the list of pre registered javascript files.

osc_register_script('jquery', osc_assets_url('js/jquery.min.js'));
osc_register_script('jquery-ui', osc_assets_url('js/jquery-ui.min.js'), 'jquery');
osc_register_script('jquery-json', osc_assets_url('js/jquery.json.js'), 'jquery');
osc_register_script('jquery-treeview', osc_assets_url('js/jquery.treeview.js'), 'jquery');
osc_register_script('jquery-nested', osc_assets_url('js/jquery.ui.nestedSortable.js'), 'jquery');
osc_register_script('jquery-validate', osc_assets_url('js/jquery.validate.min.js'), 'jquery');
osc_register_script('tabber', osc_assets_url('js/tabber-minimized.js'), 'jquery');
osc_register_script('tiny_mce', osc_assets_url('js/tiny_mce/tiny_mce.js'));
osc_register_script('colorpicker', osc_assets_url('js/colorpicker/js/colorpicker.js'));

Why Does it Matter?

So at this point, you may be wondering why getting the enqueue function right matters, beyond it just being the right way to do things. Here are three reasons it does matter:

  1. functionality,
  2. user experience, and
  3. SEO.

Let’s go over how each of these can make a huge difference to your website, theme, or plugin.

Functionality

Functionality is really important. We all want our sites to work great, to play nice with other plugins, to look good, and load quickly. The enqueue system helps make that functionality happen. Here’s how enqueuing can affect your site’s functionality:

  1. The enqueue script function enables developers to take advantage of existing JavaScript libraries that are built into Osclass.
  2. Avoiding duplicate code on the page.
  3. Some developers really worry about the order in which a page loads scripts. Sometimes it can actually matter, as in the case of dependencies. However, often it’s helpful rather than critical to have scripts load in a particular order
  4. Avoiding library version confilcts

User Experience

The problems that come with improperly placed styles and scripts don’t end at functionality. Enqueuing problems can also impact user experience. It loads quickly, and doesn’t break if they try out a new plugin.

SEO

Beyond functionality and user experience, there are other factors that can be impacted by enqueuing. You may never have thought about how your Osclass theme or plugin could affect a customer’s site ranking or a user’s ability to find the site’s content

A site that’s trying to load several versions of jQuery is going to be slower. Meanwhile, search engines have started paying more attention to how quickly a site loads.

For business website owners, SEO problems that result from bad code is a concern, but one that’s easily avoided with properly enqueued scripts and styles. In fact, you could help boost your customer’s SEO by following Oslass best practices.

 

LEAVE A REPLY