logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$15
have different page title images for each page

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.

This question has been answered.

ddoodnath | 04/11/11 at 1:35pm Edit


(4) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    04/11/11
    1:42pm
    Jens Filipsson says:

    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 Bio as your page template.

    Good luck!


  • avatar
    Last edited:
    04/11/11
    5:49pm
    Sébastien | French WordpressDesigner says:

    go to you heder.php and replace
    <body>
    with
    <body <?php body_class(); ?>>

    and in you css, add

    .bio .title-page01 {
    background: url("images/title_page02.png") no-repeat scroll 0 0 transparent;
    left: 250px;
    padding: 40px 0 0;
    position: absolute;
    top: 416px;
    }

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

    and so and so

    Previous versions of this answer: 04/11/11 at 1:48pm

    • 04/11/11 4:12pm

      ddoodnath says:

      I will try out this method as well..seems simple.

    • 04/11/11 4:24pm

      ddoodnath says:

      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;

      }

    • 04/11/11 4:32pm

      Sébastien | French WordpressDesigner says:

      i look at that. Just a minut

    • 04/11/11 4:37pm

      Sébastien | French WordpressDesigner says:

      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

    • 04/11/11 4:46pm

      ddoodnath says:

      ohhh...i will try that and see if it works!

    • 04/11/11 5:26pm

      ddoodnath says:

      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;

      }



    • 04/11/11 5:28pm

      Sébastien | French WordpressDesigner says:

      i look at that. Just a minute please

    • 04/11/11 5:31pm

      Sébastien | French WordpressDesigner says:

      you use title-page02,title-page03,title-page04
      but you must use always title-page01

    • 04/11/11 5:37pm

      ddoodnath says:

      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.

    • 04/11/11 5:44pm

      Sébastien | French WordpressDesigner says:

      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

    • 04/11/11 5:48pm

      ddoodnath says:

      ohh...

      sorry for the inconvenience, these things confuse me.

      Thanks so much!! It works!!!!! :)

  • avatar
    Last edited:
    04/11/11
    1:51pm
    AdamGold says:

    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>

    Previous versions of this answer: 04/11/11 at 1:51pm

  • avatar
    Last edited:
    04/11/11
    2:04pm
    Michael Fields says:

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

    Previous versions of this answer: 04/11/11 at 2:04pm

    • 04/11/11 4:02pm

      ddoodnath says:

      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('&laquo;', 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...

This question has expired.





Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.