WordPress Tricks – Part 3

Translate this post automatically to any language you want!

WordPress Tricks – Part 3

HOT!

9 April 2011

So here’s some more useful code for when WordPress, in its almighty awesomeness, forgets bits and pieces..
Let’s get started with a trick and a half: how to display WordPress categories called by wp_list_categories, one next to the other, also adding a separator in between them, but without showing it even after the last category.

<?php
$catlist = explode( '<br />', wp_list_categories( '&title_li=&style=none&echo=0' ) ); // add whatever args you want, just don't remove the current ones
array_pop($catlist);
echo implode(' / ',$catlist); // I chose the separator " / ", but you can put whatevs
?>

<?php

$catlist = explode( '<br />', wp_list_categories( '&title_li=&style=none&echo=0' ) ); // add whatever args you want, just don't remove the current ones

array_pop($catlist);

echo implode(' / ',$catlist); // I chose the separator " / ", but you can put whatevs

In case you actually want the separator to show up even after the last category, use this other bit of code instead:

<?php
$catlist = wp_list_categories('echo=0&style=none'); // add whatever args you want, just don't remove the current ones
$catlist = str_replace('<br />','|',$catlist); // so here I chose the separator " | ", up to you what to use
echo $catlist;
?>

<?php

$catlist = wp_list_categories('echo=0&style=none'); // add whatever args you want, just don't remove the current ones

$catlist = str_replace('<br />','|',$catlist); // so here I chose the separator " | ", up to you what to use

echo $catlist;

And now a cookie for you, a function I made some time ago for Vivanotte.it, to simplify and automate post images displaying in any part of the template I wanted.
You will need timthumb for this, you will put it in a scripts folder, inside your template (put timthumbs.php and create an empty folder cache, making sure it’s writeable).
Then go ahead and put the code below in your template functions.php (not there? create it).

Moreover, thanks to timthumb, we can resize images nicely with any size we want and also have the images cached, so that the server doesn’t have to cry in pain, resizing every image each time run-time.

So basically, the function looks for, in priority order: Featured post image, image link added through a custom field thumb inside the post, any image uploaded inside the post.
The first one that it finds, will be the one displayed wherever we want in the template.

<?php 
// Make sure the template supports featured images
if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
  }
// Let's do this!
function shambix_thumb($width,$height) {
global $post;
$key1 = "thumb"; // this is the name of the post custom field
$thumb = get_post_meta($post->ID, $key1, true);
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
$attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'rand', 'numberposts' => 1) );
 if (function_exists('has_post_thumbnail') && has_post_thumbnail($post->ID)) {
// the featured image
echo the_post_thumbnail(array($width,$height)); 
 } elseif ($thumb == true) {
// the image link found as value for the post custom field "thumb"
 echo '<img src="'.get_bloginfo('template_url').'/scripts/timthumb.php?src='.$thumb.'&w='.$width.'&h='.$height.'&zc=1&q=100" alt="'.$post->post_title.'" />';
 } else if ($attachments == true) {
// a random post uploaded in the post
 foreach($attachments as $id => $attachment) {
 $img = wp_get_attachment_image_src($id, 'full');
 $img_url = parse_url($img[0], PHP_URL_PATH);
 print '<img src="'.get_bloginfo('template_url').'/scripts/timthumb.php?src='.$img_url.'&w='.$width.'&h='.$height.'&zc=1&q=100" alt="'.$post->post_title.'" />'; 
 break;
 }
 }  else { 
// if nothing is found, don't display anything, however you could add some standard image in this case, up to you
 }
}

<?php

// Make sure the template supports featured images

if (function_exists('add_theme_support')) {

add_theme_support('post-thumbnails');

}

// Let's do this!

function shambix_thumb($width,$height) {

global $post;

$key1 = "thumb"; // this is the name of the post custom field

$thumb = get_post_meta($post->ID, $key1, true);

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');

$attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'rand', 'numberposts' => 1) );

if (function_exists('has_post_thumbnail') && has_post_thumbnail($post->ID)) {

// the featured image

echo the_post_thumbnail(array($width,$height));

} elseif ($thumb == true) {

// the image link found as value for the post custom field "thumb"

echo '<img src="'.get_bloginfo('template_url').'/scripts/timthumb.php?src='.$thumb.'&w='.$width.'&h='.$height.'&zc=1&q=100" alt="'.$post->post_title.'" />';

} else if ($attachments == true) {

// a random post uploaded in the post

foreach($attachments as $id => $attachment) {

$img = wp_get_attachment_image_src($id, 'full');

$img_url = parse_url($img[0], PHP_URL_PATH);

print '<img src="'.get_bloginfo('template_url').'/scripts/timthumb.php?src='.$img_url.'&w='.$width.'&h='.$height.'&zc=1&q=100" alt="'.$post->post_title.'" />';

break;

}

} else {

// if nothing is found, don't display anything, however you could add some standard image in this case, up to you

}

I’ve already SEOd the function, so that every image is validated and SEO friendly, with its alt = post title.
Pretty obvious but nontheless worth to mention, in case you want to link every displayed image to its post, follow the instructions:

// place it in the function above, after each echo' or print' but before <img src=...
<a href="'.get_permalink($post).'" title="'.$post->post_title.'">
// and this after the /> but before ';
</a>

// place it in the function above, after each echo' or print' but before <img src=...

<a href="'.get_permalink($post).'" title="'.$post->post_title.'">

// and this after the /> but before ';

</a>

So, to display post images anywhere in your template, simply use inside a loop:

<?php
shambix_thumb(width,height); // where widht and height are obviously the size you want, but without 'px'
?>

<?php

shambix_thumb(width,height); // where widht and height are obviously the size you want, but without 'px'

Enjoy!

Jany Martelli

Founder & CEO

I started programming at 7, assembled my first PC at 10, made the first website at 13, studied Business Management and Marketing at the University of Florence and dropped out at 23 to run my own thing, Shambix.
I love raging to EDM, snowboarding, travelling, driving off in the Tuscan countryside and… writing code (read “being a nerd”).
Eventually I’ll get my degree as well.

Develop (HTML 4/5, CSS 2/3 + .less, PHP, Javascript, Twitter Bootstrap Framework, WordPress official consultant), design (Photoshop, InDesign, Illustrator), plan (Business Development, New Products, Marketing Strategies), manage.

6 comments on “WordPress Tricks – Part 3”

Kim28 April 2013

Thank you for the wp_list_categories bit!

Reply ↓
daniela24 September 2011

Ma se invece volessi escludere le miniature in tutti i miei post come devo fare? Di default, quando inserisco l’immagine in evidenza, compare una thumb che non voglio assolutamente… ho individuato (credo) la parte di codice che mi iteressa:

add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );
set_post_thumbnail_size( 130, 130, true ); // Normal post thumbnails
add_image_size( ‘single-post-thumbnail’, 250, 250 ); // Permalink thumbnail size

ma non capisco un granchè! aiutatemi!

Qui si vede in piccolo l’immagine in evidenza che ho inserito (e mi sta bene)
http://www.fotobaby.it/fotografi%20catania/galleria-foto/

Qui invece la stessa immagine risulta li in alto a dx ma non la voglio! Come toglierla solo dai post?
http://www.fotobaby.it/2011/09/lorenzino-e-mamma-valentina/

Reply ↓
Jany23 June 2011

Ma il “crop” dove l’hai messo esattamente?
Il “true” della stringa che ti dicevo, istruiva appunto la funzione, di fare il crop all’immagine, che è tagliata perchè il crop fa appunto quello.
L’immagine non la vedi per una questione di CSS.
Metti nel css:
.related-posts img {position:absolute;}
ol.related-posts p {position:relative; top:85px;}

Reply ↓
Gunela23 June 2011

Ciao, caspita che velocità, sono commosso!
Il tuo escamotage purtroppo non ha funzionato. Dentro functions.php ho messo la stringa che mi hai suggerito ma non ha prodotto effetti.
Ho risolto parzialmente il problema inserendo un crop nella parentesi dell’array.
Mi taglia l’immagine ma per lo meno il thumbnail è quadrato.
Ora ho un altro problema: con IE7 non visualizzo l’immagine e il relativo link.. avete qualche idea del perchè?

Reply ↓
Jany18 June 2011

Ciao Davide, metti questo nel functions.php:
set_post_thumbnail_size( 80, 80, true );
Dimmi se è quello che intendevi!

Reply ↓
Davide18 June 2011

Ciao, ho implementato la tua funzione sul mio blog adattandola per un template di yarpp. E tutto perfetto se non i thumbnail estratti dalle Immagini in Evidenza dei post, che riflettono la loro dimensione.
Es: sul post l’immagine è rettangolare.
Dentro la mia funzione ho settato 80×80, mi aspettavo una immagine quadrata e invece è 80×53. Come posso risolvere la questione, se possibile evitando di distorcere l’immagine?

Reply ↓

WordPress Plugin: Hot’n'Cold

Hot’n'Cold is WordPress plugin that shows a different colored badge for every post, depending if the post is “hot”, “medium” or “cold”, based on Jetpack post views.

WordPress Plugin: iSlidex

iSlidex is a Wordpress Plugin that will showcase, in a cool style, images taken from posts in a specific category.

Freebies

[Freebie] Power Button

A free psd containing a modern Power Button made of steel and leather. We love freebies so feel free to use them however you please, commercial and non projects. There’s more free graphic stuff around the site you can download, you can also request more free elements by commenting.

[Freebie] Sleek On Switch

A free psd containing Simple On/Off Switches/Toggles We love freebies so feel free to use them however you please, commercial and non projects. There’s more free graphic stuff around the site you can download, you can also request more free elements by commenting.

[Freebie] Simple On/Off Switches/Toggles

Code & Snippets

[Code] Display checkin list from Foursquare

× Foursquare now limits even more the requests sent to their servers, therefore you must use another method. Updates soon. If you’ve ever wondered how to display a simple list of your latest Foursquare checkins, with a Googlemap link too and without having to install yet another plugin (if you use a CMS, such WordPress [...]

WordPress Tricks – Part 4

So you have custom taxonomy in your WP site, because you want some posts to be a bit more than just “Articles”, follow their own rules and be displayed in a different way maybe. So what if you want to display, in one page, all those posts BUT first the ones with a specific custom [...]

(Facebook) Twitter & RSS counters

Just a little script to show a Twitter account’s followers count and a Feedburner subscribers count. In the zip file you’ll also find the images that will contain the counters, a basic css and all the code needed. If you want them to be all in the same line you could, for example, add a [...]