Hi, please

Tag Archives: php

Wordpress 2.9 thumbnail feature in Thematic / code + links for related issues

Well, Wordpress 2.9 is finally here!!! And with it many new features, one of which is the new thumbnail feature. First let me show you few examples of how it looks like and how you can use it (for those who just want to copy the code scroll to the bottom of the post).

What is the Wordpress 2.9 thumbnail feature?

Once you upgrade to /or/ activate Wordpress 2.9 and get your thumbnail feature going (what will be shown in a minute), you will be able to create galleries inside your WP blog. This will enable you to show only the thumbnail on your home page and have the gallery of as many photos as you wish “behind” it. Here is how this will look like in the default setup:

thumbnails

gallery

gallery_single

Portfolio sites with Wordpress 2.9

What is great about this feature is that now (with a little knowledge of php and css), Wordpress can easily be used for creating portfolio sites which was much more complicated in the older versions. Here is an example of how I used it to create my graphic design portfolio site (this is still work in progress so pay attention only to the home page).

portfolio

Explaining the code

Here is what you have to do to activate the new thumbnail feature in Wordpress 2.9. All code that follows should be placed inside your childthemes functions.php and styled in your childthemes style.css (read more about getting started with Thematic and childtheme). .

What we need to do is “call” the thumbnails (wordpress calls it the_post_thumbnail) inside the post content. Now, if we want the thumbnail feature to appear on each post we have to call for them inside the loop (loop is the list of things that each post goes through before being published). If you have no idea what am I talking about read more about the loop. Here goes…

<?php
//* First we will add the thumbnail feature *//
add_theme_support('post-thumbnails');
 
//* To create our own loop we have to get rid of thematic index loop first.*//
function remove_index_loop() {
     remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
// Now we will create our own loop.
function thumb_index_loop(){
       while ( have_posts() ) : the_post()  // Start the loop:
    // This is just what we decide to show in each post ?>
    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
        <?php thematic_postheader(); ?>
        <div class="entry-content">
        <?php the_post_thumbnail();  // we just called for the thumbnail ?>
        </div>
        <?php thematic_postfooter(); ?>
    </div><!-- .post -->
    <?php
    endwhile; // loop done, go back up 
}
// And in the end activate the new loop.
add_action('thematic_indexloop', 'thumb_index_loop');
?>

Note that our posts will include post header, post image (the thumbnail) and post footer. So we just added thumbnails to the blog. Also note that we wrapped the thumnails, header and footer inside divs so you can teyle them in your style.css.

And the code is there. Now all you need to do is use them. Go to your wordpress admin page and on the right side under the categories widget you will see the new one: POST THUMBNAILS. It will offer you to upload an image that will be used as the thumbnail for that post (just don’t forget to press “save all changes” after you upload an image). Also every time you upload an image to your gallery, you will have an option “use as thumbnail” next to the “insert into the post” button. In the same window you can choose do you want to use it as a link to the post or to the image itself or you don’t want it to be a link at all. After saving all changes the image should appear in your “post thumbnails” widget.
edit_post

Now you can add as many images you want into the post but only the thumbnail will be visible on your home page.
And you are all set!

By mirna 01:40, Dec 14th, 09 #3 - OSD 12 Comments

Getting funky with (filtering) the thematic loop

The following is an example of ways to interact with the Wordpress loop using the Thematic theme framework. It is based on a tutorial published by Cats Who Code.

Place the following code in your Thematic child theme functions.php file.
First remove the default loop:

<?php
/* Get rid of the original loop first (otherwise we'll have two of them): */
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
?>

Then divide the posts in the loop into separate divs (this is useful if you want several columns of 2+ posts floating on next to the other). This intervention in the loop is brought here as an example, any other intervention can be achieved in similar ways.

<?php
/* Get rid of the original loop first (otherwise we'll have two of them): */
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function child_index_loop(){
  /* We know we start with a column, so before the loop we echo a div:  */
  echo "<div class='span-3'>";
  /* We want to keep count of the posts, let's start with 1: */
  $count = 1;
  while ( have_posts() ) : the_post() /* Start the loop: */ ?>
 
      <!-- This is just what we decide to show in each post: -->
      <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
          <?php thematic_postheader(); ?>
        <div class="entry-content">
          <?php thematic_content(); ?>
        </div>
        <?php thematic_postfooter(); ?>
      </div><!-- .post -->
 
       <?php
        /* In the case you're rendering the very last post, do nothing: */
        if ($count == 10){
          // Do nothing, thematic will add a '</div>' to close the last post
        /* Is this the last post in the column?
        That means if the loop number divides by 2 (or whatever post per column number we choose) */
        } elseif ($count%2 == 0){
          /* if this is the bottom post, close the div and start a new div: */
          echo '</div>
          <div class="span-3">';
        } else {
          /* Do nothing, just move on, nothing to see here... */
        }
      ?>
 
      <?php
      /* We're about to finish the loop, let's add 1 to the count: */
      $count = $count + 1;
 
    endwhile; /* loop done, go back up */
 
    /* All the posts are done, close the last column: */
    echo '</div>';
}
 
/* Make sure thematic_indexloop changes the loop for the index page only or everywhere in WP: */
add_action('thematic_indexloop', 'child_index_loop');
?>
By Mushon 14:14, Dec 1st, 09 #2 - Wordpress class notes help 3 Comments

Once and for all – the difference between Filters and Hooks

Actually, it is much simpler than you might think:

Filters

Replaces or changes an existing function (from the original Wordpress code, from your Template theme or even one declared by you). It can completely replace the function like here:

<?php
function childtheme_postheader() {
	echo 'bacon';
}
add_filter('thematic_postheader','childtheme_postheader');
?>

Or change the function by adding to it, like here:

<?php
function childtheme_posttitle($posttitle) {
	return '<div class="containing">' . $posttitle . '</div>';
}
add_filter('thematic_postheader_posttitle','childtheme_posttitle');
?>

More about Filters

Action Hooks

Hooks are used to stick a new function (not change an existing one) in different places in the page. There are several hooks in Thematic, each of them can be used as an empty placeholder to be used whenever you want to stick more html or php anywhere in your site

Example:

<?php
// First we make our function
function childtheme_welcome_blurb() {
 
// We'll show it only on the HOME page IF it's NOT paged
// (so, not page 2,3,etc.)
if (is_home() & !is_paged()) { ?>
 
<!-- our welcome blurb starts here -->
<div id="welcome-blurb">
<p>Welcome to <?php bloginfo('name'); ?>.</p>
</div>
<!-- our welcome blurb ends here -->
<?php }
 
} // end of our new function childtheme_welcome_blurb
 
// Now we add our new function to our Thematic Action Hook
add_action('thematic_belowheader','childtheme_welcome_blurb');
?>

More about Action Hooks

By Mushon 20:18, Nov 16th, 09 #2 - Wordpress help 1 Comment