Archive for category wordpress

10 Useful WordPress Coding Techniques

    Since last year, the WordPress themes market has grown incredibly. The reason? Great designs, of course, but also a lot of amazing new functionality. Top WordPress developers are always looking to get the most out of WordPress and use all of their knowledge to find ways to make their favorite blogging engine even more powerful. In this article, we have compiled 10 useful WordPress code snippets, hacks and tips to help you create a WordPress theme that stands out from the crowd. You may be interested in the following related posts: Power Tips For WordPress Template Developers 10 Useful WordPress Loop Hacks Custom Field Hacks For WordPress Mastering WordPress Shortcuts 1. Style Posts Individually The problem . Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID. The solution . To apply this trick, just open your single.php file, find the loop and replace it with the following: <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <?php the_content(); ?> </div> <?php endwhile; else: ?> <?php _e(’Sorry, no posts matched your criteria.’); ?> <?php endif; ?> Code explanation . The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add: .hentry .sticky .category-tutorials .tag-wordpress With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category. The other important piece of this code is id="post-<?php the_ID(); ?>" . By displaying the ID of the post here, we’re able to style a particular post. As an example: #post-876{ background:#ccc; } Source: Take advantage of the new post class 2. Display Related Posts… With Thumbnails! The problem . After they have read your latest post, what do your readers do? That’s easy: most of them simply leave. A great way to keep them interested is to display a list of related posts. Many plug-ins can do that, but for those who like to know how things works, here is some nice code to get related posts and their thumbnails

10 Useful WordPress Coding Techniques

    10 Useful WordPress Coding Techniques (via @smashingmag) – Since last year, the WordPress themes market has grown incredibly. The reason? Great designs, of course, but also a lot of amazing new functionality. Top WordPress developers are always looking to get the most out of WordPress and use all of their knowledge to find ways to make their favorite blogging engine even more powerful. In this article, we have compiled 10 useful WordPress code snippets, hacks and tips to help you create a WordPress theme that stands out from the crowd. You may be interested in the following related posts: Power Tips For WordPress Template Developers 10 Useful WordPress Loop Hacks Custom Field Hacks For WordPress Mastering WordPress Shortcuts 1. Style Posts Individually The problem . Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID. The solution . To apply this trick, just open your single.php file, find the loop and replace it with the following: <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <?php the_content(); ?> </div> <?php endwhile; else: ?> <?php _e(’Sorry, no posts matched your criteria.’); ?> <?php endif; ?> Code explanation . The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add: .hentry .sticky .category-tutorials .tag-wordpress With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category. The other important piece of this code is id="post-<?php the_ID(); ?>" . By displaying the ID of the post here, we’re able to style a particular post. As an example: #post-876{ background:#ccc; } Source: Take advantage of the new post class 2. Display Related Posts… With Thumbnails! The problem . After they have read your latest post, what do your readers do? That’s easy: most of them simply leave. A great way to keep them interested is to display a list of related posts. Many plug-ins can do that, but for those who like to know how things works, here is some nice code to get related posts and their thumbnails. The solution . Simply paste this code after the the_content() function in your single.php file: <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); if ($tags) { echo ‘<h2>Related Posts</h2>’; $first_tag = $tags[0]->term_id; $args=array( ‘tag__in’ => array($first_tag), ‘post__not_in’ => array($post->ID), ’showposts’=>4, ‘caller_get_posts’=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { echo "<ul>"; while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><img src="<?php bloginfo(’template_directory’); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php endwhile; echo "</ul>"; } } $post = $original_post; wp_reset_query(); ?> Code explanation . First, this code makes use of TimbThumb , a PHP image-resizing script. We have used it to automatically resize images to 40 by 40 pixels. Once this code is pasted in your theme, it uses the first tag of the post to fetch related posts. In this example, four related posts are displayed. You can change this number on line 10. Also, notice that I have cloned the $post variable at the beginning of the script and restored it at the end. This prevents problems that may occur with the loop, such as comments being assigned to the wrong post. Source: How to: Show related posts without a plug-in 3. Alternate Post Styling On Your Home Page The problem . Many new WordPress themes have an amazing way of displaying posts on the home page. For example, we can display the first three posts bigger than the rest, with images and extended text, with the remaining posts shown more simply. I have seen many themes in which developers use two distinct loops to achieve this, which isn’t necessary and can cause further problems

10 Useful WordPress Coding Techniques

    10 Useful WordPress Coding Techniques (via @smashingmag) – Since last year, the WordPress themes market has grown incredibly. The reason? Great designs, of course, but also a lot of amazing new functionality. Top WordPress developers are always looking to get the most out of WordPress and use all of their knowledge to find ways to make their favorite blogging engine even more powerful. In this article, we have compiled 10 useful WordPress code snippets, hacks and tips to help you create a WordPress theme that stands out from the crowd. You may be interested in the following related posts: Power Tips For WordPress Template Developers 10 Useful WordPress Loop Hacks Custom Field Hacks For WordPress Mastering WordPress Shortcuts 1. Style Posts Individually The problem . Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID. The solution . To apply this trick, just open your single.php file, find the loop and replace it with the following: <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <?php the_content(); ?> </div> <?php endwhile; else: ?> <?php _e(’Sorry, no posts matched your criteria.’); ?> <?php endif; ?> Code explanation . The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add: .hentry .sticky .category-tutorials .tag-wordpress With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category. The other important piece of this code is id="post-<?php the_ID(); ?>" . By displaying the ID of the post here, we’re able to style a particular post. As an example: #post-876{ background:#ccc; } Source: Take advantage of the new post class 2. Display Related Posts… With Thumbnails! The problem . After they have read your latest post, what do your readers do? That’s easy: most of them simply leave. A great way to keep them interested is to display a list of related posts. Many plug-ins can do that, but for those who like to know how things works, here is some nice code to get related posts and their thumbnails. The solution . Simply paste this code after the the_content() function in your single.php file: <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); if ($tags) { echo ‘<h2>Related Posts</h2>’; $first_tag = $tags[0]->term_id; $args=array( ‘tag__in’ => array($first_tag), ‘post__not_in’ => array($post->ID), ’showposts’=>4, ‘caller_get_posts’=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { echo "<ul>"; while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><img src="<?php bloginfo(’template_directory’); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php endwhile; echo "</ul>"; } } $post = $original_post; wp_reset_query(); ?> Code explanation . First, this code makes use of TimbThumb , a PHP image-resizing script. We have used it to automatically resize images to 40 by 40 pixels. Once this code is pasted in your theme, it uses the first tag of the post to fetch related posts. In this example, four related posts are displayed. You can change this number on line 10. Also, notice that I have cloned the $post variable at the beginning of the script and restored it at the end. This prevents problems that may occur with the loop, such as comments being assigned to the wrong post. Source: How to: Show related posts without a plug-in 3. Alternate Post Styling On Your Home Page The problem . Many new WordPress themes have an amazing way of displaying posts on the home page. For example, we can display the first three posts bigger than the rest, with images and extended text, with the remaining posts shown more simply.

10 Useful WordPress Coding Techniques

    10 Useful WordPress Coding Techniques (via @smashingmag) – Since last year, the WordPress themes market has grown incredibly. The reason? Great designs, of course, but also a lot of amazing new functionality. Top WordPress developers are always looking to get the most out of WordPress and use all of their knowledge to find ways to make their favorite blogging engine even more powerful. In this article, we have compiled 10 useful WordPress code snippets, hacks and tips to help you create a WordPress theme that stands out from the crowd. You may be interested in the following related posts: Power Tips For WordPress Template Developers 10 Useful WordPress Loop Hacks Custom Field Hacks For WordPress Mastering WordPress Shortcuts 1. Style Posts Individually The problem . Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID. The solution . To apply this trick, just open your single.php file, find the loop and replace it with the following: <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <?php the_content(); ?> </div> <?php endwhile; else: ?> <?php _e(’Sorry, no posts matched your criteria.’); ?> <?php endif; ?> Code explanation . The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add: .hentry .sticky .category-tutorials .tag-wordpress With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category. The other important piece of this code is id="post-<?php the_ID(); ?>" . By displaying the ID of the post here, we’re able to style a particular post. As an example: #post-876{ background:#ccc; } Source: Take advantage of the new post class 2. Display Related Posts… With Thumbnails! The problem . After they have read your latest post, what do your readers do? That’s easy: most of them simply leave. A great way to keep them interested is to display a list of related posts. Many plug-ins can do that, but for those who like to know how things works, here is some nice code to get related posts and their thumbnails. The solution . Simply paste this code after the the_content() function in your single.php file: <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); if ($tags) { echo ‘<h2>Related Posts</h2>’; $first_tag = $tags[0]->term_id; $args=array( ‘tag__in’ => array($first_tag), ‘post__not_in’ => array($post->ID), ’showposts’=>4, ‘caller_get_posts’=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { echo "<ul>"; while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><img src="<?php bloginfo(’template_directory’); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php endwhile; echo "</ul>"; } } $post = $original_post; wp_reset_query(); ?> Code explanation . First, this code makes use of TimbThumb , a PHP image-resizing script. We have used it to automatically resize images to 40 by 40 pixels. Once this code is pasted in your theme, it uses the first tag of the post to fetch related posts. In this example, four related posts are displayed. You can change this number on line 10. Also, notice that I have cloned the $post variable at the beginning of the script and restored it at the end.

10 Useful WordPress Coding Techniques

    10 Useful WordPress Coding Techniques (via @smashingmag) – Since last year, the WordPress themes market has grown incredibly. The reason? Great designs, of course, but also a lot of amazing new functionality. Top WordPress developers are always looking to get the most out of WordPress and use all of their knowledge to find ways to make their favorite blogging engine even more powerful. In this article, we have compiled 10 useful WordPress code snippets, hacks and tips to help you create a WordPress theme that stands out from the crowd. You may be interested in the following related posts: Power Tips For WordPress Template Developers 10 Useful WordPress Loop Hacks Custom Field Hacks For WordPress Mastering WordPress Shortcuts 1. Style Posts Individually The problem . Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID. The solution . To apply this trick, just open your single.php file, find the loop and replace it with the following: <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> <?php the_content(); ?> </div> <?php endwhile; else: ?> <?php _e(’Sorry, no posts matched your criteria.’); ?> <?php endif; ?> Code explanation . The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add: .hentry .sticky .category-tutorials .tag-wordpress With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category. The other important piece of this code is id="post-<?php the_ID(); ?>" . By displaying the ID of the post here, we’re able to style a particular post. As an example: #post-876{ background:#ccc; } Source: Take advantage of the new post class 2. Display Related Posts… With Thumbnails! The problem . After they have read your latest post, what do your readers do? That’s easy: most of them simply leave. A great way to keep them interested is to display a list of related posts. Many plug-ins can do that, but for those who like to know how things works, here is some nice code to get related posts and their thumbnails. The solution . Simply paste this code after the the_content() function in your single.php file: <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); if ($tags) { echo ‘<h2>Related Posts</h2>’; $first_tag = $tags[0]->term_id; $args=array( ‘tag__in’ => array($first_tag), ‘post__not_in’ => array($post->ID), ’showposts’=>4, ‘caller_get_posts’=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { echo "<ul>"; while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><img src="<?php bloginfo(’template_directory’); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php endwhile; echo "</ul>"; } } $post = $original_post; wp_reset_query(); ?> Code explanation . First, this code makes use of TimbThumb , a PHP image-resizing script. We have used it to automatically resize images to 40 by 40 pixels. Once this code is pasted in your theme, it uses the first tag of the post to fetch related posts. In this example, four related posts are displayed. You can change this number on line 10. Also, notice that I have cloned the $post variable at the beginning of the script and restored it at the end. This prevents problems that may occur with the loop, such as comments being assigned to the wrong post. Source: How to: Show related posts without a plug-in 3. Alternate Post Styling On Your Home Page The problem . Many new WordPress themes have an amazing way of displaying posts on the home page. For example, we can display the first three posts bigger than the rest, with images and extended text, with the remaining posts shown more simply. I have seen many themes in which developers use two distinct loops to achieve this, which isn’t necessary and can cause further problems. Let’s use a much simpler method. The solution . Here is a custom loop that displays the first three posts different than the rest. You can replace the existing loop in your index.php file with this code. <?php $postnum = 0; while (have_posts()) : the_post(); ?> <?php if ($postnum <= 3){ ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div class="date"><span><?php the_time(’M j’) ?></span></div> <h2>(<?php echo $postnum;?>)<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div class="post-image" style="text-align:center;"> <a href="<?php the_permalink() ?>"><img src="<?php bloginfo(’template_directory’ ); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&amp;w=500&amp;h=200&amp;zc=1" alt="<?php the_title(); ?>" /></a> </div> <p><?php the_content(’Read the rest of this entry &raquo;’); ?></p> <p class="more"><a href="#">Read More</a></p> </div> </div> <?php } else { <div <?php post_class( ’single ‘ . $end ); ?> id="post-<?php the_ID(); ?>"> <div class="post-content"> <h3><a href="<?php the_permalink() ?>">(<?php echo $postnum; ?>)<?php the_title(); ?></a> <?php edit_post_link(’_', ”, ”); ?></h3> <p><?php the_excerpt( ” ); ?></p> <p class="more"><a href="#">Read More ?</a></p> </div> </div><!– End post –> <?php } endwhile; ?> Code explanation . Nothing hard here! We just created a PHP variable, named $postnum , which is invoked at the end of the loop. If $postnum is less than or equal to 3, the post is displayed in full