Results 1 to 6 of 6

Thread: possible different header on page ?

  1. #1
    SonnyCooL's Avatar
    SonnyCooL is offline HeeHa
    Join Date
    Jan 2010
    Location
    Melb/Malaysia
    Posts
    920
    Thanks
    250
    Thanked 92 Times in 78 Posts

    possible different header on page ?

    is that possible to make different header (image) on different wp page ???

  2. #2
    5starpix's Avatar
    5starpix is offline Senior Net Builder
    Join Date
    Dec 2008
    Location
    Montreal, Quebec
    Posts
    1,710
    Blog Entries
    9
    Thanks
    158
    Thanked 227 Times in 164 Posts
    I don't know if you can do it specifically like that, but I think there might be an option where you could have a random image come up as a header. I remember I had done it for a html site. Do you think it will work if you implement the code within the header file?


    EDIT: @Aziz (below): That's a smart idea. That would actually work

  3. #3
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    yea it's possible. you just need to give each page a special body #ID and in the CSS set a different header image for each page
    it would be something like:

    Code:
    #header {main css properties for header here;}
    #page1 #header {background image css code here;}
    #page2 #header {css code with different background image;}

  4. Thanked by:

    SonnyCooL (19 January, 2010)

  5. #4
    SonnyCooL's Avatar
    SonnyCooL is offline HeeHa
    Join Date
    Jan 2010
    Location
    Melb/Malaysia
    Posts
    920
    Thanks
    250
    Thanked 92 Times in 78 Posts
    Quote Originally Posted by Aziz View Post
    yea it's possible. you just need to give each page a special body #ID and in the CSS set a different header image for each page
    it would be something like:

    Code:
    #header {main css properties for header here;}
    #page1 #header {background image css code here;}
    #page2 #header {css code with different background image;}
    cool .....
    page1 will be page name ? or page number ? how abt post ??

  6. #5
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts

    Thumbs up

    okay I will just post a quick simple tutorial for you
    and this will work for both posts and pages.

    Requirements:
    • Text Editor
    • Basic Knowledge of CSS and HTML
    • WordPress installed (local server or installed on your own website)


    1. Open header.php with your text editor (located in your desired theme's folder, usually in wp-content/themes/your theme/) and look for this line

    Code:
    <body <?php body_class(); ?>>
    Replace that line with this one:

    Code:
    <body id="page<?=$post->ID?>" <?php body_class(); ?>>
    This basically adds a special id for each page/post. example: page22
    which can be used in CSS to style different elements based on <body> id.

    2. Open the main CSS file (usually style.css)

    now you can edit any element based on specific post/page
    here's an example:

    Code:
    #header {
      default properties fall here;
    }
    
    /* I want to have a red background color for page id 22 */
    
    #page22 #header {
      background-color:red;
    }
    
    /* but for post id 12 I want it black */
    
    #page12 #header {
      background-color:#000;
    }
    3. save everything and give it a test (or upload files to your web host to test)

    FAQs

    Q: How do I know the pageID of each post/page?
    A: I haven't came across any easier way, but you can find out in your post/page edit screen in your WordPress admin panel - pick a post/page and look at the URL
    something like:
    http://localhost/wp/wp-admin/page.php?action=edit&post=39
    that number is the actual ID of the page/post. or you can view it by checking the page source and is something like
    <body id="page39" class="page page-id-39 page-template page-template-articles_all-php logged-in">

    Q: Can I edit other elements beside #header?
    A: Yes. you can edit any element or .class or #id. example:
    Code:
    /* normal paragraph properties */
    
    p {
      font-size:10px;
    }
    
    /* the paragraphs in post 31 */
    
    #page31 p {
      font-size:12px;
      color:green;
    }

    Need further help? Let me know!
    Hopefully this information was useful

    Regards,
    Aziz

  7. Thanked by:

    Sami4u (20 January, 2010), SonnyCooL (19 January, 2010), Will.Spencer (21 January, 2010)

  8. #6
    SonnyCooL's Avatar
    SonnyCooL is offline HeeHa
    Join Date
    Jan 2010
    Location
    Melb/Malaysia
    Posts
    920
    Thanks
    250
    Thanked 92 Times in 78 Posts
    Quote Originally Posted by Aziz View Post
    okay I will just post a quick simple tutorial for you
    and this will work for both posts and pages.

    Requirements:
    • Text Editor
    • Basic Knowledge of CSS and HTML
    • WordPress installed (local server or installed on your own website)


    1. Open header.php with your text editor (located in your desired theme's folder, usually in wp-content/themes/your theme/) and look for this line

    Code:
    <body <?php body_class(); ?>>
    Replace that line with this one:

    Code:
    <body id="page<?=$post->ID?>" <?php body_class(); ?>>
    This basically adds a special id for each page/post. example: page22
    which can be used in CSS to style different elements based on <body> id.

    2. Open the main CSS file (usually style.css)

    now you can edit any element based on specific post/page
    here's an example:

    Code:
    #header {
      default properties fall here;
    }
    
    /* I want to have a red background color for page id 22 */
    
    #page22 #header {
      background-color:red;
    }
    
    /* but for post id 12 I want it black */
    
    #page12 #header {
      background-color:#000;
    }
    3. save everything and give it a test (or upload files to your web host to test)

    FAQs

    Q: How do I know the pageID of each post/page?
    A: I haven't came across any easier way, but you can find out in your post/page edit screen in your WordPress admin panel - pick a post/page and look at the URL
    something like: that number is the actual ID of the page/post. or you can view it by checking the page source and is something like


    Q: Can I edit other elements beside #header?
    A: Yes. you can edit any element or .class or #id. example:
    Code:
    /* normal paragraph properties */
    
    p {
      font-size:10px;
    }
    
    /* the paragraphs in post 31 */
    
    #page31 p {
      font-size:12px;
      color:green;
    }
    Need further help? Let me know!
    Hopefully this information was useful

    Regards,
    Aziz
    thanks this is excellence, this week, i'm full ...

Similar Threads

  1. [Bug] Header Advertise Error
    By deluxdon in forum Announcements and Suggestions
    Replies: 13
    Last Post: 16 May, 2010, 03:53 AM
  2. [WTH] Website Header Help. (Reward)
    By iHate in forum Marketplace
    Replies: 3
    Last Post: 30 January, 2010, 14:14 PM
  3. [WTS] Logo, Header and Banners for 5$
    By oald in forum Services
    Replies: 3
    Last Post: 11 July, 2009, 18:00 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •