AllSlider is a WordPress plugin to create touch responsive sliders and carousels using your posts, images, videos, HTML, shortcodes and WooCommerce products as slides.

Creating Sliders in WP Admin

The slider is a WordPress Custom Post Type, so you can add them, edit them or delete them at any time. The interface itself allows you to add the slides and arrange them dragging and dropping them.

You can choose to create slides to show images by uploading an image, posts by selecting one of your published posts, videos by pasting the embed code provided by the service like YouTube or Vimeo, HTML by entering your markup directly and even adding WordPress shortcodes for extra functionality. Finally, if you have WooCommerce installed, you’ll have the chance to show your products in the slider.

Each custom post type created is the entire slider itself, with controls to change its behaviour, from transition effect to number of visible items, autoplay and many more. By increasing the number of visible items you can change the appearance from a slider (one element shown at a time) to a carousel (many elements shown at a time).

Settings Page

AllSlider includes a settings page where you can adjust the appearance of it to match your site. If you need to fine tune some details, a textarea to enter your custom CSS is also provided.

The plugin leverages the new Iris color picker introduced in latest WordPress 3.5 created by Automattic and that was extensively refined for user experience.

Sliders in the site

After you’ve created the slider and are satisfied with your options, you can then add it into your pages or posts using the shortcode provided. You can also use the widget provided and add it to your sidebars.

The sliders and carousels created are responsive, which means they’ll adjust to any screen size, and they also support touch swipe, making them suitable for mobile device browsers.

You can purchase the Allslider plugin on CodeCanyon.

WordPress allows you to embed tweets by pasting the tweet URL into your posts. You get a nice card with the tweet and all relevant details. Sadly, this card will not work on responsive sites due to a fix width applied by Twitter. In this post we’ll see how to remove it and also make our embedded tweet properly responsive.

Overview

Before the tweet is processed to show the card with the author, Twitter avatar, follow button and other meta data, it’s displayed as a plain blockquote HTML element with the fixed width attribute set, which by default, is 500px. Of course, this fixed width will break our responsive layout, so basically we need to remove this attribute so the processed tweet card appears with no fixed width.

After removing it, we will apply a simple CSS style so it works responsively with the rest of the site dimensions.

WordPress oEmbed and filters

Our tweet is placed using oEmbed, a technology used by WordPress that allows us to insert content from other sites just by placing the link in our post editor. WordPress will automatically query the provider site (which can not only be Twitter, but YouTube, Vimeo and others) and get the HTML to insert in our site.
The HTML returned by the provider site can be processed using one of the filters WordPress provides to do so and change the markup. We’re going to use the filter oembed_result, which is run after obtaining the HTML from the oEmbed provider and before it’s saved to the cache. The advantage of this is that the filter won’t have to be executed each time the site is visited, resulting in a faster response and of course, faster loading times.

Filtering the tweet

This code should be placed in the functions.php file of your theme

/**
 * Remove fixed width from embedded tweets. First step to make them responsive.
 * @param string $html HTML that should be used to embed
 * @param string $url The URL to the content that should be attempted to be embedded.
 * @param array $args Optional arguments.
 * @author Elio Rivero
 * @link http://www.ilovecolors.com.ar/
 */
function ilc_oembed_result($html, $url, $args){
    // Check if it's a tweet looking for 'twitter' in the url pasted in the post
    if( stripos($url, 'twitter') ) {
        // Before the tweet is processed, it's displayed as a blockquote
        // with its width attribute set, so let's remove it.
        return preg_replace('#width="(.*)"#', '', $html);
    }
    // Otherwise return the HTML as is.
    return $html;
}
// Filter the result of the oEmbed extraction.
add_filter('oembed_result', 'ilc_oembed_result', 10, 3);

The $url parameter is the link to the tweet we’re embedding. We’re checking if it’s from Twitter, since otherwise we don’t want to run this. We’re using str_replace to look for the string width=”500″ replacing it with a empty string.

Making the tweet card responsive

We still need to add some CSS to make it responsive, so insert the following in your theme (or plugin) stylesheet

#main .twitter-tweet-rendered, #main .twt-border {
	max-width: 100% !important;
}

and just with this your embedded tweets will be responsive.

• Best web design resources of August 2011
• Slides from WordCamp San Francisco 2011
• Web Design Resources for October 2011
• Skeleton: responsive WordPress theme
• Best web design resources of July 2011

A relatively little known WordPress feature is the ability to split your post into different pages. However, it’s a bit difficult to stylize so it matches your overall site style since by default, WordPress  doesn’t apply CSS classes to target its elements. In this tutorial we will learn how to filter the function to add classes to stylize.

Overview

Posts can be paginated by typing the <!–nextpage–> Quicktag while writing the post content, to indicate that the content following the tag must be placed in a new page. The links are then generated using the function wp_link_pages, that creates the post content pagination.

While you must considerate the SEO implications of paginating content, and that’s an entire topicon its own, you probably have a good reason to do so, such as an incredibly long article, probably with a lot of images and embedded videos that would take too much to load and would consume many resources on your server.

Initialization

We can call the wp_link_pages function in our WordPress theme including our CSS classes ready to be styled like this:

<?php wp_link_pages(

    'before' => '<div class="nextpages">' . __('Next Pages:', 'ilc'),
    'after' => '</div>',
    'pagelink' => '<span class="pagelink">%</span>'

); ?>

Filtering

But what happens if we’re using a child theme? if it’s properly built using get_template_part we could copy the file to our child theme and reinitialize the function with the proper values.

A good alternative would be to use the filter wp_link_pages_args to override the initialization of the wp_link_pages function. We can add the following code in the functions.php file of our child theme

<?php function ilc_link_pages($r) {

  $args = array(
     'before' => '<div class="nextpages">' . __('Next Pages:', 'ilc'),
     'after' => '</div>',
     'pagelink' => '<span class="pagelink">%</span>'
  );
  return wp_parse_args($args, $r);

}
add_filter('wp_link_pages_args','ilc_link_pages');
?>

This is also a good alternative if the function is initialized inside a framework and we want to override the values for our own purpose.

• WordPress drop down menus: highlight parent items with jQuery
• Display sidebar widgets using a shortcode in WordPress
• Slides from WordCamp San Francisco 2011
• Avoid hierarchical taxonomies to loose hierarchy
• How to detect active widgets in each sidebar

Overview

We basically don’t need any special CSS or JS, since we will write a simple HTML that will inherit the overall styles of your theme. We will create a plugin that will add a shortcode [login] that you’ll type in your posts, pages or the built-in Text widget.

Writing the plugin

So without further ado, here’s the code. You can paste this code snippet in your functions.php file in your WordPress theme.

<?php
/**
 * Plugin Name: ILC Login
 * Plugin URI: http://ilovecolors.com.ar/
 * Description: Creates a shortcode to display a login box.
 * Author: Elio Rivero
 * Author URI: http://ilovecolors.com.ar
 * Version: 1.0.0
 */

class ILC_Login{

	function __construct(){
		add_filter( 'widget_text', 'shortcode_unautop');
		add_filter( 'widget_text', 'do_shortcode');
		add_shortcode('login', array(&$this, 'shortcode'));
	}

	function shortcode() {
		global $user_login;
		$html = '<div class="login_box">';
		if ( !is_user_logged_in() ){
			$html .= '<form action="' . wp_login_url() . '" method="post">';
			$html .= '<input type="text" name="log" id="log" value="" size="20" />';

			$html .= '<input type="password" name="pwd" id="pwd" size="20" />';
			$html .= '<input type="submit" name="submit" value="' . __('Log In', 'ilc') . '" class="button" />';
			$html .= '<p>';
			$html .= '<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> ' . __('Remember me', 'ilc') . '</label>';
			$html .= '<input type="hidden" name="redirect_to" value="' . admin_url() . '" />';
			$html .= '</p>';
			$html .= '</form>';
			$html .= '<a href="' . site_url('/wp-login.php?action=lostpassword') . '">' . __('Recover password &raquo;', 'ilc') . '</a>';
		} else {
			$html .= '<p class="isloggedin">' . __('You are already logged in.', 'ilc') . ' ';
			$html .= '<a href="' . wp_logout_url($_SERVER['REQUEST_URI']) . '">' . __('Log Out?', 'ilc') . '</a>';
			$html .= '</p>';
		}
		$html .= '</div><!-- .login_box end -->';
		return $html;
	}
}

new ILC_Login();

?>

After pasting the code, remember to save your file.

Usage

Now create a post or a page and in the editor, type

[login]

Save your content and view it on the front end. Since you might be logged in, it will show a message “You are already logged in. Logout?” so you can log out of the system. After you’ve done so, the page will reload and you’ll see the login fields.

You can also use this shortcode in the Text widget bundled with WordPress, since we added the two filters necessary to make it work in the class constructor.

To use it in a PHP template, you need to use the do_shortcode function, like this

<?php echo do_shortcode('[login]'); ?>

All you need to do now is to polish the user interface and you’ll have a nice login box properly integrated in your theme design.

• WordPress drop down menus: highlight parent items with jQuery
• Make embedded tweets in WordPress responsive
• Customize nextpage pagination links in WordPress posts
• Preserving radio button checked state during drag and drop with jQuery
• jQuery plugin for better select boxes

Markup

Despite the fact that we will be using the markup of menus generated by WordPress to highlight the parents items, this is a general technique that can be used in any drop down menu, as long as it has the ul > li > a + ul format.

This is a sample —with some classes removed for the sake of brevity— of the markup generated by WordPress when you use the wp_nav_menu function.

<div id="navigation">
	<ul class="menu">
		<li class="menu-item">
			<a href="#" class="has-submenu">Stock Graphics</a>
			<ul class="sub-menu">
				<li class="menu-item">
					<a href="http://graphicriver.net/item/pricing-table/149744?ref=Elliot">Pricing Table</a>
				</li>
				<li class="menu-item has-submenu">
					<a href="#">Icons</a>
					<ul class="sub-menu">						
						<li class="menu-item">
							<a href="http://graphicriver.net/item/roll-icons/2196807?ref=Elliot" class="has-submenu">Roll icons</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Notice you can use dummy anchors using the # instead of a full URL and they will behave like any other menu item.

Creating the interaction

Although the jQuery code is quite short, it has its own complexities. We will collect the parents of the current list we’re browsing and, following the Object Oriented CSS trend, we will add a single class that is the “skin” of the element to the anchors to each parent.

/**
* Highlights parents from children items in sub menus
* http://ilovecolors.com.ar
*/
jQuery(document).ready(function($) {
	$('#navigation ul ul')
		.mouseenter(
			function() {
				$(this).parents('li').each(function(){
					$(this).children('a').addClass('highlight');
				});
			})
		.mouseleave(
			function() {
				$(this).parent('li').each(function(){
					$(this).children('a').removeClass('highlight');
				});
			}
		);
});

Note that for more efficiency we’re beginning from the second level of menus, that is, the first level of drop downs, because the first level will be highlighted using regular CSS with the :hover pseudo selector.
The mouseenter and mouseleave events are also used because they don’t bubble the event up from the child to the parent. Also notice that in the mouseenter event, we highlight all the parents of the current list of items, but in the mouseleave, we only remove the highlight for the immediate parent since otherwise we would remove the highlight up until the first parent thus nulling our tracking system.

Closing words

Finally, here’s the Demo for Highlight Parent Menu Items so you can have a play with it. The code is released under the GPL v2 license so you can incorporate into your WordPress themes should you need. This solution has been tested in IE 7, 8 as well as modern browsers.

• Customize nextpage pagination links in WordPress posts
• Add a custom login to your WordPress theme
• Display sidebar widgets using a shortcode in WordPress
• Slides from WordCamp San Francisco 2011
• Slide upwards in jQuery using slideDown()

WooCommerce grown up quite a lot since its inception. Having been involved in the creation of three themes for WooCommerce I saw that it was lacking a proper product slider or carousel suitable for responsive layouts.

Overview

This plugin works by creating a WordPress shortcode that will create a carousel with any option that want to specify. You can write this shortcode either in your post or page content or even in your sidebars provided that you’re using a Text widget that supports shortcode execution.

You have the option to create a carousel but you can also display the products in a simple grid should you need it. The carousel is responsive and will adapt to different devices screens, provided that your theme is also responsive of course. The carousel will display arrows to display next or previous products and also includes pagination.

Usage

After uploading and activating the plugin, you can access the plugin settings page where you can set some default options that will be used throughout your entire site.  You can override any option later in your shortcode but these options are here so you don’t have to specify them every time.

In the settings page you’ll also find some controls to adjust the appearance of the slider. Unlike the others, you can’t specify new styling for each slider, but you can specify a CSS class using one of the shortcode parameters and use it to target the carousel and stylize using the Custom Styling block.

Demo

You can see the demo and acquire Product Slider for WooCommerce in CodeCanyon for only $12.

• 17 CMS for your eCommerce project
• AllSlider for WordPress: touch responsive sliders and carousels
• Monitor the media queries of your responsive theme in WordPress
• 10 e-commerce plugins and themes to start your online store with WordPress
• Best web design resources of June 2011

We have a sweet giveaway brought to you by ShopHTML, a professional PSD to HTML coding service. A lucky winner will get three free pages of markup! If you are short on time or prefer concentrating on the creative work, this is a great chance to get a quality standards compliant code with no hassle.

How it works

ShopHTML takes artwork in any common layered format and provides a hand-coded well structured W3C Valid XHTML/CSS markup and WordPress, Drupal and Joomla implementation. Their code is displayed equally well in all modern browsers, such as: Internet Explorer 7+, Firefox 3.6+, Chrome, Opera 11, Safari 5. They can also test your project on mobile devices of your choice.

Their standard delivery time of the first page is only 24 hours. ShopHTML is a reliable service and they guarantee that all information and designs you provide will not be disclosed to anyone.

Why work with ShopHTML?

• High quality standards compliant code;
• High quality customer care;
• Non-disclosure policy;
• Amazing pricing.

Take a look at some examples of their work to see the quality of their XHTML / CSS code for yourself.

Winner

The winner is Santiago Lobos, thanks everyone for entering!

With responsive design gaining more momentum every day and WordPress as the most popular CMS around it is only natural to develop more tools to ease our life developing with it. Here you’ll find a simple tool so you can always keep an eye on which media query is currently in use in WordPress, using the Admin Bar.

Here’s how to use it:

1. Download Media Queries Monitor

2. Upload or copy it to your wp-content/plugins folder in your WordPress installation on your server or hard drive

3. Log in to WP Admin and activate it in the Plugins screen.

4. Go to the settings page at Settings / ILC Media Queries Monitor

5. Enter the media queries you’re using in your responsive layout in the text area as shown in the video, ordering them by size, and save the changes

As shown in the video, if you now go to the front end while logged in, you’ll see a number on the left of the Admin Bar which is the current media query in use.

Other plugins for WordPress are available for purchase in CodeCanyon if you enjoyed Media Queries Monitor, like the Slider Shortcode, the Rotating Tabs Widget and others.

• Best web design resources of June 2011
• Folding menu plugin for WordPress
• WordPress plugin: responsive carousel for WooCommerce products
• Color theme for Aptana 3
• Best web design resources of July 2011

It’s been long since last time I dropped a freebie here so here’s a nice and useful one. The freebie this time is a  calendar, that you can either use as an icon by reducing its size or even as a complete interface.

The calendar includes a bunch of elements like torn papers, multiple hand drawn elements to highlight a special date and buttons at the top that will come hand when used as a calendar interface in your web application.
Here’s a real size preview:

Feel free to download the calendar graphic below:

If you enjoy the calendar, check more useful stock interfaces, icons and illustrations on GraphicRiver or WordPress plugins and CSS elements on CodeCanyon, purchasing one of them will not only get you a quality item but you will also be supporting I Love Colors. Of course, beers are always welcome through the donation button below.

• Monitor the media queries of your responsive theme in WordPress
• Color theme for Aptana 3
• Best web design resources of June 2011
• How to add TinyMCE to textarea meta boxes in WordPress
• The Noun Project: Free Everyday Symbols

Disco party Facebook Timeline

Perfect for your summer night party, includes images for timeline cover and profile. Easily editable so you can create your own variations.

Icon Set

These sleek icons will enhance the look of your site and product. They were built using vectorial shapes and layer styles for maximum editability.

Clipboards illustration

Highly detailed clipboards to be used as part of larger illustrations or as web elements in some interface. Includes wood and leather version, torn papers, lined papers and hand drawn elements.

Folders illustration

These cardboard folders and papers with multiple styles like blank and lined paper, in yellow and white versions, can be used in an illustration or as interface elements.

• Now on Twitter & giveaway
• 20 single page websites for products
• Best web design resources of June 2011
• The Noun Project: Free Everyday Symbols
• iconSweets: more than 1000 free minimal icons