</> WPCODE & CUSTOM CODE

Add custom code to WordPress with WPCode

Learn to add HTML, CSS, JavaScript, and PHP systematically with Code Snippets. Understand Auto Insert, shortcodes, display conditions, and how to test code before enabling it on a live site.

Start learning WPCode → View the code checklist

✓ HTML / CSS ✓ JavaScript ✓ PHP Snippets

wordpress-custom-code

Custom Website Style ACTIVE

1 .onsello-button {

2 background: #1473e6;

3 color: #ffffff;

4 border-radius: 10px;

5 padding: 12px 20px;

6 }

INSERT METHOD

Auto Insert

Shortcode

01 · Code Types HTML / CSS / JS / PHP 02 · Workflow How to create a snippet 03 · Insert Auto / Shortcode 04 · Safety Review before activation

WPCODE 101

What is WPCode used for?

WPCode organizes custom code into separate snippets, making it easier to enable, disable, edit, and control where each snippet runs than editing theme files directly.

</>

Organize code into snippets

Group code by purpose, such as CSS, header code, tracking scripts, or custom functions, so it is easier to update later.

Enable or disable snippets

Disable a snippet without deleting its code—useful for testing or troubleshooting.

LOC

Control where code runs

Choose whether code runs automatically, in a specific location, or only when called with a shortcode.

CODE TYPES

How does each code type differ?

Select a code type to see a basic example and learn what it is used for.

STRUCTURE

HTML

Use it to create structure and content, such as text, buttons, boxes, and other elements displayed on a webpage.

example.html HTML

<div class="notice-box"> <strong>WordPress by Onsello</strong> <p>เรียนรู้ WordPress แบบเข้าใจง่าย</p> </div>

DESIGN

CSS

Style colors, fonts, spacing, borders, responsive layouts, and more.

custom-style.css CSS

.notice-box{ padding:20px; border-radius:12px; background:#eef6ff; color:#172033; }

INTERACTION

JavaScript

Add behavior and interactions, such as button clicks, opening dialogs, and other dynamic actions.

interaction.js JS

const button = document.querySelector('.demo-button'); if(button){ button.addEventListener('click', function(){ console.log('Button clicked'); }); }

WORDPRESS LOGIC

PHP

Add or customize WordPress behavior using hooks, filters, or functions.

wordpress-function.php PHP

add_filter('excerpt_length', function($length){ return 25; });

SNIPPET WORKFLOW

Create a snippet in this order

Don’t activate a snippet right away. First choose the correct code type and where it should run.

CREATE

Create a new snippet

In WPCode, create a custom snippet and give it a clear name that immediately explains what the code does.

→

CODE TYPE

Choose a code type

Choose HTML, CSS, JavaScript, or PHP to match the code you plan to use.

→

CODE

Add the code and check the syntax

Check brackets, punctuation, selectors, functions, and scope before saving.

→

INSERT

Choose an insertion method

Choose Auto Insert to run code automatically, or use a shortcode when you want to place it at a specific location.

→

TEST

Save and test

Check the live page, open Developer Tools if needed, and make sure no layouts or other functions are broken.

→

ACTIVE

Activate for production

After testing, activate the snippet and note which part of the site the code relates to.

✓

INSERT METHOD

Where should the code run?

WPCode is about more than adding code. It also lets you control when and where that code runs.

AUTO

Auto Insert

Best for code that needs to run automatically, such as site-wide CSS or scripts.

[ ]

Shortcode

Best for content or functions you want to place on specific pages or in specific locations.

Header / Footer

Use this for scripts that need to load in the head or just before the closing body tag, as required by the script.

Conditional Logic

Use this to limit code to selected pages, users, or other supported conditions.

SAFE CODING

Check these four things before activating code

Custom code is powerful, so keep its scope limited and test it before using it on a live site.

Use a clear name

A snippet name should explain what the code does and which part of the site it affects.

Limit the scope

Don’t run code across the entire site if it is only needed in specific places.

Use caution with PHP

Check the syntax and understand what each function will affect before activating a snippet.

Test after activation

Check the site on desktop and mobile, and test key features to confirm everything still works.

WHEN TO USE

When should you use WPCode?

Not everything needs custom code. If an existing setting or widget already does the job, choose the option that is easiest to maintain.

Best for WPCode

Use WPCode when...

You need to add a small amount of site-wide CSS.

You need JavaScript for a specific interaction.

You need to add a WordPress hook or filter.

You need to place a script in the header or footer.

Consider other options first

Avoid using custom code when...

Elementor already has a widget that does the job.

Astra already has a setting for that.

The code is too long or complex to maintain easily.

You don’t know what the code from an external source does.

CODE CHECKLIST

Review your snippet before activating it

Check each item you have verified. Your readiness score will update automatically.

SNIPPET READINESS

Once the checklist is complete, the snippet is ready for testing and live use.

✓

Give the snippet a clear name Make it clear what the code does.

✓

Choose the correct code type HTML / CSS / JavaScript / PHP

✓

Check the syntax Make sure no brackets or punctuation are missing.

✓

Keep the scope limited Run code only where it is needed.

✓

Choose the correct insertion method Use Auto Insert or a shortcode as appropriate.

✓

Tested on desktop The layout and features work as expected.

✓

Tested on mobile Nothing overflows or becomes unusable.

✓

Check the live site after activation Confirm there are no errors or unintended effects elsewhere.

FAQ

Frequently asked questions about WPCode

Elementor’s Custom HTML widget is best for code used directly on a specific page and in a specific location. WPCode is better for reusable snippets, site-wide code, or centrally managed code.

If the CSS is only for one section and you want to keep it close to that element, add it there. For styles used across multiple pages or site-wide, WPCode is easier to manage.

Use Auto Insert when a snippet should run automatically according to a location or condition. Use a shortcode when you want to place it on a specific page, widget, or location.

Yes. PHP can directly change how WordPress behaves on the server. Understand the code, check its syntax, and test one snippet at a time. Avoid activating several new snippets at once.

For small snippets, WPCode makes it easier to enable, disable, name, and find code without tying custom code directly to the theme files.

NEXT STEP

You’ve learned to manage custom code. Next, improve your site’s SEO.

Next, learn how to use Rank Math SEO to manage SEO titles, meta descriptions, sitemaps, and other elements that help search engines understand your site.

Learn Rank Math SEO →