Title: CSS Page Ancestors
Author: giannisg
Published: <strong>19 Novembre 2017</strong>
Last modified: 19 Novembre 2017

---

Ricerca i plugin

![](https://ps.w.org/css-page-ancestors/assets/banner-772x250.jpg?rev=1770896)

Questo plugin **non è stato testato con le ultime 3 versioni principali (major releases)
di WordPress**. Potrebbe non essere più mantenuto, o supportato, e potrebbe presentare
problemi di compatibilità se utilizzato con versioni più recenti di WordPress.

![](https://ps.w.org/css-page-ancestors/assets/icon-256x256.jpg?rev=1770896)

# CSS Page Ancestors

 Di [giannisg](https://profiles.wordpress.org/giannisg/)

[Scarica](https://downloads.wordpress.org/plugin/css-page-ancestors.zip)

 * [Dettagli](https://it.wordpress.org/plugins/css-page-ancestors/#description)
 * [Recensioni](https://it.wordpress.org/plugins/css-page-ancestors/#reviews)
 *  [Installazione](https://it.wordpress.org/plugins/css-page-ancestors/#installation)
 * [Sviluppo](https://it.wordpress.org/plugins/css-page-ancestors/#developers)

 [Supporto](https://wordpress.org/support/plugin/css-page-ancestors/)

## Descrizione

_Please, keep in mind that THIS IS IN BETA. I’m relying to your feedback, positive
or with suggestions, to release it out of beta_

This plugin will give you the extra class you need in your tag of ALL (and not just
one) of the anchestors of a page in WordPress.

This way you will be able to color a certain section of a site, based on the root’s
ancestor – no matter how deep is the page (WordPress does this only for the direct
father of a page)

Also, the printed class names are ancestor-[slug] and ancestor-id-[id]. This way,
you can use it with your page slug (very conviniate if you move sites between instalations
where id can change) and id (useful if you use a non-latin site, and slug can’t 
be used in css)

–

So, let’s imagine you have this tree of pages on your site:

 * Home
 * Clients
    - Web
       * EShops
       * Portfolio
    - Print
 * Contact

Let’s see this scenario: You want all the pages under ‘Clients’ to have a red background.
Now, it’s easy to do that – but only for the ‘Web’, and ‘Print’ pages because WordPress
gives you only the fathers in the body classes – in this case, the id of ‘Clients’.‘
Eshops’ and ‘Portfolio’ can also have a red background, but you will have to add
a new class in your css with the id of ‘Web’ at your css. And, if you add pages 
under ‘Eshops’, same thing, you will have to add a new class in your css file with
the id of ‘Eshops’ page. So, all this is easy if you do it yourself – but if you
handle the site to an editor, that knows only to create content – you will have 
to add the class in the CSS every time someone adds a level to all this.

With this plugin **all the ancestors of a page, no matter the depth** will be _in
your body as class names_ – as a slug, and as an id. And you want all the pages 
under ‘Clients’ to have a red background you just add to your css .achestor-clients{
background:red;} in your css, and you are done – no matter the level the final page
is under.

Finaly, the order is with top ancestor first (in our example, Portfolio page will
have “ancestor-clients ancestor-web”) – this way, it’s simpler in CSS to overwrite
the -clients class with the -web attributes.

There is no writing on the database, or other change on the site, so, even if something
goes wrong, just de-activate the plugin, and you’ll be fine.

## Screenshot

[⌊That's what you expect to see in view source of your page⌉⌊That's what you expect
to see in view source of your page⌉[

That’s what you expect to see in view source of your page

## Installazione

 1. Upload the plugin files to the ‘/wp-content/plugins/plugin-name’ directory, or 
    install the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress
 3. The new classes will be automatically added to your body (IF your theme is provided
    with the body_class() function)

## FAQ

  Installation Instructions

 1. Upload the plugin files to the ‘/wp-content/plugins/plugin-name’ directory, or 
    install the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress
 3. The new classes will be automatically added to your body (IF your theme is provided
    with the body_class() function)

  Why did you build it?

I needed to CSS transform a sub-sub-page beased on his ancestors. Now, my body has
the classes i need.

  I’ve installed it, but nothing happens!

There’s no new menu, or any other change you should look for. Normally, the new 
classes should have been added automatically to your body. You can check it pressing‘
Ctrl+U’ in your site (this will ofcourse work only if you check a page with two 
or more ancestors)

  Help, my site is ruinned!

Oh, that’s too bad – it did work fine for me 🙁 Nevertheless, let’s make your site
work again: go to your plugins page, and deactivate my plugin. Things should go 
back to normal, no harm done.

## Recensioni

Non ci sono recensioni per questo plugin.

## Contributi e sviluppo

“CSS Page Ancestors” è un software open source. Le persone che hanno contribuito
allo sviluppo di questo plugin sono indicate di seguito.

Collaboratori

 *   [ giannisg ](https://profiles.wordpress.org/giannisg/)

[Traduci “CSS Page Ancestors” nella tua lingua.](https://translate.wordpress.org/projects/wp-plugins/css-page-ancestors)

### Ti interessa lo sviluppo?

[Esplora il codice](https://plugins.trac.wordpress.org/browser/css-page-ancestors/)
segui il [repository SVN](https://plugins.svn.wordpress.org/css-page-ancestors/),
segui il [log delle modifiche](https://plugins.trac.wordpress.org/log/css-page-ancestors/)
tramite [RSS](https://plugins.trac.wordpress.org/log/css-page-ancestors/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 0.95

Removed the manual installation of the plugin, and converted it to a filter, so 
the users won’t touch their theme. (Thanks WordPress Plugin Directory Team for the
tip!)

#### 0.9

Beta release.

#### 0.8

Added the anchestor-id-[id] css class, for non-latin page slugs

#### 0.1

Hey, i have an idea! What if… 🙂

## Meta

 *  Versione **0.95**
 *  Ultimo aggiornamento **9 anni fa**
 *  Installazioni attive **Meno di 10**
 *  Versione WordPress ** 3.3 o superiore **
 *  Testato fino alla versione **4.8.33**
 *  Versione PHP ** 5.6 o superiore **
 *  Lingua
 * [English (US)](https://wordpress.org/plugins/css-page-ancestors/)
 * Tag
 * [ancestor](https://it.wordpress.org/plugins/tags/ancestor/)[ancestors](https://it.wordpress.org/plugins/tags/ancestors/)
   [css](https://it.wordpress.org/plugins/tags/css/)
 *  [Visualizzazione avanzata](https://it.wordpress.org/plugins/css-page-ancestors/advanced/)

## Valutazioni

Non sono state ancora inviate recensioni.

[La tua recensione](https://wordpress.org/support/plugin/css-page-ancestors/reviews/#new-post)

[Vedi tutte le recensioni](https://wordpress.org/support/plugin/css-page-ancestors/reviews/)

## Collaboratori

 *   [ giannisg ](https://profiles.wordpress.org/giannisg/)

## Supporto

Hai qualcosa da dire? Ti serve aiuto?

 [Chiedi nel forum di supporto](https://wordpress.org/support/plugin/css-page-ancestors/)