Results 1 to 6 of 6

Thread: possible different header on page ?

  1. #1

    possible different header on page ?

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

  2. #2
    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
    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. #4
    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 ??

  5. #5

    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

  6. #6
    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, 02: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, 17: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
  •