Kebab Case: What It Is and How It Works

Kebab case is a way of writing multi-word names where every word is lowercase and the words are joined with hyphens. “User Name” becomes user-name. “My Awesome Page” becomes my-awesome-page. It’s the convention WordPress uses for post slugs, the one CSS uses for class names, and the one HTML uses for custom data attributes. If you’ve ever changed a post URL in WordPress, you’ve written kebab case.

Below I’ll cover where it actually shows up in practice, how it compares to camel case, Pascal case, and snake case, and when you should (and shouldn’t) use it.

What kebab case looks like

The two rules are simple: everything lowercase, hyphens instead of spaces. A few examples:

My String             »  my-string
Reasons to Build a Blog  »  reasons-to-build-a-blog
SCRIPTLOADER          »  scriptloader
User Profile Page     »  user-profile-page

Single-word names stay as one lowercase word (no hyphens needed). Acronyms lose their capital letters along with everything else.

Where you’ll actually see kebab case

Kebab case lives in specific parts of the web stack where hyphens are safe and lowercase is preferred:

• WordPress slugs use kebab case by default. Your post title “How to Install WordPress” becomes how-to-install-wordpress. Google treats hyphens as word separators, so how-to-install-wordpress reads as four words while howtoinstallwordpress reads as one long nothing.
• CSS classes and IDs follow the same pattern: .primary-button, .site-header, .wp-block-list. Kebab case is the CSS norm, works everywhere, and doesn’t need any escaping.
• HTML custom attributes like data-user-id, data-toggle-target, and aria-labelledby have to use kebab case. The HTML spec requires lowercase, and hyphens are the only separator that’s valid.
• WordPress theme and plugin folders, for the same reason: wp-content/themes/twentytwentyfour-child/, wp-content/plugins/wp-rocket/. Linux filesystems are case-sensitive, so hyphens prevent accidental mismatches.
• Config file keys in YAML and JSON, especially in Docker Compose, GitHub Actions, and Kubernetes manifests. Not universal, but common enough to recognize on sight.

WordPress even ships a helper function, _wp_to_kebab_case(), for converting strings into kebab case inside plugins and themes.

Kebab case vs camel case, Pascal case, and snake case

Four naming conventions cover almost everything you’ll see in code:

The quick version:

• Use kebab-case when hyphens are allowed and lowercase is expected (URLs, CSS, HTML).
• Use camelCase for JavaScript variables and function names.
• Use PascalCase for anything that acts like a class or component.
• Use snake_case in languages where hyphens aren’t valid identifiers (Python, PHP variables, SQL).

Kebab case can’t be used inside most programming languages as a variable name, because the parser reads the hyphen as a minus sign. That’s why you see camel case and snake case everywhere inside code, and kebab case in the stuff the code produces (URLs, class names, file paths).

When to use kebab case (and when not to)

Reach for kebab case when:

• You’re creating a URL or a WordPress slug
• You’re naming a CSS class or ID
• You’re adding a data-* attribute in HTML
• You’re naming a theme or plugin folder
• You’re writing config keys in a YAML file

Avoid kebab case when:

• You’re naming a variable or function in JavaScript, Python, PHP, or any language where the hyphen is a subtraction operator
• You’re naming a database table or column in SQL (snake_case is the standard)
• You’re naming a class or component (PascalCase is the norm)

Why “kebab”?

The name comes from the visual: words skewered together on hyphens the way meat and vegetables get skewered on a kebab stick. Snake case looks like a snake slithering through underscores. Camel case has humps where the capital letters are. The programming community, once in a while, is delightful.

Bottom line

Kebab case is the web’s default casing for anything a browser or server reads as a single string of characters: URLs, CSS selectors, HTML attributes, file paths. You probably write it every day without thinking about it. If you need to convert a title to a slug quickly, this online hyphen-converter handles one-offs, and _wp_to_kebab_case() does it inside WordPress code.