have different page title images for each page WordPress
- SOLVED
Hello,
I am using an image for each of my page titles so I can display the font i want to use.
When I click on my bio page or any other page I would like it to use my page title that i have created for each page.
http://www.hawriandmandy.com/bio/
it should say "bio" instead of "muzik"
In my css file i have added my page title font image:
.title-page01 * { background:url(images/title_page01.png) no-repeat 0 0; position: absolute; left: 250px; top: 416px; padding:40px 0px 0px 0px;}
.title-page03 * { background:url(images/title_page03.png) no-repeat 0 0; position: absolute; left: 250px; top: 416px; padding:40px 0px 0px 0px;}
I have no idea what to add for it to show up for each page on my page.php file.
Answers (4)
Sébastien | French WordpressDesigner answers:
go to you heder.php and replace
<body>
with
<body <?php body_class(); ?>>
and in you css, add
<strong>.bio</strong> .title-page01 {
background: url("images/title_page02.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
<strong>.muzik</strong> .title-page01 {
background: url("images/title_page01.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
and so and so
ddoodnath comments:
I will try out this method as well..seems simple.
ddoodnath comments:
So i tried it out...but no page titles show up now..
.muzik .title-page01 {
background: url("images/title_page01.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.bio .title-page02 {
background: url("images/title_page02.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.media lounge .title-page03 {
background: url("images/title_page03.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.blog .title-page04 {
background: url("images/title_page04.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.buy stuff .title-page05 {
background: url("images/title_page05.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.featured links .title-page06 {
background: url("images/title_page06.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.contact .title-page07 {
background: url("images/title_page07.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
Sébastien | French WordpressDesigner comments:
i look at that. Just a minut
Sébastien | French WordpressDesigner comments:
sorry but you must use the page-ID
so for bio the page id is 9
so the code is
.page-id-9 .title-page01 {
background: url("images/title_page02.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.page-id-9 .title-page01
and no
.bio .title-page01
same thing for the others pages
ddoodnath comments:
ohhh...i will try that and see if it works!
ddoodnath comments:
I put in the pege id's, but it still did not work :(
.page-id-7 .title-page01 {
background: url("images/title_page01.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.page-id-9 .title-page02 {
background: url("images/title_page02.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.page-id-11 .title-page03 {
background: url("images/title_page03.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.page-id-13 .title-page04 {
background: url("images/title_page04.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.page-id-15 .title-page05 {
background: url("images/title_page05.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.page-id-172 .title-page06 {
background: url("images/title_page06.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
.page-id-17 .title-page07 {
background: url("images/title_page07.png") no-repeat scroll 0 0 transparent;
left: 250px;
padding: 40px 0 0;
position: absolute;
top: 416px;
}
[[LINK href="http://hawriandmandy.com"]][[/LINK]]
Sébastien | French WordpressDesigner comments:
i look at that. Just a minute please
Sébastien | French WordpressDesigner comments:
you use title-page02,title-page03,title-page04
but you must use always title-page01
ddoodnath comments:
I can't use title page one, because my titles are images. If I don't use an image for my title's it won't show up in the font that I want. So I would need to have a separate image to display for each page otherwise the title would say the same thing.
for example when you click on bio...you should see the bio title appear on that page and so on.
I really appreciate your help.
Sébastien | French WordpressDesigner comments:
you don't understand
i said not about
background: url("images/title_page07.png")
i said about
.page-id-17 .title-page07
.page-id-17 .title-page07 <------------here, you must have .title-page01
background: url("images/title_page07.png") <------------here, you use .title_page07.png of course
ddoodnath comments:
ohh...
sorry for the inconvenience, these things confuse me.
Thanks so much!! It works!!!!! :)
Jens Filipsson answers:
Make a copy of your page.php file, call it bio.php.
In the top of the file, replace this:
<?php get_header(); ?>
with this:
<?php
/* Template Name: Bio */
get_header();
?>
Then change the title so it uses the right image.
Got to your page in wordpress admin, and in the options to the right choose <em>Bio</em> as your page template.
Good luck!
AdamGold answers:
I would suggest going with another way, which will make your life easier + your SEO much better:
1. Follow this guide: http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/
2. Generate your font to fit the web:
http://cufon.shoqolate.com/generate/
3. Open up page.php and insert the following code under get_header():
$post_obj = $wp_query->get_queried_object();
$post_ID = $post_obj->ID;
$post_title = $post_obj->post_title;
?>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="YourFont.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#page-title');
</script>
<h2 id="page-title"><?php echo $post_title; ?></h2>
Michael Fields answers:
I would suggest making the following edits to the page.php template file. Images that contain text are best marked up as images IMO. Right before your call to the_content(), use code like:
<?php
/* Decide which image to use. */
$src = '';
if ( is_page( 'bio' ) ) {
$src = 'images/title_page01.png';
}
else if ( is_page( 'music' ) ) {
$src = 'images/title_page03.png';
}
/* Print the image. */
if ( ! empty( $src ) ) {
print '<img src="' . esc_url( get_template_directory() . '/' . $src ) . '" alt="' . esc_attr( the_title( '', '', false ) ) . '" />';
}
?>
When you use the is_page() function, you can pass it the page ID, the page's title or the "slug".
ddoodnath comments:
My header.php looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php //comments_popup_script(600, 600); ?>
<?php wp_head(); ?>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
</head><body>
<div class="main">
<div class="main-bgr"><div class="bgr">
<div class="tail-left"></div>
<div class="main-width">
<div class="tail-right"></div>
<div class="header">
<div class="search">
<div class="indent">
</div>
</div>
<div class="menu">
<ul>
<li<?php if ( is_page('Home') ) { echo ' id="current"'; } ?>>
<a class="menu01" href="http://www.hawriandmandy.com/"><?php echo get_option('Home'); ?>/?page_id=0">
Home
</a>
</li>
<li<?php if ( is_page('Muzik') ) { echo ' id="7"'; } ?>>
<a class="menu02" href="<?php echo get_option('Home'); ?>/?page_id=7">
Muzik
</a>
</li>
<li<?php if ( is_page('Bio') ) { echo ' id="9"'; } ?>>
<a class="menu03" href="<?php echo get_option('Home'); ?>/?page_id=9">
Bio
</a>
</li>
<li<?php if ( is_page('Media Lounge') ) { echo ' id="11"'; } ?>>
<a class="menu04" href="<?php echo get_option('Home'); ?>/?page_id=11">
Media Lounge
</a>
</li>
<li<?php if ( is_page('Blog') ) { echo ' id="13"'; } ?>>
<a class="menu05" href="<?php echo get_option('Home'); ?>/?page_id=13">
Blog
</a>
</li>
<li<?php if ( is_page('Buy Stuff') ) { echo ' id="15"'; } ?>>
<a class="menu06" href="<?php echo get_option('Home'); ?>/?page_id=15">
Buy Stuff
</a>
</li>
<li<?php if ( is_page('Featured Links') ) { echo ' id="172"'; } ?>>
<a class="menu07" href="<?php echo get_option('Home'); ?>/?page_id=172">
Contact
</a>
<li<?php if ( is_page('Contact') ) { echo ' id="17"'; } ?>>
<a class="menu08" href="<?php echo get_option('Home'); ?>/?page_id=17">
Contact
</a>
</li>
</ul>
</div>
<div class="logo">
<div style="position: absolute; left: 20px; top: 30px;"><img src="http://www.hawriandmandy.com/wp-content/uploads/2011/04/Hawri-n-Mandy-Logo-new.png"></div>
<div class="indent">
<h1 onclick="location.href='<?php echo get_option('home'); ?>/'"><?php bloginfo('name'); ?></h1>
</div>
</div>
</div>
<div class="content">
I was typing something similar to Michael's code in my page.php already, but I could have made an error in my code, which is why it did not work. I will try this...