bavotasan.com » loop http://bavotasan.com by c.bavota Tue, 07 Feb 2012 15:42:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Simple Pagination for WordPress http://bavotasan.com/2011/simple-pagination-for-wordpress/ http://bavotasan.com/2011/simple-pagination-for-wordpress/#comments Thu, 16 Jun 2011 14:07:55 +0000 c.bavota http://bavotasan.com/?p=3512 Most sites use some sort of pagination to allow you to navigate through to their older posts. If you install WordPress and use TwentyTen, you will see the “Older Post” link at the bottom of the index page. That’s pretty standard for some WordPress themes. There are a few plugins that made it easy to add pagination but why rely on a whole plugin when WordPress has a built-in function that will allow to add pagination very easily? It’s called paginate_links().

To get it working, you need to first add this to your theme’s functions.php file before the closing PHP tag:

function paginate() {
	global $wp_query, $wp_rewrite;
	$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
 
	$pagination = array(
		'base' => @add_query_arg('page','%#%'),
		'format' => '',
		'total' => $wp_query->max_num_pages,
		'current' => $current,
		'show_all' => true,
		'type' => 'list',
		'next_text' => '»',
		'prev_text' => '«'
		);
 
	if( $wp_rewrite->using_permalinks() )
		$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
 
	if( !empty($wp_query->query_vars['s']) )
		$pagination['add_args'] = array( 's' => get_query_var( 's' ) );
 
	echo paginate_links( $pagination );
}

Then add this to your theme’s style.css file:

/* Pagination */	
 
ul.page-numbers {
	margin: 20px 0 10px;
	width: 100%;
	padding: 0;
	font-size: 12px;
	line-height: normal;
	clear: both;
	float: left;
	}
 
    ul.page-numbers li {
    	float: left;
    	}
 
ul.page-numbers a,
ul.page-numbers span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: -webkit-gradient(linear, left top, left bottom, from(#E4E3E3), to(#FFFFFF));
	background: -moz-linear-gradient(top,  #E4E3E3,  #FFFFFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E4E3E3', endColorstr='#FFFFFF');
	padding: 3px 4px 2px 4px; 
	margin: 2px;
	text-decoration: none;
	border: 1px solid #ccc;
	color: #666;
	}
 
ul.page-numbers a:hover,
ul.page-numbers span.current {	
	border: 1px solid #666;
	color: #444;
	}

You can mess around with the CSS to style it however you choose. The above code will just give you rounded buttons with a background gradient.

Now all you need to do is add the function to the bottom of the pages where you want your pagination to appear. If your theme uses loop.php then all you need to do is add it to the bottom of that one file. If not, you’ll have to add it to index.php, archive.php and any other files that require the pagination.

<?php paginate(); ?>

Read more about paginate_links() in the Codex: http://codex.wordpress.org/Function_Reference/paginate_links

]]> http://bavotasan.com/2011/simple-pagination-for-wordpress/feed/ 4 Shorten Your Post Titles in WordPress http://bavotasan.com/2010/shorten-your-post-titles-in-wordpress/ http://bavotasan.com/2010/shorten-your-post-titles-in-wordpress/#comments Fri, 16 Jul 2010 15:24:22 +0000 c.bavota http://bavotasan.com/?p=2542 This is not a function that you would need to use often, but I came across a reason to use it recently and I thought it might be a good idea to share it. All it does is limit the number of words in your title, just in case you don’t want it to wrap onto a second line. I used it in the featured slideshow on Magazine Premium since the size of the boxes is fixed.

Include this in your functions.php file between the PHP tags:

function short_title($after = '', $length) {
	$mytitle = explode(' ', get_the_title(), $length);
	if (count($mytitle)>=$length) {
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle). $after;
	} else {
		$mytitle = implode(" ",$mytitle);
	}
	return $mytitle;
}

Then you can use it within the WordPress loop like this:

<?php echo short_title('...', 8); ?>

If you would rather count by characters instead of just words, you can add this function to your functions.php file instead of the one above:

function short_title($after = null, $length) {
	$mytitle = get_the_title();
	$size = strlen($mytitle);
	if($size>$length) {
		$mytitle = substr($mytitle, 0, $length);
		$mytitle = explode(' ',$mytitle);
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle).$after;
	}
	return $mytitle;
}
]]> http://bavotasan.com/2010/shorten-your-post-titles-in-wordpress/feed/ 2 An Easy Way to Display an RSS Feed with PHP http://bavotasan.com/2010/display-rss-feed-with-php/ http://bavotasan.com/2010/display-rss-feed-with-php/#comments Thu, 15 Jul 2010 05:48:41 +0000 c.bavota http://bavotasan.com/?p=2530 RSS feeds are everywhere, and sometimes it’s a good idea to display one to keep people in the loop of important posts from your site, or sites you think might be relevant. Luckily, PHP 5 introduced the DOM extension which make it easy to work with XML documents. Now all it takes is just a small bit of code to fetch and display a feed.

The following code will first create a new DOMDocument() into which we will load the WordPress.org RSS feed.

$rss = new DOMDocument();
$rss->load('http://wordpress.org/news/feed/');

Then we will single out certain elements and place them into an array. For this example, I will just fetch the title, description, link and published on date.

$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
	$item = array ( 
		'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
		'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
		'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
		'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
		);
	array_push($feed, $item);
}

Finally, we set it to display 5 posts on screen with the titles linking directly to the original post.

$limit = 5;
for($x=0;$x<$limit;$x++) {
	$title = str_replace(' & ', ' &amp; ', $feed[$x]['title']);
	$link = $feed[$x]['link'];
	$description = $feed[$x]['desc'];
	$date = date('l F d, Y', strtotime($feed[$x]['date']));
	echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
	echo '<small><em>Posted on '.$date.'</em></small></p>';
	echo '<p>'.$description.'</p>';
}

Put it all together and this is what you get:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
	$rss = new DOMDocument();
	$rss->load('http://wordpress.org/news/feed/');
	$feed = array();
	foreach ($rss->getElementsByTagName('item') as $node) {
		$item = array ( 
			'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
			'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
			'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
			'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
			);
		array_push($feed, $item);
	}
	$limit = 5;
	for($x=0;$x<$limit;$x++) {
		$title = str_replace(' & ', ' &amp; ', $feed[$x]['title']);
		$link = $feed[$x]['link'];
		$description = $feed[$x]['desc'];
		$date = date('l F d, Y', strtotime($feed[$x]['date']));
		echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
		echo '<small><em>Posted on '.$date.'</em></small></p>';
		echo '<p>'.$description.'</p>';
	}
?>

Not too complicated. All you need to change is the feed you want to load (line #3) and the number of posts to display (line #14). Of course, you could always play around with the output to get it styled exactly how you want. That is totally up to you.

]]> http://bavotasan.com/2010/display-rss-feed-with-php/feed/ 16 Sliderota jQuery Plugin http://bavotasan.com/2010/sliderota-jquery-plugin/ http://bavotasan.com/2010/sliderota-jquery-plugin/#comments Wed, 21 Apr 2010 20:18:26 +0000 c.bavota http://bavotasan.com/?p=1973
The new design on Themes by bavotasan.com required a content slider so I built a simple jQuery plugin that would work the way I needed it to. There isn’t much to it but you can set the speed, slide timer, easing and if you want it to work solely as a content slider or as a slideshow. It even loops so you don’t have any of that ugly backwards sliding when it hits the end.

Here is the basic CSS you need:

#sliderota {
	width: 900px; /* change to the width you want */
	height: 380px; /* change to the height you want */
	overflow: hidden;
	position: relative;
	background: url(../images/bigad_bg.png) no-repeat;
	}
 
	#sliderota .slides {
		position: absolute;
		top: 0;
		left: 0;
		}
 
	#sliderota img {
		float: left;
		}
 
	#sliderota ul {
		position: absolute;
		bottom: 10px;
		left: 10px;
		z-index: 100;
		list-style: none;
		padding: 0;
		margin: 0;
		}
 
	#sliderota ul li  {
		float: left;
		}	
 
		#sliderota ul li a {
			background: url(../images/controls.png) no-repeat 0 0;
			width: 16px;
			height: 16px;
			display: block;
			}
 
		#sliderota ul li.selected a {
			background-position: -18px 0;
			}
 
	#sliderota .controls a {
		z-index: 100;
		position: absolute;
		right: 10px;
		bottom: 10px;
		background: url(../images/controls.png) no-repeat -54px 0;
		width: 16px;
		height: 16px;
		}
 
		#sliderota .controls a.play {
			display: none;
			background-position: -36px 0;
			}

Here is the basic HTML:

<div id="sliderota">
	<div class="slides">
    	<a href="http://themes.bavotasan.com/our-themes/premium-themes/moderno"><img src="images/moderno_bigad.png" width="900" height="380" alt="Moderno" /></a>
		<a href="http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium"><img src="images/magprem_bigad.png" width="900" height="380" alt="Magazine Premium" /></a>
		<a href="http://themes.bavotasan.com/our-themes/premium-themes/stationery"><img src="images/stationery_bigad.png" width="900" height="380" alt="Stationery" /></a>
		<a href="http://themes.bavotasan.com/our-themes/premium-themes/illustrious"><img src="images/illustrious_bigad.png" width="900" height="380" alt="Illustrious" /></a>
    </div>
</div>

Of course, you need to call jQuery and the plugin function:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderota.js"></script>
<script type="text/javascript">
	$("#sliderota").sliderota();
</script>

If you are only using jQuery 1.3.2, then you will also have to include the Easing plugin to use the advanced easing options that are included in the Core UI v1.8.0.

And now for the plugin:

/**
 * jQuery.sliderota
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 04/22/2010
**/
(function($) {
	$.fn.sliderota = function(options) {
		// setting the defaults
		// $("#sliderota").sliderota({speed: 3000, timer: 6000, slideshow: true, easing: "easeInOutQuint"});
		var defaults = {
			speed: 3000,
			timer: 6000,
			slideshow: true,
			easing: 'easeInOutQuint'
		};	
		var options = $.extend(defaults, options);
 
		// and the plugin begins
		return this.each(function() {
			// initializing the variables
			var loop, counter, obj, totalWidth, itemWidth, curLeft, itemNum, limit;
 
			// creating the object variable
			obj = $(this);
 
			counter = 0;
			itemWidth = obj.find(".slides").width();
			itemNum = obj.find(".slides a").length;
			totalWidth = (itemNum + 1) * itemWidth;
			limit = -(itemNum * itemWidth);
 
			obj
				.find(".slides").css({
					width: totalWidth+"px"
				})
				.end()
				.append("<ul></ul>")
				.find(".slides a").each(function() {
					$("<li><a href='javascript:void(0)' class='slide_"+counter+"'></a></li>").appendTo(obj.find("ul"));
					counter++;
				})
				.end()
				.find("ul li:eq(0)").addClass("selected")
				.end()
				.find(".slides a:eq(0)").clone().appendTo(" .slides", obj)
				.end()
				// creating the click event
				.find("ul li a").live('click', function() {
					obj.find("ul li").each(function() {
						$(this).removeClass("selected");
					});
					curLeft = $(this).attr('class').replace("slide_","");
					curLeft = -(curLeft * itemWidth);
 
					$(this).parent().addClass("selected");		
					obj // selecting the object
						.find(".slides").stop().animate({ left: curLeft+"px" }, options.speed, options.easing)
						.end()
						.find(".controls a.play").show()
						.end()
						.find(".controls a.pause").hide();
					clearTimeout(loop);
				});
 
			// slideshow functionality
			if(options.slideshow) {
				// adding the play/pause controls
				obj // selecting the object
					.append("<div class='controls'></div>")
					.find(".controls")
						.append("<a href='javascript:void(0)' class='play'></a>")
						.append("<a href='javascript:void(0)' class='pause'></a>")					
					.end()
					// creating the play click event
					.find(".controls .play").click(function() {
						loop = setTimeout(function() { moveSlides(); }, options.timer);
						$(this).hide();
						obj.find(".controls .pause").show();
					})
					.end()
					// creating the pause click event
					.find(".controls .pause").click(function() {
						clearTimeout(loop);
						obj.find(".controls .play").show();
						$(this).hide();
					});	
 
				// creating the loop for the slideshow
				loop = setTimeout(function() { moveSlides(); }, options.timer);
 
				// creating the function to move the slides
				function moveSlides() {
					obj.find("ul li").each(function() {
						$(this).removeClass("selected");
					})
					curLeft = obj.find(".slides").css('left').replace("px", "");
					curItem = (Math.abs(curLeft) / itemWidth)+1;
					if(curLeft==limit+itemWidth) {
						obj.find('ul li:eq(0)').addClass("selected");
					} else {
						obj.find('ul li a.slide_'+curItem).parent().addClass("selected");
					}
					curLeft = curLeft - itemWidth;
					obj.find(".slides").stop().animate({ left: curLeft+"px" }, options.speed, options.easing, function() {
						if(curLeft==limit) { obj.find(".slides").css({ left: "0px" }); }
					});
					loop = setTimeout(function() { moveSlides(); }, options.timer);
				};
			};
		});
	};
})(jQuery);

The options are pretty simple:

$("#sliderota").sliderota({
  speed: 3000, 
  timer: 6000, 
  slideshow: true, 
  easing: "easeInOutQuint"
});
]]> http://bavotasan.com/2010/sliderota-jquery-plugin/feed/ 5 Retrieve and Display Images from a WordPress Post http://bavotasan.com/2009/retrieve-the-first-image-from-a-wordpress-post/ http://bavotasan.com/2009/retrieve-the-first-image-from-a-wordpress-post/#comments Tue, 10 Mar 2009 18:30:34 +0000 c.bavota http://bavotasan.com/?p=46 I have already mentioned a few ways to do this but I have discovered a few problems with my old code. I have improved this one quite a bit so I felt that I should just delete my old suggestions and offer you the best technique I have discovered.

The whole point of this piece of code is to make it easier for people to retrieve images from their posts. If you want to pull only the excerpt but also want to display an image along side it, this code is all you need. Forget using custom fields or plugins, just add this code to your theme’s functions.php and then call the function within the loop to pull the image you want.

It functions by going through your post’s content and placing every image it encounters into an array. You can then use the function to call any image our of that array and display it.

If you already have a functions.php file in your theme’s folder, just place the following code between the opening <?php and closing ?> tags. If not, create one and make sure to add an opening <?php and closing ?> tag.

function getImage($num) {
global $more;
$more = 1;
$link = get_permalink();
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$postOutput = preg_replace('/width="([0-9]*)" height="([0-9]*)"/', '',$postOutput);;
$image[$i] = $postOutput;
$start=$imgEnd+1;
}
if(stristr($image[$num],'<img')) { echo '<a href="'.$link.'">'.$image[$num]."</a>"; }
$more = 0;
}

Now whenever you want to display an image from a post, just use <?php getImage('1'); ?>. The number ’1′ can be changed to any number. If you want to pull the second image from your post, change it to ’2′ and so on. Be sure to place this within the loop so that is works properly.

NOTE: I just created a plugin for this called Simple Image Grabber.

]]> http://bavotasan.com/2009/retrieve-the-first-image-from-a-wordpress-post/feed/ 104 Using WP_Query to Fetch Posts in WordPress http://bavotasan.com/2009/using-wp_query-to-fetch-posts-in-wordpress/ http://bavotasan.com/2009/using-wp_query-to-fetch-posts-in-wordpress/#comments Wed, 28 Jan 2009 18:00:02 +0000 c.bavota http://bavotasan.com/?p=177 I was just putting together a WordPress widget for a client and I came across a small road block. I was using <?php query_post(); ?> to set the loop to act the way I needed it to but when the widget loaded up in the left sidebar, it caused some issues when going to a category page. The problem was the query I initialized in the sidebar was carrying over to the main section. I couldn’t figure out what to do until I stumbled up the wp_query function.

It works in a similar way to query_post but you need to do a few minor things to get it to work properly.

<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=5&cat=3');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<div class="meta">
By <?php the_author() ?>
</div>
<div class="storycontent">
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>

First you need to setup the query.

$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=5&cat=3');

Then you need to setup the loop.

while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
     (stuff goes here)
<?php endwhile; ?>

So in the end it looks something like this.

<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=5&cat=3');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<div class="meta">
By <?php the_author() ?>
</div>
<div class="storycontent">
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>

What this will do is get 5 posts from category 3 and list them, without interfering with other loops or queries on your site.

]]> http://bavotasan.com/2009/using-wp_query-to-fetch-posts-in-wordpress/feed/ 22