{"id":77796,"date":"2017-11-19T18:13:16","date_gmt":"2017-11-19T18:13:16","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/css-page-ancestors\/"},"modified":"2017-11-19T21:12:47","modified_gmt":"2017-11-19T21:12:47","slug":"css-page-ancestors","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/css-page-ancestors\/","author":15787260,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"0.95","stable_tag":"trunk","tested":"4.8.28","requires":"3.3","requires_php":"5.6","requires_plugins":"","header_name":"CSS Page Ancestors","header_author":"Giannis Giannopoulos","header_description":"Add ancestors() in your code to print the ancestors of your page. The printed class names are ancestor-[slug] and ancestor-id-[id]","assets_banners_color":"ca0000","last_updated":"2017-11-19 21:12:47","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"http:\/\/giannis.in","rating":0,"author_block_rating":0,"active_installs":0,"downloads":1140,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":{"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":"1770896","resolution":"128x128","location":"assets"},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":"1770896","resolution":"256x256","location":"assets"}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":"1770896","resolution":"1544x500","location":"assets"},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":"1770896","resolution":"772x250","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":"1770896","resolution":"1","location":"assets"}},"screenshots":{"1":"That's what you expect to see in view source of your page"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[37403,54323,1241,356,149559],"plugin_category":[59],"plugin_contributors":[149560],"plugin_business_model":[],"class_list":["post-77796","plugin","type-plugin","status-publish","hentry","plugin_tags-ancestor","plugin_tags-ancestors","plugin_tags-class","plugin_tags-css","plugin_tags-father","plugin_category-utilities-and-tools","plugin_contributors-giannisg","plugin_committers-giannisg"],"banners":{"banner":"https:\/\/ps.w.org\/css-page-ancestors\/assets\/banner-772x250.jpg?rev=1770896","banner_2x":"https:\/\/ps.w.org\/css-page-ancestors\/assets\/banner-1544x500.jpg?rev=1770896","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/css-page-ancestors\/assets\/icon-128x128.jpg?rev=1770896","icon_2x":"https:\/\/ps.w.org\/css-page-ancestors\/assets\/icon-256x256.jpg?rev=1770896","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/css-page-ancestors\/assets\/screenshot-1.png?rev=1770896","caption":"That's what you expect to see in view source of your page"}],"raw_content":"<!--section=description-->\n<p><em>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<\/em><\/p>\n\n<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\n<p>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)<\/p>\n\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't be used in css)<\/p>\n\n<p>-<\/p>\n\n<p>So, let's imagine you have this tree of pages on your site:<\/p>\n\n<ul>\n<li>Home<\/li>\n<li>Clients\n\n<ul>\n<li>Web\n\n<ul>\n<li>EShops<\/li>\n<li>Portfolio<\/li>\n<\/ul><\/li>\n<li>Print<\/li>\n<\/ul><\/li>\n<li>Contact <\/li>\n<\/ul>\n\n<p>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.<\/p>\n\n<p>With this plugin <strong>all the ancestors of a page, no matter the depth<\/strong> will be <em>in your body as class names<\/em> - 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.<\/p>\n\n<p>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.<\/p>\n\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'll be fine.<\/p>\n\n<!--section=installation-->\n<ol>\n<li><p>Upload the plugin files to the '\/wp-content\/plugins\/plugin-name' directory, or install the plugin through the WordPress plugins screen directly.<\/p><\/li>\n<li><p>Activate the plugin through the 'Plugins' screen in WordPress<\/p><\/li>\n<li><p>The new classes will be automatically added to your body (IF your theme is provided with the body_class() function)<\/p><\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt>Installation Instructions<\/dt>\n<dd><ol>\n<li><p>Upload the plugin files to the '\/wp-content\/plugins\/plugin-name' directory, or install the plugin through the WordPress plugins screen directly.<\/p><\/li>\n<li><p>Activate the plugin through the 'Plugins' screen in WordPress<\/p><\/li>\n<li><p>The new classes will be automatically added to your body (IF your theme is provided with the body_class() function)<\/p><\/li>\n<\/ol><\/dd>\n<dt>Why did you build it?<\/dt>\n<dd><p>I needed to CSS transform a sub-sub-page beased on his ancestors. Now, my body has the classes i need.<\/p><\/dd>\n<dt>I've installed it, but nothing happens!<\/dt>\n<dd><p>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)<\/p><\/dd>\n<dt>Help, my site is ruinned!<\/dt>\n<dd><p>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.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.95<\/h4>\n\n<p>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!)<\/p>\n\n<h4>0.9<\/h4>\n\n<p>Beta release.<\/p>\n\n<h4>0.8<\/h4>\n\n<p>Added the anchestor-id-[id] css class, for non-latin page slugs<\/p>\n\n<h4>0.1<\/h4>\n\n<p>Hey, i have an idea! What if... :)<\/p>","raw_excerpt":"Add ancestors classes in your body_class to CSS control ALL the anchestors of your page.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/77796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=77796"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/giannisg"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=77796"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=77796"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=77796"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=77796"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=77796"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=77796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}