Changing the Parent/Child Page Display

  • Tashe


    I’m building a site around the Graphene theme, which I like very much. I’m using pages rather than posts and I have them set up with a parent page with associated child pages. Right now the full parent page appears at the top of the page followed by the child pages (the child pages just have the intro text followed by readmores to the full child page). So that’s easy, like setting up a blog page with a sticky post at the top followed by other related posts.

    In the current arrangement the child page intros are in a single column below the intro page. What I’d like to know is how to change the child page intros from a single column to 2 columns below the intro page text. Is this possible?

    I work mostly in Joomla, where doing this kind of content arrangement is very simple, but I’m not seeing a solution in WP so I’d appreciate any help you can give me.



    Kenneth John Odle


    Maybe something like this:

    only using page instead of post?



    Thanks for your reply– I’ll give that a try. Actually I’d like to be able to have one column or two columns as I choose, on a per page basis.


    Kenneth John Odle


    Be sure to include that page’s unique ID in your css, then.



    Replace XXX with the ID of parent page.

    .page-id-XXX .child-page {
    width: 49%;
    display: inline-block;
    margin-right: 0.7%;
    vertical-align: top;



    Hi Prasanna,

    Your solution worked great and it gave me further ideas. In Joomla you can assign a css class to any page simply by naming it in the page properties, so I wondered if there was a way to do that in WP. If there was, it would mean that I could assign a css class to the pages where I wanted the two column layout and use the default where I wanted a one column layout.

    So– I found a WP plugin called “custom-css-stylesheet-for-posts-or-pages” (here: that was supposed to allow me to use custom css on individual pages. I set up the custom-css folder and copied the default style.css into it (renaming the css file of course), and I added your two-column css code to that css file. Except that I changed your .page-id-XXX .child-page to just .page .child-page so that it wasn’t page id specific.

    Now I can open a page in the editor, assign the custom css to that individual page, and get the two column layout whenever I want it. And if I decide to change back to a one column layout, all I have to do is switch the page css back to the default style.css, Works great, and it saves all kinds of messing around dealing with individual page ID’s in the css file (and considering that the site I’m working on has over 80,.000 words of text and I don’t know how many articles, some of which are standalone and some of which are sub-articles under a main section description, dealing with individual page IDs wasn’t something I wanted to do)

    Thanks again for your help…



    You’re welcome!

    Marking thread as resolved. You can do this yourself as well.




    I have a problem.

    I had child pages listing, but I have a plugin that parses content, and does some stuff within the content if certain shortcodes/whatnot are there.

    The problem is that the child pages seem to be completely valid full pages to this content filter, so the entire page breaks if the child pages are enabled.

    Disabling child pages is not the optimal solution, but it is what I had to do.

    Is there a way to convince the plugin that the child page should not be parsed?

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.