How to Add CSS Classes and IDs in WordPress

Classes and IDs connect your HTML with CSS and JavaScript. A class is reusable; an ID identifies one element within the page. Choosing a specific class for a snippet lets you change that component without restyling every image, button, or heading in WordPress.

Add a class to a supported block

Select the block and open its settings. Where available, expand Advanced and find Additional CSS Class(es). Enter a class name such as iljs-zoom without a leading dot. Multiple classes are normally separated by spaces. Save the page and inspect its front-end markup to see which wrapper received the class.

The exact placement depends on the block. An Image block might put the class on a figure rather than the inner img. A Group may supply another wrapper. Your CSS must match the element that actually receives the name. The image zoom tutorial explains why clipping and the image transform sometimes belong on different elements.

If the block does not expose this setting, use supported custom markup or an editor-specific class interface. Do not assume every block and plugin has identical Advanced settings.

Match class names and selectors

In HTML, use class="iljs-zoom". In CSS, use .iljs-zoom. In JavaScript, document.querySelector('.iljs-zoom') accepts a CSS selector. Leaving out the dot in CSS or JavaScript selects an element name rather than the class you intended.

A scoped selector such as .iljs-zoom img affects images inside that wrapper. A global selector such as img affects every matching image. Keep the shared iljs- prefix when adapting these tutorials to reduce collisions with theme and plugin names.

Class names are case-sensitive in relevant matching contexts; keep their spelling consistent. Use simple letters, digits, and hyphens rather than punctuation that needs escaping. Rename HTML, CSS, and script references together, not one file at a time.

Add an ID or anchor

Some blocks provide an HTML anchor field. Enter a unique value without a hash, such as project-details. A link to it uses href="#project-details". Check the front end to confirm the block supports and outputs that anchor.

An ID should appear once per page. Repeated IDs can break navigation and make accessibility relationships ambiguous. If you copy an interactive tabs component, change every tab and panel ID in the second instance, then update both aria-controls and aria-labelledby references.

The responsive menu similarly connects its toggle to one list ID. Scoped script queries help keep behavior local, but they do not make duplicate IDs valid.

Elementor and custom HTML

An Elementor element may offer CSS Classes and CSS ID fields in its advanced options. Inspect the generated front-end wrapper because the field may not target the same element as a hand-written fragment. Feature availability and interface labels depend on your setup.

For Custom HTML, write the class and ID directly on the intended elements. Keep semantic markup and meaningful names. The code installation guide explains permissions and why a standalone document is different from a content fragment.

Diagnose a selector that does not match

Inspect the element, find its actual class attribute, and compare spelling with the copied selector. Check whether a builder added another wrapper. Then look for overriding rules; a correctly matched selector can still lose to a more specific declaration.

Avoid adding random IDs merely to make CSS stronger. A well-scoped wrapper class is generally easier to reuse. Save a unique ID for real anchor navigation or a relationship that requires it. Never give every card the same ID just because you copied one card’s markup.

Verify before publishing

Use the browser to confirm that only the intended component changes. Activate anchor links and check whether a sticky header covers the destination. If it does, apply an appropriate scoped scroll margin or fix the header offset rather than adding empty spacer elements everywhere.

Test repeated component instances, their keyboard controls, and a narrow viewport. A small naming change can disconnect code even when the page still looks correct. Keep class and ID edits deliberate and record them with the snippet’s installation notes.