subpages: tutorial on how to create different headers, colors

  • Most fixes for trying to create different styles for different pages say to use the is_page function in your header. However, this will either exclude the subpages, or would make for a long list of pages. Here is a partial tutorial for making parent and child pages that have different style (headers, colors etc).

    You will need to figure out how your style sheet works. For example, at the beginning of the sheet there may be the following type of code:

    body{background#ffffff;margin:0;}

    To make a new style that would give a different background color or url create new entries directly under the body tags such as:

    .body1{background:url(images/backgroundPattern1.jpg);color:#000000;margin:0;}

    There may also be entries for the logo such as:

    #logo{background:url(images/logo1.jpg) no-repeat left top;height:160px;margin:0 auto;width:998px;}

    Directly underneath of it create new entries such as

    #logo2{background:url(images/logo2.jpg) no-repeat left top;height:160px;margin:0 auto;width:998px;}

    There might be other places in the style sheet where you need to create new styles to accommodate new colors.

    Once this is done save the style sheet and do the following:

    1. Open up header.php and copy the entire contents to a new blank document. Save it as header2.php (or whatever name you choose).

    2. Open up page.php and copy the entire contents into a new blank document and place the following code at the top of the new document:

    along with the following code at the top:

    <?php
    /*
    Template Name: STYLE NAME (CAN BE WHATEVER)
    */
    ?>`

    3. Find the code: <?php get_header(); ?> and replace it with <?php include('header2.php'); ?> (OR WHATEVER NAME YOU GAVE THE FILE IN STEP 1)

    4. find the tag <body> and replace it with <body class=“body1”>

    5. find the tag <div id="logo"> (or whatever tag calls your banner logo up) replace it with <div id="logo2">

    6. Save the document as page2.php (or some other name).

    7. upload all the new files

    Now go to your admin page and open up the page that you want to have a different style. On the right in wordpress 2.7 there is a panel titled “Attributes” with a “templates” menu. Select the template menu and the new style you created. Update the page. Do this to every page that is a subpage.

    That is how you can make different styles (banners, colors, etc) in which both the parent page and the subpages have the same styles.

    Hopefully this is helpful to some degree for folks.

  • The topic ‘subpages: tutorial on how to create different headers, colors’ is closed to new replies.