Basic Nivo Slider WordPress Custom Post Type Integration
Posted by Alvaron in Custom Post Types, Hacks, Ins and Outs, Workarounds on February 14, 2012
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.
Building a Custom WordPress Links Page Loop
Posted by Alvaron in Ins and Outs, Workarounds on January 27, 2012
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.
How to Hide Fields from Edit Page for a Specific WordPress Custom Post Type
Posted by Alvaron in Custom Post Types, Ins and Outs on January 25, 2012
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.
How to Use WordPress Shortcodes Directly on Your Theme’s PHP Files
Posted by Alvaron in Ins and Outs on January 24, 2012
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.
Learn How to Add a Stop SOPA Ribbon to your WordPress Website
It’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!
Follow WP Working
Recent Comments