Support » Fixing WordPress » Style h1 element in child pages

  • Resolved martcol



    Each section of this site has it’s own color.

    I found it really fiddly to style each page and menu item the same color as the panel on the home page.

    What I want to be able to do is make sure that child pages added by the site owner. Hopefully, no more top-level pages will be added and the site owner has strict instructions not to add any more!

    So, can I add a class to child page h1 elements that will be consistent across the site and then style those headers accordingly?

    I think I’ll add another question about restricting top-level pages.



Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael


    Forum Moderator

    you can add a filter function for the ‘post_class’ into functions.php of your theme:

    function top_page_post_class($classes) {
    	global $post;
    	if( is_page() ) {
    		$classes[] = 'top-pageid-'.array_pop(array_merge(array($post->ID),get_ancestors($post->ID,'page')));
    	return $classes;
    add_filter('post_class', 'top_page_post_class');

    this will give any page an additional css class of .top-pageid-23 which is always the page ID of the (top) parent page – any level deep.

    for example, in your site, the page ‘about’ has the ID 22 leading to the post class .post-22;
    then this page will get the additional post class .top-pageid-22,
    and its child, the page ‘other help’ (ID=104) will also get the additional post class of .top-pageid-22,
    and any sibling or child of the page ‘other help’ would also have this post class .top-pageid-22.

    btw: there is a tiny (1px ?) gap below the ‘about’ button which makes it difficult to reach the dropdown buttons (Firefox 11.0).

    It did what you said it would and I am grateful.

    Thanks for taking the time to help.


Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Style h1 element in child pages’ is closed to new replies.