WordPress.org

Ready to get started?Download WordPress

Forums

How to Add an Image to the Left of Page Titles? (8 posts)

  1. Dave333
    Member
    Posted 3 years ago #

    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

  2. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    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.

  3. Dave333
    Member
    Posted 3 years ago #

    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.

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    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
    http://codex.wordpress.org/Function_Reference/add_image_size

    then call that in your page.php right before the title
    http://codex.wordpress.org/Function_Reference/the_post_thumbnail

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

  5. Dave333
    Member
    Posted 3 years ago #

    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.

  6. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    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?

  7. Dave333
    Member
    Posted 3 years ago #

    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.

  8. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic