WordPress.org

Ready to get started?Download WordPress

Forums

How do I add featured image support to any theme? (24 posts)

  1. foreclosurefraudnews
    Member
    Posted 3 years ago #

    Online i find themes all the time that i like. Unfortunately too often they do not support featured images on the homepage or even on the article. How can i add featured support to any theme?

    I have seen articles, but they seem to be written for a particular theme. So I need to know how to do it on any theme. Also, is there a plugin that does this for me. I've tried "Get The Image" but that didn't seem to do anything.

    I'm currently trying Black Board 1.1.2 by Frank Schrijvers

  2. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Review Post_Thumbnails.

  3. foreclosurefraudnews
    Member
    Posted 3 years ago #

    This talks about it, but doesnt tell me how to do it. i tried just copy and pasting the code in but it doesnt do anything.

  4. frikafrax
    Member
    Posted 3 years ago #

    I used these generic directions I found via Google to successfully add featured image support to an older theme.

    http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

  5. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Did you start by adding in theme support via functions.php?

    add_theme_support( 'post-thumbnails' );

  6. foreclosurefraudnews
    Member
    Posted 3 years ago #

    I tried adding that code and nothing happened. Part of the problem is that it tell me to put the code in the loop.php But most of the themes ive seen dont have a loop.php.

    How can I tell which php is the looop?

  7. foreclosurefraudnews
    Member
    Posted 3 years ago #

    Anyone? I still can't figure it out

  8. frikafrax
    Member
    Posted 3 years ago #

    (BTW, I don't know PHP myself but gleaned enough information to get post thumbnails working in a theme that didn't support the feature.)

    In a nutshell, The Loop isn't a stand alone PHP script per se. It's a section of code that WordPress uses to format and display posts and it's called repeatedly in a loop while there are posts left to be displayed.

    Typically, this section of code is located in the "index.php" file of your current theme as well as any other template file that's used to display a post to the user.

    This link in the WordPress Codex explains the Loop in action.

  9. foreclosurefraudnews
    Member
    Posted 3 years ago #

    I tried to follow the directions but i got and error that took down the entire wp gui.
    Parse error: syntax error, unexpected '<'

    Is there anyone out there willing to walk me through this. I'm currently using gamezone theme. Once I learn how to do it for 1 theme Im sure i can do it for others.

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

    that error usually means you inserted php code inside of php code.

    gamezone isn't in the WP theme repository, so I can't look at it. But you can't put php code inside php code.

    <?php code
    
    more code
    <?php adding php code here with opening and closing tags is invalid ?>
    
    }
    ?>

    you do it before or after

    <?php code
    
    more code
    
    }
    ?>
    
    <?php you can add code after like this ?>
  11. foreclosurefraudnews
    Member
    Posted 3 years ago #

    I reset the theme back to default.
    And here is a link to the theme.
    http://www.web2feel.com/gamezone/

    I'd appreciate your help Rev. Voodoo

  12. frikafrax
    Member
    Posted 3 years ago #

    @foreclosurefraudnews

    I managed to get Gamezone to use WordPress' post thumbnails feature.

    I'd rather defer to someone who really knows PHP but I'll post my findings anyway in case you want to play around with it yourself.

    This example involves Gamezone's index.php file.

    Gamezone loads thumbnails via URLs that are set by the blogger using Custom Fields and assigns the thumbnail URL to a variable called $screen:

    <?php $screen = get_post_meta($post->ID,'screen', true); ?>

    It then embeds that URL inside an img HTML tag:

    <img src="<?php echo ($screen); ?>" width="80" height="55" alt="" />

    After some Google-fu and checking out some entries in the WordPress Codex, I replaced this:

    <?php $screen = get_post_meta($post->ID,'screen', true); ?>

    With this:

    <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,’thumbnail’, true); ?>

    What it does is fetch the ID of the thumbnail that's attached to the post and assigns it to $image_id to be used later as a required parameter.

    Then it gets the URL of the actual post thumbnail using wp_get_attachment_image_src and assigns it to $image_url. Note that wp_get_attachment_image_src requires an ID, which is provided by $image_id that we assigned earlier.

    Then I replaced this:

    <img src="<?php echo ($screen); ?>" width="80" height="55" alt="" />

    With this:

    <img src="<?php echo $image_url[0]; ?>" width="80" height="55" alt="" />

    They do the same thing (I.e. Embed the URL of the thumbnail inside of the IMG HTML tag using php echo.) except that the replacement code uses the URL derived from wp_get_attachment_image_src.

    I installed Gamezine on a defunct blog that was updated to WP v3.0.4, added a few featured images to some random posts, tested the new code and it worked. Gamezone theme was using post thumbnails set within WordPress.

    I noticed that the Featured Posts slider would not function properly under Firefox, Chrome or Safari. Since I hadn't made any changes to the glide.php script that controls it, this could be a theme issue.

    Since I don't know PHP, that's about as far as I go. As mentioned, I defer to those with PHP experience. I thought I'd take a crack at it anyway for what it's worth.

  13. foreclosurefraudnews
    Member
    Posted 3 years ago #

    o_O Wow man thanks for the help I'm going to go try this out.

    But if every theme using custom variables to load images how am I as a noob supposed to know what I'm looking for in other themes?

    It's a darn shame that it somehow kills the Slider.

    Isn't there just a way to only instead it into the page and not affect the rest of the theme?

  14. frikafrax
    Member
    Posted 3 years ago #

    Whoa, stop the presses... I think I might have screwed up.

    I may have confused the themes. I have one called Gamezone and Gamezine.

    Aw, crap! Lemme get back to you. :-P

    EDIT: Oh man, I am SO embarrassed. I spent all that time fixing a theme called GameZINE so featured images would work with it. You needed help with Game ZONE.

    Argh!

  15. foreclosurefraudnews
    Member
    Posted 3 years ago #

    Lol... I put a link on one of my posts.
    Here it is http://www.web2feel.com/gamezone/

  16. frikafrax
    Member
    Posted 3 years ago #

    That's why I feel so stupid right now. X-D

    I actually used the link in your post to visit the GameZone theme site but I can't explain how I ended up with GamezIne installed. :-P

    What were you looking to do with the Gamezone (with an "O" ;-D) theme?

  17. foreclosurefraudnews
    Member
    Posted 3 years ago #

    Well as you can see there are featured images on the front page. but when you click on an article the featured image doesn't show up in the article. And thats the case for every theme I tested on that site.

    I want to know how I can add featured images to the actual posts so i can do it again on other themes.

  18. frikafrax
    Member
    Posted 3 years ago #

    You need to edit the file called "single.php". This is the template file that's used when you're only displaying a single, specific post.

    Around line 25, look for the following code:

    <div class="postcover">
    
    <?php the_content('Read the rest of this entry »'); ?>

    You have to insert code between those two lines:

    <?php gzo_home_image(); ?>

    The code should now look like this:

    <div class="postcover">
    
    <?php gzo_home_image(); ?>
    
    <?php the_content('Read the rest of this entry »'); ?>

    Your post thumbnail images should now show up in single post display mode.

  19. foreclosurefraudnews
    Member
    Posted 3 years ago #

    First of all thank your awesome. I would never have figured that out.

    Second, how did you figure that out? What should I look for in the future.

  20. frikafrax
    Member
    Posted 3 years ago #

    No problem! It was a good learning experience for me.

    So to sum it all up...

    I checked the theme template file responsible for generating the blog's front page. This is "index.php" that's stored in the theme's installation directory. In our case, it's /wp-content/themes/gamezone

    The standard way to load a post thumbnail in WordPress is to use the function called the_post_thumbnail(). Normally this is what you'd look out for in other themes. But Gamezone didn't have it. Weird...

    Since the thumbnails were being displayed next to excerpts, I looked for the WordPress function to show excerpts in "index.php". The function to show excerpts is (unsurprisingly) called the_excerpt().

    I see the_excerpt() function in "index.php" and notice an unfamiliar function just above it called gz_home_image().

    That must be it. I copy it to the template file that's used to show single posts ("index.php") and it worked!

    The tricky thing here is the fact that the Gamezone theme author defined and used a custom function to load post thumbnails, so you're not going to find gzo_home_image in any other theme except the Gamezone theme.

    Generally speaking, you should be looking for the_post_thumbnail() if you're editing the placement or appearance of post thumbnails.

  21. foreclosurefraudnews
    Member
    Posted 3 years ago #

    Well thanks very much. I'll try to look for crazy functions like that in the future.

  22. frikafrax
    Member
    Posted 3 years ago #

    You're welcome. :-)

    I forgot to mention that custom theme functions are defined in the file called "functions.php" that's stored in the theme's installation directory.

    If a theme author has used any custom functions instead of the standard internal WordPress functions, they should all be defined in that file, and you can figure out exactly what a custom function does by looking at how its defined in "functions.php"

    Hindsight: If I had gone to functions.php in the first place, I could have found out which custom function was responsible for loading thumbnails and then looked for it in the template files.

  23. electrolund
    Member
    Posted 3 years ago #

    Everyone, there's a much easier method from Mark's blog. Put this in your functions.php:

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 80, 55, true ); // W x H, hard crop

    Put this in your index.php loop:

    <?php
    if ( has_post_thumbnail() ) {
    	// the current post has a thumbnail
    	the_post_thumbnail();
    } else {
    	// the current post lacks a thumbnail
    }
    ?>
  24. frikafrax
    Member
    Posted 3 years ago #

    @electrolund

    I already posted that same link; see fourth post from the top. He already tried the method as outlined in Mark's blog but it didn't work in his case.

    The thread subject asks for a "universal" solution to adding post thumbnails and Mark's method is usually how it's done AFAIK. But the theme Foreclosurefraudnews was using did things a little differently and so it needed a different solution that worked within the theme's established framework.

    This post should be ignored entirely as I was working with the wrong theme installed.

    This was the solution for the specific theme being discussed; adding a single, short line of code.

Topic Closed

This topic has been closed to new replies.

About this Topic