How to Add an Image to the Left of Page Titles?

  • I’ve read through many posts here on how to add an image to the title of a page but none seem to provide a solution.

    I’m going to us WP to build a website – no blog, no posts, just a website with pages.

    Rather than just text as the title for each page as is the norm, I want to have a small image to the left of each page title, just a small icon. But such a common and seemingly simple requirement is apparently not that easy to achieve with WP

    I am thinking that the easiest way to achieve this might be to put some code to on of the core files that says something like:

    If the page is ‘Pets’ then load the pets.jpg to the left of the tile text
    If the page is ‘Products’ then load the products.jpg to the left of the tile text
    If the page is ‘Contact’ then load the contact.jpg to the left of the tile text
    etc

    Does anyone have any ideas or suggestions?

    If this is indeed the best way to do it, what would be the code and what file do I add it to?

    Thanks

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

  • I can give you the starting point of how to achieve different images on different pages. The names i.e. (‘pets’) is the permalink of your page i.e. example.com/pets and example.com/products.

    <?php if ( is_page('pets') ) {
      echo '<div class="pets">';
} else {
      echo '';
}
      if ( is_page('products') ) {
      echo '<div class="products">';
} else {
      echo '';
}
?>

    And in your stylesheet add something similar to this:

    .pets {
	background:url(../images/pets.jpg) no-repeat;
	height: 100px;
	width: 200px;
}
.products {
	background:url(../images/products.jpg) no-repeat;
	height: 100px;
	width: 200px;
}

    This is in addition to your <h1>Page Title</h1>. If I can suggest, please don’t eliminate the page titles, they’re the “heart” of Search Engine Optimization. Use the above with your page title instead. Trust me, it will work much better that way. Titles are very important part of any site, not just for WordPress.

    You can also try this as well.

    Thread Starter Dave333

    (@dave333)

    Thank you Emil for your prompt response. However, I am not sure where that first slab of code is to go, what page do I paste this into? Does it go somewhere in the page.php file?

    I understand the importance of the page title. As I explained, I want to have the image the left of the page title, NOT to replace it completely.

    Thanks again.

    is your theme set up for thumbnails? If so you can use that feature as I do on my site, rvoodoo.com to put an icon next to titles.

    use add image size to make the small icon in functions.php
    https://codex.www.ads-software.com/Function_Reference/add_image_size

    then call that in your page.php right before the title
    https://codex.www.ads-software.com/Function_Reference/the_post_thumbnail

    then each time you make a page, assigna featured image and it will be next to the title

    Thread Starter Dave333

    (@dave333)

    Hi Rev Voodoo,

    No I don’t think my theme is set up for thumbnails. I think you may have misunderstood my request though. I don’t want to shrink any images in the Page’s contents to create thumbnails from. These page title icons will be the only use of the image.

    Thanks anyway but I’d rather do it the way Emil has described, though I am not fluent with PHP and am not sure what I am supposed to do with the code he gave. I understand the second slab of code is to go in the style.css file, I just need to know what file that first slab of code should be added to and where specifically in the file it is to go.

    Thanks again.

    All right so let’s pick this scenario:

    You would like this to appear on pages only, if so open your page.php file either directly from FTP or via Dashboard > Appearance > Editor > and on your right you will see all theme files select > page.php

    Now after you located page.php see if you can find <?php the_title(); ?> as soon as you do that paste the first part of my code just bellow the <h1> title or where you needed it.

    <?php if ( is_page('pets') ) {
      echo '<div class="pets">';
} else {
      echo '';
}
      if ( is_page('products') ) {
      echo '<div class="products">';
} else {
      echo '';
}
?>

    Just make sure that ‘products’ matches your example.com/products, if let’s say you have example.com/our-products the above is_page will be exactly as your permalink ‘our-products’.

    Once this is completed and saved, go to your style.css or however your stylesheet is named and paste:

    .pets {
	background:url(../images/pets.jpg) no-repeat;
	height: 100px;
	width: 200px;
}
.products {
	background:url(../images/products.jpg) no-repeat;
	height: 100px;
	width: 200px;
}

    Matching names are for your references only, you may change them anyway you want, as well as height and width of images. For pages that you don’t want images and/or if nothing is set in php code above, nothing will be displayed by default.

    Makes sense?

    Thread Starter Dave333

    (@dave333)

    Yes it does, thank you.

    I understood perfectly everything you wrote initially, I just had no idea what file to paste it into.

    I’ve located the page.php and have inserted it. It works and am now just adjusting the CSS to make it work.

    Thanks again for your help. After reading through a wide range of suggested techniques this method is by far the simplest way to achieve what I need.

    I am glad to hear that this was the simplest way and it’s my pleasure. If you need anything else please let us know ??

    Enjoy WordPress,
    Emil

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to Add an Image to the Left of Page Titles?’ is closed to new replies.