How do I define post titles as images using Custom Fields?

  • Hi,

    I’ve tried to follow a guide that explain how to do so but failed and I don’t know why it doesn’t work.

    The guide:
    https://www.ads-software.com/support/topic/unique-header-image-for-each-post

    1. In my posts (WP GUI), I’ve added a custom field named ‘PostTitle’.
    The value of these Posts are 153 & 156 as the post IDs numbers.
    Furthermore, I’ve uploaded two title pictures to my theme images directory:

    https://letthemstare.com/wp-content/themes/manifest_v1.1/images/153.jpg
    https://letthemstare.com/wp-content/themes/manifest_v1.1/images/156.jpg

    2. Under header.php <head>, I’ve added the following:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    3. Post titles images load to each post title individually but:

    a. Images doesn’t replace original text title
    b. Images are shown only within posts and not on the main page
    c. I’m not sure that the images will function as a link on the main page

    I choose entry-title according to the following code in index.php:

    <?php while (have_posts()) : the_post(); ?>

  <h3 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

    When I mask this line, the post titles on the main page disappear. Furthermore, on style.css h3 represents the post titles:

    h3{
  margin-bottom: 5px;
  font-size: 2.3em;
  font-weight: bold;
  text-align: left;
}

    I’m afraid that I have a mistake in the title class but I don’t know what it is and how to fix it. Kindly assist me in fixing the issues above. Your support would be most appreciated.
    Thanks in advance,

    Kfir Silis

Viewing 4 replies - 1 through 4 (of 4 total)

  • Ok a few things spring to mind, first off:
    <h3 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

    should be:
    <a href="<?php the_permalink() ?>" rel="bookmark"><h3 class="entry-title"><?php the_title(); ?></h3></a>

    You could potentially save yourself a lot of hassle, since you’re using plain text you could use cufon to dynamically change the font for you.

    Generally when this is done in html you would add something like:
    text-indent:-5000; to your h3 element style.

    Thread Starter silis25

    (@silis25)

    Thanks for your reply but I’ve tried as you recommended but the problem remains.

    style.css:

    h3{
  margin-bottom: 5px;
  font-size: 2.3em;
  font-weight: bold;		/* Post Titles */
  text-align: left;
  text-indent:-5000;
}

    index.php:

    <?php while (have_posts()) : the_post(); ?>

  <a href="<?php the_permalink() ?>" rel="bookmark"><h3 class="entry-title"><?php the_title(); ?></h3></a>

    Regarding cufon, I prefer to resolve it in the code.
    I still don’t know how do implement properly the custom field in my post titles.

    Thread Starter silis25

    (@silis25)

    Original Code:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    Thread Starter silis25

    (@silis25)

    header.php original modification:

    https://pastebin.com/AuXBjNZ7

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How do I define post titles as images using Custom Fields?’ is closed to new replies.

Tags