Basic Nivo Slider WordPress Custom Post Type Integration

Nivo Slider is a cool Jquery plugin you can use on your site to display ads or posts images.

I’ll show how to make it work using images uploaded by the customer through WordPress wp-admin.

First of all, let’s create a custom post type called “banners”. Just put this code on your functions.php file.
For further info, please check this post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?
function banners_init() {
	$labels = array(
		'name' => _x( 'Banners', 'custom post type generic name' ), // Tip: _x('') is used for localization
		'singular_name' => _x( 'Banners', 'individual custom post type name' ),
		'add_new' => _x( 'Add New', 'add' ),
		'add_new_item' => __( 'Add New Banner' ),
		'edit_item' => __( 'Edit Banner' ),
		'new_item' => __( 'New Banner' ),
		'view_item' => __( 'View Banner' ),
		'search_items' => __( 'Search Banner' ),
		'not_found' =>  __( 'No Banner Found' ),
		'not_found_in_trash' => __( 'No Banner Found in trash' ),
		'parent_item_colon' => ''
	);
 
	// Create an array for the $args
	$args = array( 'labels' => $labels, //NOTICE: the $labels variable is used here... 
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'query_var' => true,
		'rewrite' => true,
		'capability_type' => 'post',
		'hierarchical' => false,
		'menu_position' => 6,		
		'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
	); 
	register_post_type( 'banners', $args );
}
?>

Now you may download the file attached to this post, “nivo_files.zip”.
After saving the files on your theme, you need to call the js and css files, on your “header.php” or even on your specific php file where you want to put nivo slider to work, e.g. “index.php”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Calling Jquery -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.6.1.min.js"></script>
<!-- Calling Nivo Slider -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js"></script>
<!-- Setting Nivo CSS -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivo-slider.css" type="text/css" media="screen" />
<!-- Setting Nivo Basic Options -->
<script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('#slider').nivoSlider(
			{
				animSpeed: 500, // Slide transition speed
				pauseTime: 3000, // How long each slide will show
				captionOpacity: 0
			}
		);
    });
</script>

After that, let’s build the loop, where the WordPress posts will work with nivo.
All the user must do is add one post for each banner, uploading one image, with no text, using the wp-admin menu “Banners”.
The banner link will be the same of the post attached image.
Put this on your theme’s php file where you want to display nivo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="slider" class="nivoSlider">
<?
   $querycp = array( 'post_type'=>'banners','posts_per_page' => -1 );
   query_posts($querycp);
 
   while (have_posts()) : the_post();
		$args = array(
		'post_type' => 'attachment',
		'numberposts' => -1,
		'post_status' => null,
		'post_parent' => $post->ID
		);
		$attachments = get_posts($args);
 
		if ($attachments):
 
			$content = get_the_content();
			$content = apply_filters('the_content', $content);
			$content = str_replace('<img ','<img id="slide-img-'.$imgcnt.'" ',$content);
			$content = str_replace('alt=""','alt="'.get_the_title().'" ',$content);
			$content = str_replace('title="img'.$imgcnt.'"','title="'.get_the_title().'" ',$content);
			$content = str_replace('<p>','',$content);
			$content = str_replace('</p>','',$content);								
			echo $content;						
		endif;
   endwhile;
   wp_reset_query();
?>
</div>

Important note: it’s highly recommended downloading Nivo Slider original js and css files, the attachment codes where changed, since this workaround was build to a specific customer that wanted to add banners this way, uploading one image per post, with no text on the content.

Hope it will be useful to you.

Share on TwitterSave on DeliciousShare via email

No Comments

Building a Custom WordPress Links Page Loop

Today I’ll show a workaround for building a custom WordPress links page loop.

The WordPress wp_list_bookmarks() is the usual way to retrieve the links registered on wp-admin/links menu, but sometimes you may need to get links on a very specific layout.

So, using the WordPress native class wpdb, you can get links and display it exactly the way you want on any theme php file.

All you have to do is copy and paste the code bellow wherever you want the links to show, changing it if wanted.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?
        global $wpdb;
	//
	$sqllnk  = "select link_url, link_description from wp_links";
 
	$reslnks = $wpdb->get_results($sqllnk);
	foreach ( $reslnks as $linlnk )
	{
?>
           <p><a href="<?=$linlnk->link_url?>" target="_blank"><?=$linlnk->link_url?></a></p>
	   <p><?=$linlnk->link_description?></p>
 <?
	}
 ?>

A useful info. These are the fields available on wp_links table:
link_id, link_url, link_name, link_image,link_target,link_description,link_visible,link_owner,link_rating,link_updated,link_rel,link_notes,link_rss

So you can display all them using the code above, e.g. changing $linlnk->link_url for $linlnk->link_image.

Hope it will be useful for you.

Share on TwitterSave on DeliciousShare via email

No Comments

How to Hide Fields from Edit Page for a Specific WordPress Custom Post Type

When you are working with WordPress Custom Post Types, sometimes it may become necessary to hide certain fields from the edit post page.

First of all, you should take a look on my post “Registering and Displaying WordPress Custom Post Types In a Very Easy Way”.

So, if you’ve opened the post on a new tab, take a look on the line bellow, because it’s all you have to change when registering a custom post type to hide fields from edit page.

1
2
3
<?
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' );
?>

This line sets the fields supported by the custom post type.

Suppose you need to hide title and excerpt fields.

The line would be:

1
2
3
<?
'supports' => array( 'editor', 'author', 'thumbnail', 'comments' );
?>

Hope you find it useful.

Share on TwitterSave on DeliciousShare via email

No Comments

How to Use WordPress Shortcodes Directly on Your Theme’s PHP Files

Just a quick tip.

Sometimes you may need to use WordPress shortcode directly on your theme’s PHP files, depending on where you want to display a form or a plugin return.

Using do_shortcode, it can be easily done.

Take a look on the example bellow, where I’m calling a short code inside a page loop.

1
2
3
4
5
<?
while (have_posts()) : the_post();
  echo do_shortcode('[contact-form 1 "The Contact Form"]');
endwhile;
?>

For further information, go to the Codex.

Share on TwitterSave on DeliciousShare via email

2 Comments

Learn How to Add a Stop SOPA Ribbon to your WordPress Website

Stop SOPA Ribbon WordPress PluginIt’s not just about US, since we know an increase of censorship on US can influence other governments.

Add a Stop SOPA Ribbon to your WordPress Website.

The Stop SOPA Ribbon WordPress plugin will help you to do it easily.

Be a part of this great online protest!

 

 

Share on TwitterSave on DeliciousShare via email

No Comments

Stop SOPA