Inserting Custom JS

Last Updated on

Sometimes you find yourself needing to add custom JS codes in order to add or override some sections.

In this article, we’ll explain how to add custom JS using an example about overriding the single blog post.

In this article


Writing JS Code

The custom JS section has a text box where you can write your custom JS code. You can write 2 types of JS code in this box. You can either type jQuery code or simple JavaScript code.

jQuery is already available in the theme and you just need to make sure to write the jQuery code into the jQuery ready function which is pre-available in the text box.

jQuery(document).ready(function(){
//Write your jQuery code inside this function

});

In case, you want to write the simple JavaScript code, you can write that outside of the jQuery ready function like below example.

jQuery(document).ready(function(){

});

//Simple JavaScript code outside the jQuery ready function
console.log('Hello this is normal JavaScript code writter outside jQuery ready function');

Or you can also remove the jQuery ready function from the textbox to write the simple JavaScript code.

For the purpose of this article, we’ll write custom JS code that hides the metadata of a single post.

x
Note: We assume that you are already familiar with using the developer tool in browsers to inspect elements. To learn more about it, read the Inspecting elements article.

To Hide the Metadata:

1
Open one of your single posts. In this example, we’ll use our live demo page.
2
There are three types of metadata: post date, post category and comments/likes. To disable all of them you’ll need to inspect them first.

custom js

3
Inspect the above mentioned meta data and take note of its HTML class, which here is entry-meta.

custom js

4
Write the appropriate JS code.

jQuery(document).ready(function(){
    $('.entry-meta').hide();
});

5
Take note of this code and add it into the theme settings as explained in the next section.

Inserting the JS Code

After writing the JS code, you can insert them into The Ken theme. You can add the JS code in Theme Settings.

Theme Settings

To add the custom JS code into Theme Settings:

1
From the WordPress top menu, go to Theme Settings > Custom JS.

2
Paste the codes you wrote into the Custom JS section and Save the changes.
x
Beware! Many times users tend to add script tags into this textbox. Please never add any script tags in this textbox. Adding a script tag will result in an error.

The contents of this textbox are automatically added to a script tag to ensure it’s working. The script is then placed in the footer of the document/page/site.

Was this helpful?

Related Forum Topics

There is no related forum topic

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket