1. Home
  2. Inserting Custom JS

Inserting Custom JS

Updated on November 22, 2017

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.

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.

To Hide the Metadata:

1Open one of your single posts. In this example, we’ll use our live demo page.
2There 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

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

custom js

4Write the appropriate JS code.

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

5Take 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:

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

2Paste the codes you wrote into the Custom JS section and Save the changes.

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.

Did this answer your question?