possible different header on page ?

**SonnyCooL** · 19 January, 2010, 19:36 PM

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

**5starpix** · 19 January, 2010, 19:43 PM

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

**Aziz** · 19 January, 2010, 19:49 PM

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;}

**SonnyCooL** · 19 January, 2010, 20:15 PM

Originally Posted by Aziz

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 ??

**Aziz** · 19 January, 2010, 20:56 PM

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

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

**SonnyCooL** · 19 January, 2010, 21:13 PM

Originally Posted by Aziz

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 ...

Thread: possible different header on page ?

LinkBack

Thread Tools

Search Thread

Display

possible different header on page ?

Thanked by:

Thanked by:

Similar Threads

[Bug] Header Advertise Error

[WTH] Website Header Help. (Reward)

[WTS] Logo, Header and Banners for 5$

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions