Media Query Break Points


Here are the default Media Queries you should be using:

 

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

We also have a Quick Tip for reference here. If you use SASS or LESS, you can use the built in variables (small, medium, large, etc.) for the breakpoints.


Download WordPress 3.6.1


The latest stable release of WordPress (Version 3.6.1) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one-click install of WordPress or getting a free account on WordPress.com.

Source : http://wordpress.org/download/

HOW TO MAKE SYMBOLS WITH KEYBOARD


Useful Information

HOW TO MAKE SYMBOLS WITH KEYBOARD
Alt + 0153….. ™… trademark symbol
Alt + 0169…. ©…. copyright symbol
Alt + 0174….. ®….registered ­ trademark symbol
Alt + 0176 …°……degre ­e symbol
Alt + 0177 …±….plus-or ­-minus sign
Alt + 0182 …¶…..paragr ­aph mark
Alt + 0190 …¾….fractio ­n, three-fourths
Alt + 0215 ….×…..multi ­plication sign
Alt + 0162…¢….the ­ cent sign
Alt + 0161…..¡….. ­.upside down exclamation point
Alt + 0191…..¿….. ­upside down question mark
Alt + 1…….….sm ­iley face
Alt + 2 ……☻…..bla­ck smiley face
Alt + 15…..☼…..su­n
Alt + 12……♀…..female sign
Alt + 11…..♂……m­ale sign
Alt + 6…….♠…..spade
Alt + 5…….♣…… ­Club
Alt + 3……..…… ­Heart
Alt + 4…….♦…… ­Diamond
Alt + 13……♪…..e­ighth note
Alt + 14……♫…… ­beamed eighth note
Alt + 8721…. ∑…. N-ary summation (auto sum)
Alt + 251…..√…..s­quare root check mark
Alt + 8236…..∞….. ­infinity
Alt + 24…….↑….. ­up arrow
Alt + 25……↓…… ­down arrow
Alt + 26…..→…..ri­ght arrow
Alt + 27……←…..l­eft arrow
Alt + 18…..↕……u­p/down arrow
Alt + 29……↔…left right arrow

share it !

IE 9 Conditional Style Sheet


<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/include/ie6stylehome.css" /><![endif]-->
<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="http://imagekarthik.com/xxxxxx/style.css;" <![endif]-->
<!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="http://imagekarthik.com/xxxxxx/style.css;" <![endif]-->
 
 <!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://imagekarthik.com/xxxxxx/style.css;" <![endif]-->

 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="http://imagekarthik.com/xxxxxx/style.css;" type="text/css" />
<style type="text/css">
<!--
-->
</style>

Making your WordPress Plugin Responsive by using AJAX


Source: http://designmodo.com/responsive-wordpress-plugin/#ixzz2NOIiUKzv

Traditionally whenever you click a link on a web page it might do a request on the server for that URL and the complete page will be fetched from the server. This is fine in some cases but in some cases it is too time consuming for the whole page to load. There might not be much difference in the content of the page as many sections like the header, footer; sidebars might just be the same.

You can make your websites more responsive by using AJAX (Asynchronous JavaScript and XML). By using AJAX in your website and plugins you will not refresh the complete page. You will just get the content from the server which you want to update and only update that part of the page. So the complete reload of the pages does not remain necessary and you website seems much more responsive to the user. WordPress also has good support for AJAX. This makes it very easy to write plugins which use AJAX in them.

In this article we are going to see how to use AJAX in your plugin by writing a simple plugin which list the latest posts titles and then by clicking on the post title will fetch the contents of the post via an AJAX call.

Adding the necessary files and scripts

Let’s start by creating the plugin and adding some necessary scripts which will be necessary for our plugin to function.

First create a directory ajaxloadpost in you plugins directory of WordPress installation. In it create ajaxloadpost.php with the following content for the header of your plugin.

1
2
3
4
5
6
7
<?php
/*
Plugin Name: Ajax Load Post
Description: This loads post via ajax
Author: Abbas Suterwala
Version: 1
*/

Now you should be able to see your plugin in the plugin list, you should go and activate it.

Once you have activated the plugin you should also add the following code to your ajaxloadpost.php

1
2
3
4
5
6
define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function ajaxloadpost_enqueuescripts() {
    wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
    wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

In the above code we first we define a variable AJAXLOADPOSTURL which holds the URL to our plugin directory. We will use it wherever we need to point to the URL of our plugin.

Then we add the function ajaxloadpost_enqueuescripts too the wp_enqueue_scripts action of WordPress. This will help us enqueue the necessary scripts.

First we add our JavaScript file ajaxloadpost.js which should be in \wp-content\plugins\ajaxloadpost\js\ folder.

So now you should create the js folder and put the ajaxloadpost.js file in it.

The WordPress function wp_enqueue_script will enqueue this script for us and it also specifies that jquery is the prerequisite for this. Then we add a JavaScript variable using the WordPress function wp_localize_script which holds the WordPress AJAX URL which we get using the function admin_url( ‘admin-ajax.php’ ) ).

So finally you directory structure will be as follows and your scripts will be enqueued by WordPress.

Adding the AJAX handler in WordPress

Now let’s write our AJAX handler which will be the function which will handle when we make an AJAX call to WordPress. The code for our AJAX handler is as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
function ajaxloadpost_ajaxhandler() {
    if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
        exit("Wrong nonce");
    }
    $results = '';
    $content_post = get_post($_POST['postid']);
    $results = $content_post->post_content;
    die($results);
}
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

The above function assumes two inputs to it. One is the post id of the post whose content we want to fetch and second is the ‘nonce’ (this we will discuss in a separate section below).

This function first checks if the nonce is appropriate. Once that is done it gets its gets the posted from the $_POST variable. The using the WordPress API get_post we get the post via the post id and gets its content. And then we die by passing the contents back.

Once we have got our AJAX handler function in place now we need to register it with WordPress so that our function can be called once we make an AJAX request for it. We can do it by adding our function to the following actions.

1
2
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

So now when an AJAX request is done to WordPress’s admin-ajax.php url with the action parameter as ajaxloadpost_ajaxhandler our function will be called.

The Javascript  for AJAX

Now let’s write the JavaScript function which will make the AJAX call for us and update the data which is returned by our AJAX handler. The function should be put in ajaxloadpost.js and is as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function ajaxloadpost_loadpost(postid,nonce) {
    jQuery.ajax({
        type: 'POST',
        url: ajaxloadpostajax.ajaxurl,
        data: {
            action: 'ajaxloadpost_ajaxhandler',
            postid: postid,
            nonce: nonce
        },
        success: function(data, textStatus, XMLHttpRequest) {
            var loadpostresult = '#loadpostresult';
            jQuery(loadpostresult).html('');
            jQuery(loadpostresult).append(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

This function takes two inputs the post id and the nonce. Then using the jQuery.ajax function we will make the AJAX call to the server. The URL is the WordPress AJAX URL of admin-ajax.php which we had stored in the JavaScript variable when enququing the scripts. Then we specify the action as the name of the action handler we registered with WordPress and post the post id and nonce.

In case of success we update the <div> of id #loadpostresult with the content returned by the AJAX handler. In case of error we just pop up the error.

Displaying the list of posts

Once we have put all these functions in place now let’s display the post title and then depending on the post which is clicked lets fetch the content for it with an AJAX call.

The code to do this as follows.

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
function ajaxloadpost_show_latest_posts($number = '5'){
    $results ='';
    $the_query = new WP_Query( 'posts_per_page='.$number );
    while ( $the_query->have_posts() ) :
        $the_query->the_post();
        $nonce = wp_create_nonce("ajaxloadpost_nonce");
        $arguments =  get_the_ID().",'".$nonce."'";
        $link = ' <a onclick="ajaxloadpost_loadpost('.$arguments.');">'. get_the_title().'</a>';
        $result.= '<li>' . $link . '</li>';
    endwhile;
    wp_reset_postdata();
    $result.=  '<div id="loadpostresult"></div>';
    return $result;
}
function ajaxloadpost_shortcode_function( $atts ){
    return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

In the function ajaxloadpost_show_latest_posts I do a query to get the latest post and loop over them to put all the titles in an <a> tag which call our JavaScript function ajaxloadpost_loadpost passing it the post id and nonce. It also adds an empty <div> which will be filled with the result from the AJAX handler.

I have also created a shortcode so that we can use it in a page. In case all is gone well you can add a shortcode [AJAXLOADPOST] in a page as see the post as follows.

Now clicking on the hello world post will fetch the content of it as follows.

A note on nonces

Nonces are basically used to check if the request is come from a genuine source. We generate the nonce using the WordPress function wp_create_nonce. Then this nonce is checked in our AJAX handler using the WordPress function wp_verify_nonce.

This is really important in case you are doing some sensitive task in your AJAX handler. You should always check nonces in your AJAX handler.

Conclusion

AJAX when used appropriately can make your site really responsive to use. WordPress makes it easy by receiving the AJAX call and passing it to our handler. We can easily write our logic and fetch the data which we want to return back to be updated on the front end. So have fun in using AJAX in your next plugin.

Gallery

Know the WordPress Theme and the File Structure

This gallery contains 1 photo.


Source: http://designmodo.com/wordpress-theme-structure/#ixzz2NOHkLNal WordPress has clear distinction between the functionality of the site that is the different features you have on your site and the way the site is displayed to the user. The appearance of the WordPress site to the … Continue reading

How To: Avoid Duplicate Posts


The Codex article the reader mentioned was regarding the Loop. Although the example shows how to avoid a single duplicate post, it doesn’t show how to avoid duplicating multiple posts.

Here’s how to show two individual loops without duplicating posts in either loop.

Step 1: Add a ‘posts_where’ Function

WordPress filter is needed to accomplish this, and we’re going to be tapping into the ‘posts_where‘ filter.

The reason being is we need to modify the query used for the loop and exclude some posts.

Here’s the function we’ll be using called post_strip:

 

function post_strip($where) {
	global $myPosts, $wpdb;
	$where .= " AND $wpdb->posts.ID not in($myPosts) "; 
	return $where;
}

 

In the above code, I use a global variable called $myPosts, which is comma-separated string of post IDs to exclude.

Step 2: Start the First Loop

Within this first loop we’ll be keeping track of the post IDs being used. Nothing fancy is being done here. We’re just pulling the last five posts posted.

 

<?php 
global $myPosts;
$myPosts = '';
?>
<div>
<?php
$my_query = new WP_Query();
$my_query->query('showposts=5');
if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $myPosts .= $post->ID . ","; ?>
<div><?php the_title(); ?></div>
<!-- Post Stuff -->
<?php endwhile; endif; ?>
</div>

 

Pay special attention to the $myPosts variable, which is used to keep track of all of the post IDs.

Step 3: Add the Filter

We’ll now need to add a posts_where filter for the second loop. This filter will use thepost_strip function we started in Step 1.

 

<?php add_filter('posts_where', 'post_strip'); ?>

 

Step 4: Start the Second Loop

The second loop is a repeat of the first loop to demonstrate that the posts are not being duplicated. The second loop uses a different loop technique since paging isn’t necessary.

 

<div>
<?php
$my_query = new WP_Query('showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();?> 
<div><?php the_title(); ?></div>

<!-- Post Stuff -->

<?php endwhile; ?>
</div>

 

Step 5: Remove the Filter

The filter we added in Step 3 now needs to be removed.

 

<?php remove_filter('posts_where', 'post_strip'); ?>

 

Step 6: Admire the Results

Before Duplicates Being Shown
Before – Duplicates Being Shown

After - Duplicates Removed
After – Duplicates Removed

Downloadable Code

Here is a sample index.php for download.

 

Ref : http://weblogtoolscollection.com/archives/2008/05/17/how-to-avoid-duplicate-posts/