Bezago | Web design, tutorials, resources and inspiration.

Archive for the ‘WordPress’ Category

Ajax Pagination (Twitter old Style) – WordPress plugin

Posted by: Nuwan Sameera Hettiarachchi on: January 23rd, 2012

The pagination of a web site gives to view more old posts of the blog or specific content of the website. There are lot of WordPress plugins to enable the pagination in different styles, eg: WP-Paginate. When I was developing new website using WordPress, I wanted to have the pagination just looks like Twitter old styles. The Twitter pagination styles is quite more fast and it gives good end user experience.

The Ajax Pagination plugin is to convert WordPress default pagination behavior into the Twitter style (old) using Ajax functionality. You can use this plugin to where the pagination is available in your template. You can check demo on Vesess blog also using this plugin.

Features

Load posts in Ajax functionality
Twitter pagination style
The default pagination where the functionality is available in your template can be replaced
Custom post type post pagination support
Javascript “callback” function after one page is loaded

Download and Installation

Download the plugin and install using correct with guidance.

How to use this plugin in your template
After you install the plugin, insert following code into your index.php file.

<?php 
     if(function_exists('genarate_ajax_pagination')) 
         genarate_ajax_pagination('Read More', 'blue');  
?>

The “genarate_ajax_pagination($btn_name, $color_name, $loop, $query)” function has four parameters may help to you get more functionality from the pagination button.

$btn_name is string (optional). The button name default value is “Read More”

$color_name is string (optional). The button background color names. by default “blck” is applied and you can use following colors, or your custom colors.

blue
red
magenta
orange
yellow

Note: this plugin is used CSS3 functionality buttons. The original credits to Super Awesome Buttons with CSS3 and RGBA

$loop – string (optional). The default is ‘content’

Note:
The ‘twentyeleven’ theme support ‘content’
The ‘twentyten’ theme support ‘loop’

The loop file is where the posts/content will be loaded. The default value is (if you don’t set $loop variable) ‘loop’. This usage is that, the plugin load your post content template, eg: get_template_part($loop). Advantage of this parameter is that you can use the pagination in several places in your WordPress theme to load the posts/content from.

$query – array (optional), the default is array()

If you are using custom query to display posts, pagination plugin also need the custom query array to run loop. The advantage of this parameter, you can use any Custom Post Type Template. eg: array(‘post_type’ => ‘custom’)

How to handle the callback function

This plugin is used jQuery javacript framework to handle the AJAX functionality on client side. So this plugin is triggered a customer event name called ‘complete-paginate’ once complete the next page append to the page.

The important of the custom event in client side is that you may have twitter or Facebook button or a specific bound event in the loaded posts content. This custom event may help you to re-assign events any effect.

The custom event can be bound into the button (id=”ajax_pagination_btn”). eg:

$('#ajax_pagination_btn').bind('complete-paginate', function(event) {
  console.log('update other Js functionality');
});

How to create custom tag cloud in WordPress

Posted by: Nuwan Sameera Hettiarachchi on: July 23rd, 2010

In: Tips and IT,WordPress Comments (2)

Previous article was about some new features in wordpress 3.0. But today I like to write small Hack in WordPress template. You know, there is a grate feature Tag cloud which is displays a list of tags has been assigned to posts. WordPress Tags can be generated by wp_tag_cloud() API function by passing relevant arguments. Using this method you can show list of tags somewhere in you template (ex: sidebar).

Since Version 2.8, the taxonomy parameter was added so that any taxonomy could be used to generate the tag clouds. As well as WordPress contain existing widget so that easily add tag cloud to the sidebar or somewhere in template.

The clouds are available for Categories or any other Custom Taxonomies to present in you web site. But you can control only available parameters for appearance tag cloud.

But if you want to present the post count for a specific tag, we cannot generate using wp_tag_cloud() function. So we can use simply following Hack to generate any type of output in your tag cloud.

   $args = array('taxonomy'  => 'post_tags' );
   $tags = get_terms( $args['taxonomy'], array_merge( $args, array( 'orderby' => 'count', 'order' => 'DESC' ) ) ); // Always query top tags
 
   if (!empty( $tags )) {
	foreach ($tags as $tag){
          $link = get_term_link( intval($tag->term_id), $args['taxonomy'] );						
           $list .= '<li><strong class="tag_link"><a href="'.$link.'">'.$tag->name.'</a> ('.$tag->count.')</strong></li>';
	}
   }
echo $list;

The get_terms() function will fetch the all tags data as an array for specific taxonomy. Above example I used default post_tags as taxonomy. But get_terms() function doesn’t contain the tags link, so I used get_term_link() inside of the Foreach loop. Well, finally print the output as follows,

Creating WordPress 3.0 themes including new features

Posted by: Nuwan Sameera Hettiarachchi on: July 15th, 2010

In: Web,WordPress Comments (3)

WordPress 3.0 was released couple of weeks ago. It is included lot of new features and functionality updates. With new features the WordPress seems to be a grate CMS among others CMSs. Actually WordPress templating is so easy when compare other major CMSs.

Before released WordPress 3.0, it had only one Post type to add article. But 3.0 has grate feature Custom Post Type . This feature will easy to hold and display many different types of content.

As well as another main issue also was solved with this introducing by Custom Post Types. The problem was URL suture of web site. Most of time post URL was Base_URL/blog/%date%/%post_name%/. But my opinion is URL should be best way to have as following
Base_URL/blog/%post_name%/ . Your know this format can be enabled old system. But we couldn’t set different kind of URL formats to the post. But this feature is come with Custom Post Type. We can have different kind of post urls. For examples you have a Magazine and Project in your organization. Now you can separately maintain two Post Type and you can assign the URL format for each post type.

I developed a new web site using WordPress 3.0 with new features. I created new two Custom Post Type for pages name called Magazine and Project.

You can create Custom Post type as Follows, Note: Let’s create Custom Post Type name as “Project”

<?php
	register_post_type( 'projects',
                array('label' => __('Projects'),
			'public' => true,
			'show_ui' => true,
			'supports' => array('title','editor','author','thumbnail','excerpt','comments', 'custom-fields'),
			'menu_position' => 5
			)
              );
?>

And you can taxonomy for each Custom Post Types.

function create_my_taxonomies(){
    register_taxonomy( 
                          'projects-category', 
                          'projects', 
                          array( 'hierarchical' => true, 
                                   'label' => 'Categories', 
                                   'query_var' => true, 
                                   'rewrite' => array( 'slug' => 'projects/category' ) 
                       ));
 
   register_taxonomy( 
                         'projects-tags', 
                         'projects', 
                         array( 'hierarchical' => false, 
                                  'label' => 'Post Tag', 
                                  'query_var' => true, 
                                  'rewrite' => array( 'slug' => 'projects/tags' ) 
                        ));
}
//create taxomony
add_action( 'init', 'create_my_taxonomies',0 );

Above code will create a Custom Post Type and you can see it at backend in WordPress. Now you can create post under the “Project” post type as default “post” main type used by the blog in WordPress.

I will provide more details about complete WordPress 3.0 template creating on next posts.

I addition to WordPress having grate ability to change admin interface, just like organize Main menu order and remove some component without directly editing the core of WordPress.

Here is one of tip I just used today. Let’s think you don’t need WordPress default the Blog post type in your developed theme. As I shown above the codes, you have create your own Custom Post Types and you have a fully control of the web site with them. But you may not need default Post type anymore. So you can remove it form back-end main menu.

Just add hooks to the functions.php

function remove_menu() {
	global $menu;	
	$menu[0] = array( __('Posts'), 'edit_posts', 'edit.php', '', 'open-if-no-js menu-top', 'menu-posts', 'div' );
	//remove post top level menu
	unset($menu[0]);
}
 
add_action('admin_head', 'remove_menu');

I think this will help to understand backend configuration using simple and smart hooks of WordPress

Bezago.com

Archive for the ‘WordPress’ Category

About me

Recent Posts

Categories