Categories

Truncate WordPress post content

$post_content = $post->post_content; // get the content
$post_content = strip_tags($post_content); // remove HTML tags
$post_content = preg_replace('/\[(.*)\]/', '', $post_content);  // remove shortcodes
$post_content = substr($post_content, 0, 30);
echo $post_content;

Supporting multiple databases in wordpress

I recently had the need of making changes to my website but I didn’t want to have those changes live until I have tested in my local environment.

Downloading the remote files and running a local server is pretty trivial. Making a backup of the remote database can be accomplished using phpMyAdmin or you can use any WordPress backup plugin (I personally like WP-DB-Backup)

The part that is annoying (at least in my case), is that I used CPanel+Fantastico to automatically create an instance of WordPress in my server. The issue is that the database credentials (name, username, password) are generated with some weird values. In my local copy I have to modify the wp-config.php file to add the credentials to connect to my local database. The problem with this is that I always have to remember not to upload the wp-config.php to the live server to prevent taking my own site down.

I figured that I should probably modify the wp-config.php in a way that will work in my local environment as well as the remote server. Here is a quick way to support multiple databases in WordPress by modifying the wp-config.php:

if(preg_match('/localhost:8888/', $_SERVER["HTTP_HOST"])){ 
	// local environment
	define('DB_NAME', 'local_db');
	define('DB_USER', 'root');
	define('DB_PASSWORD', 'root');
	define('DB_HOST', 'localhost:8889');
}else{
	// remote environment
	define('DB_NAME', 'remote_db');
	define('DB_USER', 'remote_user_name');
	define('DB_PASSWORD', 'remote_user_password');
	define('DB_HOST', 'localhost');
}

Associating images to a post or a page

In the version 2.9 WordPress introduced the capability of associating images to a post or a page. When you create your theme you can turn on this feature by simply adding a call to add_theme_support('post-thumbnails') in your functions.php (this file should be located inside you theme folder).

if ( function_exists( 'add_theme_support') ) {
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'image-normal', 96, 9999, false );
	add_image_size( 'image-small', 32, 9999, false );
}

Believe it or not you are ready to go. Once you add this feature, the next time that you are creating or editing a post in the WordPress admin area, you will be presented with the option to add a Feature Image to your post. This will allow you to upload and associate an image to your post.

To show the image in your page you can simply call the_post_thumbnail($feature). Here is an example:

<?php 
	$posts = get_posts();
	foreach ($posts as $post){
		setup_postdata($post); 
		if(is_search()){
			?>
			<p id="<?=the_ID();?>"><?=the_title();?></p>
			<?php the_post_thumbnail('image-small');
		}else{
			?>
			<h1 id="<?=the_ID();?>"><?=the_title();?></h1>
			<?php the_post_thumbnail('image-normal');
		}
	}
?>

References

Add Theme Support
Add Image Size
The Post Thumbnail

Related articles

Retrieving The Thumbnail Image

jQuery wrapper for iScroll

Matteo Spinelli did a terrific job writing a Javascript library that allows scrolling the content of a DIV element on iPhone and Android web browsers. The library is well documented in his site http://cubiq.org/iscroll. I don’t think that it is a must-have but I find very comfortable to implement functionality in a consistent way. Since I am a big jQuery fan I decided to wrap Matteo’s library in a very simple jQuery plugin.

?View Code JAVASCRIPT
(function($){
    $.fn.iscroll = function(options){
		if(this.data('iScrollReady') == null){
			var that = this;
            var options =  $.extend({}, options);
				options.onScrollEnd = function(){
					that.triggerHandler('onScrollEnd', [this]);
				};
			arguments.callee.object  = new iScroll(this.get(0), options);
			// NOTE: for some reason in a complex page the plugin does not register
			// the size of the element. This will fix that in the meantime.
			setTimeout(function(scroller){
				scroller.refresh();
			}, 1000, arguments.callee.object);
			this.data('iScrollReady', true);
		}else{
			arguments.callee.object.refresh();
		}
		return arguments.callee.object;
	};
})(jQuery);

Basically you can use jQuery to select the content that you want to scroll and call ‘.iscroll()’ to add the behavior. If you need to overwrite the default parameters you pass an object with values that you wish to change. Here is an example of how to implement this:

?View Code JAVASCRIPT
$(function(){
	var elem = $('#content');
		elem.iscroll();
		elem.bind('onScrollEnd', function(e, iscroll){
			alert($(this).attr('id') +' - '+ iscroll);
		});
});

Downloads

When you call .iscroll() the library will find the parent element and make the content scrollable. This method will also return an instance of the iScroll class. If the method is called again it will refresh the content. This is convenient in case you modify the content dynamically (iScroll allows to detech DOM changes automatically).

The library dispatches an event name onScrollEnd when the scroll action is completed. In touch screen devices this library adds momentum. This means that the content will continue moving for a short time after the touchend event. By default the version 3.7 accepts a callback function that is trigger at the end of the animation. The wrapper overwrites the parameter and triggers a jQuery event instead. This approach will allow multiple callback functions.