Code Editor

Estimated reading: 2 minutes 12 views

Themepul themes provide a Code Editor panel within the Theme Options, allowing you to safely add custom code to enhance your website’s functionality and design without modifying core theme files.

1. CSS Editor

Purpose: Add custom CSS to override or extend the theme’s default styling.
How to Use:
1. Navigate to Theme Options → Code Editor → CSS Editor.
2. Enter your custom CSS code in the editor.
3. Save changes to apply the styles across your website.

⚠️ Tip: Always test CSS changes on multiple pages to ensure consistent styling.

2. jQuery Options

Purpose: Add custom jQuery code for advanced interactions or functionality.
Javascript Load: Select where your jQuery code should be loaded (e.g., header or footer).
Javascript Editor:
1. Navigate to Theme Options → Code Editor → jQuery Options → Javascript Editor.
2. Add your custom jQuery code.
3. Save changes to activate the code on your website.

⚠️ Tip: Wrap your jQuery code inside a document ready function to ensure proper execution:

jQuery(document).ready(function($){
    // Your jQuery code here
});

3. WP Head Code Editor

Purpose: Add custom code snippets (HTML, meta tags, scripts) to the <head> section of your site.
How to Use:
1. Navigate to Theme Options → Code Editor → WP Head.
2. Add your custom code.
3. Save changes to include it in the <head> of all pages.

4. WP Footer Code Editor

Purpose: Add custom code snippets (scripts, tracking codes) to the footer of your website.
How to Use:
1. Navigate to Theme Options → Code Editor → WP Footer.
2. Add your custom code.
3. Save changes to include it before the closing </body> tag on all pages.

Tips for Code Editor Usage

Always backup your website before adding custom code.
Test code on a staging site before deploying to a live site.
Keep your code organized and commented for easier maintenance.
Use the CSS Editor for styling, jQuery Editor for interactive features, and WP Head/Footer Editors for scripts and third-party integrations.