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:
jQuery(document).ready(function(){
$('.entry-meta').hide();
});
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:
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.