{"id":16,"date":"2018-04-27T00:50:04","date_gmt":"2018-04-26T21:50:04","guid":{"rendered":"http:\/\/wds.gr\/sites\/?p=16"},"modified":"2018-04-27T01:13:36","modified_gmt":"2018-04-26T22:13:36","slug":"css-page-ancestors","status":"publish","type":"post","link":"http:\/\/wds.gr\/sites\/blog\/css-page-ancestors\/","title":{"rendered":"CSS Page Ancestors"},"content":{"rendered":"<p>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.<\/p>\n<p>This way you will be able to color a certain section of a site, based on the root\u2019s ancestor \u2013 no matter how deep is the page (WordPress does this only for the direct father of a page)<\/p>\n<p>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\u2019t be used in css)<\/p>\n<p>\u2013<\/p>\n<p>So, let\u2019s imagine you have this tree of pages on your site:<\/p>\n<ul>\n<li>Home<\/li>\n<li>Clients\n<ul>\n<li>Web\n<ul>\n<li>EShops<\/li>\n<li>Portfolio<\/li>\n<\/ul>\n<\/li>\n<li>Print<\/li>\n<\/ul>\n<\/li>\n<li>Contact<\/li>\n<\/ul>\n<p>Let\u2019s see this scenario: You want all the pages under \u2018Clients\u2019 to have a red background. Now, it\u2019s easy to do that \u2013 but only for the \u2018Web\u2019, and \u2018Print\u2019 pages because WordPress gives you only the fathers in the body classes \u2013 in this case, the id of \u2018Clients\u2019. \u2018Eshops\u2019 and \u2018Portfolio\u2019 can also have a red background, but you will have to add a new class in your css with the id of \u2018Web\u2019 at your css. And, if you add pages under \u2018Eshops\u2019, same thing, you will have to add a new class in your css file with the id of \u2018Eshops\u2019 page. So, all this is easy if you do it yourself \u2013 but if you handle the site to an editor, that knows only to create content \u2013 you will have to add the class in the CSS every time someone adds a level to all this.<\/p>\n<p>With this plugin\u00a0<strong>all the ancestors of a page, no matter the depth<\/strong>\u00a0will be\u00a0<em>in your body as class names<\/em>\u00a0\u2013 as a slug, and as an id. And you want all the pages under \u2018Clients\u2019 to have a red background you just add to your css .achestor-clients {background:red;} in your css, and you are done \u2013 no matter the level the final page is under.<\/p>\n<p>Finaly, the order is with top ancestor first (in our example, Portfolio page will have \u201cancestor-clients ancestor-web\u201d) \u2013 this way, it\u2019s simpler in CSS to overwrite the -clients class with the -web attributes.<\/p>\n<p>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\u2019ll be fine.<\/p>\n<p>&nbsp;<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"7pKBxzUUd1\"><p><a href=\"https:\/\/wordpress.org\/plugins\/css-page-ancestors\/\">CSS Page Ancestors<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;CSS Page Ancestors&#8221; &#8212; Plugin Directory\" src=\"https:\/\/wordpress.org\/plugins\/css-page-ancestors\/embed\/#?secret=SIayP2drkw#?secret=7pKBxzUUd1\" data-secret=\"7pKBxzUUd1\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":17,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[3,16],"class_list":["post-16","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-css","tag-free"],"_links":{"self":[{"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/posts\/16"}],"collection":[{"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":2,"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":19,"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/posts\/16\/revisions\/19"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/media\/17"}],"wp:attachment":[{"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wds.gr\/sites\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}