sandywp / plugins / ambrosite-body-class-enhanced

Ambrosite Body Class Enhanced

5.0 out of 5 stars. 5.0 5 reviews

Enhances the body_class template tag, adding some extra classes to the body (post/page slugs, post categories, and archive parent categories) useful i …

Launch a sandbox with this plugin → No signup.
Ready in seconds.

v1.3 200+ installs WP 2.8+

your-sandbox.sandywp.com/wp-admin
no screenshot published

About this plugin

When activated, this plugin causes the body_class template tag to output five additional classes.

On single posts (is_single) :
postname-[permalink slug]
single-[category slug]
parent-[parent category slug] (all parent and grandparent categories in a hierarchy of any depth)

On pages (is_page) :
pagename-[permalink slug]

On category archives (is_archive and is_category) :
parent-category-[parent category slug] (all parent and grandparent categories in a hierarchy of any depth)

Custom Taxonomies

As of version 1.3, the plugin now supports custom hierarchical taxonomies. The new body classes take the following form:

On single posts (is_single) :
single-[taxonomy]-[term slug]
parent-[taxonomy]-[parent term slug] (all parent and grandparent terms in a hierarchy of any depth)

On taxonomy archives (is_archive and is_tax) :
parent-term-[parent term slug] (all parent and grandparent terms in a hierarchy of any depth)

For single posts, the taxonomy name is included in the class name, because I felt it was important to be able to distinguish between taxonomies in cases where a post is assigned to more than one custom taxonomy, and when the same term might appear in two or more taxonomies. For example, suppose you had a real estate site with property listings in New York City, and you had two custom taxonomies defined: City and State. Then the classes would look like this:

single-city-new-york single-state-new-york

Multisite Support

As of version 1.3, the plugin now supports multisite installations. If a multisite install is detected, the plugin will output the follow additional body class on every page of the site:

site-[site ID]

Examples

If you have a post titled “Top 10 Decorating Ideas”, in category “Christmas”, with a parent category of “Holidays” and a grandparent category of “Calendar”, the additional body classes will be as follows:

postname-top-10-decorating-ideas single-christmas parent-holidays parent-calendar

Why is this useful? Because it enables you to style individual posts and pages, as well as entire categories of posts, using only CSS, without having to edit the template files or create new templates.

Continuing the above example, if I wanted to give all of the posts in the Christmas category a green heading (to give them some extra holiday cheer), I could use a CSS selector like this:

body.single-christmas h1 {
    color: green;
}

Going further, suppose I want to attach a background image of a Christmas tree ONLY to the “Top 10 Decorating Ideas” post:

body.postname-top-10-decorating-ideas div.post {
    background: url('images/xmas_tree.gif') no-repeat left top;
}

What if I want all posts categorized under Holidays (Christmas, Thanksgiving, Easter, whatever) to have a sidebar with a gold border?

body.parent-holidays div#sidebar,  /* all posts assigned to a subcategory of Holidays */
body.single-holidays div#sidebar { /* any posts assigned directly to the Holidays category */
    border: solid 2px gold;
}

These are just a few examples. If you are experienced in writing CSS selectors, you will find many more uses for the new body classes. For further discussion, check this support forum thread: https://wordpress.org/support/topic/393942

Questions

The body_class template tag is already outputting the post and page IDs. Aren’t the slugs redundant?

Yes, the post IDs can be used in CSS selectors. However, the slugs are much easier to remember and use. They will also make the CSS file a lot more readable when you come back to it a month or a year later.

The post_class template tag is already outputting the category slug. Isn’t it redundant to put it on the body as well?

Putting the category slug on the body makes it possible to target elements outside of the post div. For example, if you wanted to style the sidebar on a per-category basis (e.g. change it’s width for all posts in a certain category, or even hide it completely), you could do it using the body class, but not the post class.

5.0

5 reviews

  • 5 ★ 5
  • 4 ★ 0
  • 3 ★ 0
  • 2 ★ 0
  • 1 ★ 0

Ratings come from WordPress.org. SandyWP does not collect its own reviews.

sandywp / also on the shelf

Try another plugin

  • Head & Footer Code

    5.0 · 200K+ installs

    Easy add site-wide, category and article specific custom code before the closing </head> and </body>, or after…

  • Custom Body Class

    5.0 · 10K+ installs

    A plain simple plugin which allows you to add a custom CSS class the HTML body tag.

  • Header Footer Script Adder

    4.1 · 1K+ installs

    Easily insert custom HTML, CSS, and JavaScript into your WordPress site's header, body, and footer without modifying theme files.

Spin up a real WordPress site in seconds.

Test plugins, build a demo, hand a client a link — then squash it and start again. No local setup, no Docker.