by The HungryCoder

Header Image Rotator for Twenty Ten theme of WordPress 3.0

WordPress 3.0 is still in RC1. I have already upgraded this blog to this version. I can’t but  simply love the new theme ‘Twenty Ten’ which is default in WordPress 3.0. It is super simple theme.

In this theme, there is option to use custom header image. From the admin panel you can select the header image. However, all of the default banners looked interesting to me and I have also uploaded some of my own shots. I wanted to show them all.

Keeping that in mind, I made this simple plugin, Twenty Ten Image Rotator. Having this plugin installed, you can show all images on the header. Single banner each selected randomly on each page load.

I believe if you love Twenty Ten theme, you will love this plugin too :).

Download from WordPress Plugin Repo

←  Older Comments
 →

  • @Matthew
    Thanks for the code! I finally got this plugin to work. Thanks also to everyone that commented. I pieced together bits of information and got it to work perfectly.

  • Kevin

    this seemed to work for me on an older blog, and I have been designing a new and tried to use it again but I think its not compatible with newest version of wordpress =(

  • jon

    can this work on twentyten child themes? more specifically Atmosphere 2010. I really want to be able to rotate my site’s header.

  • Marius

    Highly Highly thanks!!! For solution “edit funtions.php and change the image names in the code to your custom image’s names”!!!

  • When you create your own images give them the same exact names that are already uploaded in to the themes image directory, that way they will overwrite the ones that are already in there. It is that simple. You may also go in to the functions.php file and rewrite the following code to the names of your images, but the first way is much simpler. That way when you do a wordpress or theme update all you have to do is reupload the images since they get replaced with the default ones.

  • I’m sorry I forgot to show you the code:

    ‘berries’ => array(
    ‘url’ => ‘%s/images/headers/berries.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/berries-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Berries’, ‘twentyten’ )
    ),
    ‘cherryblossom’ => array(
    ‘url’ => ‘%s/images/headers/cherryblossoms.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/cherryblossoms-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Cherry Blossoms’, ‘twentyten’ )
    ),
    ‘concave’ => array(
    ‘url’ => ‘%s/images/headers/concave.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/concave-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Concave’, ‘twentyten’ )
    ),
    ‘fern’ => array(
    ‘url’ => ‘%s/images/headers/fern.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/fern-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Fern’, ‘twentyten’ )
    ),
    ‘forestfloor’ => array(
    ‘url’ => ‘%s/images/headers/forestfloor.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/forestfloor-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Forest Floor’, ‘twentyten’ )
    ),
    ‘inkwell’ => array(
    ‘url’ => ‘%s/images/headers/inkwell.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/inkwell-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Inkwell’, ‘twentyten’ )
    ),
    ‘path’ => array(
    ‘url’ => ‘%s/images/headers/path.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/path-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Path’, ‘twentyten’ )
    ),
    ‘sunset’ => array(
    ‘url’ => ‘%s/images/headers/sunset.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/sunset-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Sunset’, ‘twentyten’ )
    )

    We will use the sunset code for example:
    ‘sunset’ => array(
    ‘url’ => ‘%s/images/headers/sunset.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/sunset-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘Sunset’, ‘twentyten’ )
    )

    and the name of your image is mountains.jpg. Your code will look like this:

    ‘mountains’ => array(
    ‘url’ => ‘%s/images/headers/mountains.jpg’,
    ‘thumbnail_url’ => ‘%s/images/headers/mountains-thumbnail.jpg’,
    /* translators: header image description */
    ‘description’ => __( ‘mountains’, ‘twentyten’ )
    )

    Just make sure your images are the same dimmensions that are already upload. Both the main image and the thumbnail image.

  • Cat Lady

    Is there a way I can use my own images with this plug in. I am fairly new to this but I was able to edit it to take my newly created image. But my friend would like to see my own rotating header images
    Thanks

  • Cat Lady

    I tried that and it didn’t work. I don’t understand all of this coding stuff yet so I was looking for what i thought would be the easiest way. I put the images in the correct folder, but nothing happened. What am I doing wrong.

  • hi there I d like to use my own images with this plugin but I am quite lost…..I ve installe the plug but I don’t know where I suppos to upload the images to rotate
    thanks

  • Lee- Name the images exactly the same as the ones in the original header folder. Make sure you have the same number of images as the original or you will get blank headers from time to time.

  • Ewien van Bergeijk – Kwant

    hi there, thanks for this rotator…very cool.

    is there any way I could use my own top 5 pics instead of the default ones given by WP? Thnx!

  • Atze

    doesn´t work with wp 3.1 … ???

  • Richard

    How can I set a default image which will be shown at first?

  • Richard

    You use WP 3.1 + TT 1.2 and the rotator works. How did you manage that? After my wordpress update the plugin is broken.

  • Hi John. Thanks for the tip. My header images keep getting wiped out with each update so I’d like to do it this way. Where exactly in the functions.php do you place this code?

    Here’s what’s there so far:

    <?php

    add_action( 'after_setup_theme', 'child_theme_setup' );

    if ( !function_exists( 'child_theme_setup' ) ):
    function child_theme_setup() {
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 880 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 236 ) );
    }
    endif;

    Thank you for your help! I'm new to php…

  • Richard

  • Rotator is not working on latest Worpress release, and actually generates this error and dosen’t show anything else of the site : Fatal error: Cannot redeclare class Custom_Image_Header in /home/xxxxxx/public_html/wp-admin/custom-header.php on line 16

  • Pingback: Twenty Ten Header Rotator « Kaddel's Blog()

  • Fatal error: Cannot redeclare class Custom_Image_Header in /home/XXXX/public_html/wp-admin/custom-header.php on line 16

    Yep! I thought I was going insane! I get all the same errors. I thought I broke something because I was just renaming path and using my own image but…Thanks. I’ll try a few other solutions.

  • http://www.callum-macdonald.com/code/wp-random-header/

    I’m a lazy bastard. But this plugin works! No BS of renaming files to match path and forest floor etc..etc… Just grab yourself a folder name it to header-images throw all your jpgs in it tho, you should resize them and make sure they look good @ 940×198 (twenty ten default layout).

    Then just throw the folder across onto the root directory of wp-content/ VALA! Works in 3.1 WP! 🙂

    Cheers!

  • The HungryCoder

    Hi,
    I just released an update of this plugin. You should already get update notification in your wordpress admin area. Please update to latest version and let me know whether it works on 3.1 or not. In fact, this plugin was working on a number of blogs while not working on a few due to inclusion of a file twice (i guess). I believe it would be fix by now.

    Thanks

  • yeah, it works

  • boris

    Thanks for the update, 1.3 works like a charm with WP3.1 🙂

  • Great Plugin Thanks

  • Ken

    I updated the plugin, but now my images aren’t loading properly. They’ll either not load at all or only partially load.

    I haven’t upgraded to 3.1 yet. Not sure when I will. Is there a way I can use the previous version of this plugin?

  • The HungryCoder

    Hello Ken,
    I believe the problem is with something else. In the new version of this plugin there is no change made that could cause such problem. Technically, the change was from ‘require’ to ‘require_once’.

    However, you can download any version from here:
    http://wordpress.org/extend/plugins/twenty-ten-header-rotator/download/

    Thanks

  • Ken

    Hmmm…yeah, that doesn’t seem like it would cause such a problem. Maybe I’ll do the tried and true troubleshooting technique and reboot first. Haha.

    Thanks!

  • Pingback: Header Image Rotator for Twenty Ten theme of WordPress 3.0 | The HungryCoder | Eagle Internet (Theatre Site)()

  • Hi,
    I have replaced all the pictures in the header by my own, using the same names as the originals. However I have deleted first the original picture in the header function.
    Now I sometimes get a blank header. Any idea how I can solve that?

    Kind regards,

    Evert

  • Where do I place this code?

    Kind regards Evert

  • bvo

    is there a way to have a specific header image with a specfic post, like “if post is usa, then use image usa” and “if post is canada, then image is canada”?

  • how do u get rotating header to work? i went to appearance. header but dont see what to do

  • mamta

    I have intalled it but dont know how to use it please help me out..
    thanks

  • The HungryCoder

    Please check the following link:
    http://codex.wordpress.org/Managing_Plugins

←  Older Comments
 →