CSS and JS

The badge is plain text. Now we make it red, and we learn how assets reach the browser.

Step 1. Make the files

cd "/Users/sejim/Local Sites/simple-boards/app/public/wp-content/plugins/order-boost"
mkdir -p assets/css assets/js
touch assets/css/orb.css assets/js/orb.js

Step 2. Type the CSS

In assets/css/orb.css:

.orb-badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 10px;
	background: #e63946;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.orb-badge matches the class we printed in Episode 5. That is the only link between the two files.

Step 3. Load the CSS

In order-boost.php, add this inside orb_init:

	add_action( 'wp_enqueue_scripts', 'orb_enqueue_assets' );

Then add this function at the bottom of the file:

function orb_enqueue_assets() {

	if ( ! is_woocommerce() && ! is_cart() ) {
		return;
	}

	wp_enqueue_style( 'orb', ORB_URL . 'assets/css/orb.css', array(), ORB_VERSION );
}

wp_enqueue_scripts is the bell for front end assets. It rings while WordPress builds the page head.

Why not a plain <link> tag?

Because you are not alone on the page. The theme loads files. Ten other plugins load files. Some of them load the same library.

wp_enqueue_style puts your file in a queue with a name. WordPress then prints the queue one time, in the correct order, with no repeats. A hand written <link> tag skips all of that.

Never print a <link> or a <script> tag by hand. This is the first thing a reviewer checks.

The four values

wp_enqueue_style( 'orb', ORB_URL . 'assets/css/orb.css', array(), ORB_VERSION );

1. 'orb' is the handle. It is the name in the queue. Other code can say “load after orb”.
2. The address. ORB_URL from Episode 1. A browser needs a web address, not a disk path.
3. array() is the list of files that must load first. We need none.
4. ORB_VERSION gets stuck on the end: orb.css?ver=1.0.0.

That version is not decoration. Browsers keep files to save time. Change the CSS and the customer still sees the old one, sometimes for weeks. Change the version, and the address changes, so the browser must fetch it again.

This is the real answer to “I updated the plugin but nothing changed on my site”.

The if at the top

The badge only shows on shop pages and the cart. So the CSS only loads there.

• is_woocommerce() is true on the shop, on category pages, and on product pages.
• is_cart() is true on the cart page. Note that is_woocommerce() is false there, which surprises people.

Every file you load costs the visitor time. A blog post has no badge, so it gets no badge CSS.

Step 4. Test

Reload your shop page. The badge is red now.

Open View Source and search for orb.css. You see your file with ?ver=1.0.0 on the end.

Open a normal page or a blog post. Search again. It is not there. Correct.

Step 5. Type the JS

In assets/js/orb.js:

jQuery( function ( $ ) {
	$( '.orb-badge' ).addClass( 'orb-badge--ready' );
} );

Add this to the CSS:

.orb-badge {
	opacity: 0;
	transition: opacity 0.3s;
}

.orb-badge--ready {
	opacity: 1;
}

The badge starts invisible and fades in. Not because we need it, but because you can see with your own eyes that the script ran.

Step 6. Load the JS

Add this line under the style line:

	wp_enqueue_script( 'orb', ORB_URL . 'assets/js/orb.js', array( 'jquery' ), ORB_VERSION, true );
}

Two new things.

array( 'jquery' ) is the dependency list. Our file uses jQuery, so jQuery must load first. WordPress ships with jQuery and it knows that handle. Now the order is guaranteed.

Forget it, and you get $ is not defined in the console, on some sites only. That is a classic ticket, and this array is the fix.

true at the end means “put it in the footer”. Scripts in the head block the page while they load. Scripts in the footer do not. Use true unless you have a real reason.

Step 7. Test

Reload the shop. The badge fades in.

If it stays invisible, the script did not run. Open the browser console and look for an error. This is the moment to learn that habit.

Break it on purpose

Break 1. The wrong constant.

Change ORB_URL to ORB_DIR in the style line. Reload the shop.

The badge is invisible and unstyled. View source and look at the tag:

<link rel="stylesheet" href="/Users/sejim/Local Sites/...">

A disk path in the browser. It means nothing to a browser, so the file never loads. Remember this shape. Path in a href is always the same mistake.

Put ORB_URL back.

Break 2. The missing guard.

Move this line out of orb_init, to the bottom of the file:

add_action( 'wp_enqueue_scripts', 'orb_enqueue_assets' );

Now deactivate WooCommerce and load the shop. The site dies:

Fatal error: Uncaught Error: Call to undefined function is_woocommerce()

That function belongs to WooCommerce. With WooCommerce gone, the function is gone, and our code still calls it.

This is Episode 1 again, in a new place. Any code that touches WooCommerce must sit behind the guard.

Move the line back inside orb_init. Turn WooCommerce on. The site returns.

Where we are

Your plugin now has a settings screen, a badge on the shop, and its own CSS and JS on the correct pages only.

Next episode: the cart notice. “Spend $12 more and get FREE shipping.” That one does maths with real cart data.