Show a number of posts ( or pages ) links and thumbnails images, randomly picked from a certain set.
For this we will need the set of ‘promoted’ posts ( or pages ), and a function to get the posts thumbnails.
For get the posts thumbnails function i will not insist and just use this one here. The set of ‘promoted’ posts will be a simple array of ID’s.
Add this to the functions.php file
function getPromotedLinks() { // the array with the ID's of the posts ( or pages ) to be shown as promoted $promoted = array( x, xx, xxx, ... n ); //here put your posts or pages ID's $rand_ids = array_rand( $promoted, 5 ); //replace '5' with an integer of how many promoted items to be shown at once //what will be showed in frontend echo '<ul class="promotedlinks">'; foreach ( $rand_ids as $i ) { //get the post (or page) image $postID = $promoted[$i]; $all_images =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $postID ); if($all_images) { $arr_of_all_images = array_keys( $all_images ); // Get the first image attachment from post $firstImage = $arr_of_all_images[0]; // Get the thumbnail url for the attachment // If you want the full-size image instead of the thumbnail, use wp_get_attachment_url() instead of wp_get_attachment_thumb_url(). $thumb_url = wp_get_attachment_thumb_url( $firstImage ); // Build the <img> string $First_thumb_image = '<img src="' . $thumb_url . '" width="100" height="100" alt="Thumbnail Image" title="Thumbnail Image" />'; } echo '<li><a href="'. get_permalink( $promoted[$i] ) .'">'; echo $First_thumb_image; echo '<span>'. get_the_title( $promoted[$i] ) .'</span></a></li>'; } echo '</ul>'; }
this is all, … you get a list of 5 (or how many you like), random links with thumbnails, which you can call anywhere ( inside loop, outside loop-> sidebar etc ), by <?php getPromotedLinks(); ?>.
Style as you wish,… an example would be:
ul.promotedlinks { margin: 0; list-style-type: none; } ul.promotedlinks li { width: 125px; float: left; padding: 0; border-left: 1px solid #DDDDEE; overflow: hidden; } ul.promotedlinks li:first-child { border-left: none; } ul.promotedlinks li a { display: block; height: 100%; padding: 6px; } ul.promotedlinks li a:hover { text-decoration: none; background: #DDDDEE; } ul.promotedlinks li a img, ul.promotedlinks li a span { display: block; }