How to Remove Height and Width From Inserted Images

When we upload an image with the help of WordPress media uploader and insert it into editor, it comes with height and width attributes. These are normally default attributes, as it assists browser to make appropriate room for the image during layout.

But if you want to remove these attributes from image then you can use below code

Just need to put this code in your theme functions.php file

add_filter( 'post_thumbnail_html', 'remove_image_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_image_attribute', 10 );

function remove_image_attribute( $html ) {
   $html = preg_replace( '/(height|width)="\d*"\s/', "", $html );
   return $html;
}

WordPress WP_Query: Get Posts by Meta Values

As you know all the posts have the metadata you can fill in “Custom fields” metabox (it can also be hidden). So, for example, if you want to get a post with meta key show_in_slider and meta value true, you can do it in the following way:

<?php
$args = array(
	'meta_key' => 'show_in_slider',
	'meta_value' => 'true'
);
 
$allRecords = new WP_Query( $args );
?>

Otherwise, if you need to query all posts except the ones with this pair of meta key and value, you can use the following parameters:

<?php
$args = array(
	'meta_key' => 'show_in_slider',
	'meta_value' => 'true',
	'meta_compare' => '!='
);
 
$allRecords = new WP_Query( $args );
?>

Do not forget that all examples in this post are simplified, so, some of WP_Query parameters are missing, e.g posts_per_page or post_type.

This was very simple examples, just an introdution. But this post is about meta_query parameter. This parameter allows us to create a really cool post filters and search scripts.

meta_query Usage Examples

Get Posts with a Specific Custom Field Value

This is a simple example. Let’s get all the posts with custom field name “color” and custom field value “white”.

<?php 
// the meta_key 'blog_type' with the meta_value 'clasic'
$args = array(
	'meta_query' => array(
		array(
			'key' => 'blog_type',
			'value' => 'clasic'
		)
	)
);
 
$allRecords = new WP_Query( $args );
?>

Get all the posts except the ones with meta key “blog_type” and meta value “clasic”:

<?php
$args = array(
	'meta_query' => array(
		array(
			'key' => 'blog_type',
			'value' => 'clasic',
			'compare' => '!='
		)
	)
);
 
$allRecords = new WP_Query( $args );
?>

Now let’s get all the posts with clasic OR regular type custom field value:

<?php
// custom field name is blog_type and custom field value is 'clasic' OR 'regular'
$args = array(
	'meta_query' => array(
		array(
			'key' => 'blog_type',
			'value' => array('clasic','regular'),
			'compare' => 'IN'
		)
	)
);
 
$allRecords = new WP_Query( $args );
?>

Get all the posts except clasic and regular posts:

<?php
$args = array(
	'meta_query' => array(
		array(
			'key' => 'blog_type',
			'value' => array('clasic','regular'),
			'compare' => 'NOT IN'
		)
	)
);
 
$allRecords = new WP_Query( $args );
?>

Get Posts Within a Given Range of Numeric Meta Values

For example, let’s filter the post by hit’s rang:

<?php
// The post hit's is more than 9000 and less than 10000
$args = array(
	'meta_query' => array(
		array(
			'key' => 'hits',
			'value' => array( 9000, 10000 ),
			'type' => 'numeric',
			'compare' => 'BETWEEN'
		)
	)
);
 
$allRecords = new WP_Query( $args );
?>

Numeric Comparison

The post hit’s in this example is 9999 or more than 9999:

<?php 
$args = array(
	'meta_query' => array(
		array(
			'key' => 'hits',
			'value' => 9999,
			'type' => 'numeric',
			'compare' => '>='
		)
	)
);
 
$allRecords = new WP_Query( $args );
?>

The post hit’s less than 100:

<?php
$args = array(
	'meta_query' => array(
		array(
			'key' => 'hits',
			'value' => 100,
			'type' => 'numeric',
			'compare' => '<'
		)
	)
);
 
$allRecords = new WP_Query( $args );
?>

Query Posts by Two Or More Custom Field Values

Let’s combine some of the previous examples:

<?php
// the 'blog_type' is 'clasic' AND the 'hits' is more than 9900 and less than 10000
$rd_args = array(
	'meta_query' => array(
		'relation' => 'AND',
		array(
			'key' => 'blog_type',
			'value' => 'clasic'
		),
		array(
			'key' => 'hits',
			'value' => array( 9900, 10000 ),
			'type' => 'numeric',
			'compare' => 'BETWEEN'
		)
	)
);
 
$rd_query = new WP_Query( $rd_args );
?>

I think, all above examples are sufficient. If any one have any issue then put your comments bellow.

How to Integrate responsive-nav.js into WordPress Navigation

Responsive Web Design is all the rage these days. Clients are asking for it, web developers are expected to know it, and most importantly, mobile devices are more popular than ever. One big area of a website is website navigation. In my post, I talk all about responsive navigation and how to make it work nicely in WordPress.

responsive-nav.js is a fantastic, and more importantly, light-weight, piece of javascript code that will automatically switch out your current, full-width navigation for an animated pull-down section on mobile. In this post, we will:

  1. Define our menu
  2. Enqueue responsive-nav.js and accompanying CSS
  3. Add the javascript that does the heavy lifting to our template

So let’s start with the easy part: defining new menu. In functions.php of current theme:

<?php 
if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'menus' );
}
?>

Then add this to your header.php (or wherever you want to add the menu):

<nav class="nav-menu">
    <?php wp_nav_menu( array('menu' => 'Main' )); ?>
</nav>

Perfect! Now you can choose the “Main” menu from the WordPress Menu admin section. Next, Enqueue responsive-nav.js. Now head over to responsive-nav.com and download the files. I always place theme-specific javascript and it’s CSS in a folder called /js/ in the theme folder.

Now, Again open up functions.php and add this:

<?php 
function responsive_scripts() {
    wp_enqueue_script('responsive-nav', get_template_directory_uri() .'/js/responsive-nav.js');
    wp_enqueue_style('resnav-css', get_template_directory_uri() .'/css/responsive-nav.css');
}
add_action( 'wp_enqueue_scripts', 'responsive_scripts' );

function responsive_footer_script(){
 echo '<script>
           var navigation = responsiveNav(".nav-menu", {
               label: "- navigate -"
           });
       </script>';
}
add_action( 'wp_footer', 'responsive_footer_script' );
?>

The above code will properly add the script & CSS to the of your theme.

That’s it! Now you have a responsive nav menu in your website.

How to Control WordPress Custom Post Types, Capabilities and Roles

As We all knows about Custom Post Types and how to create them, when we create custom post types without Capabilities all users except subscriber roles can publish, read, edit and delete them by default. What if we wanted to create a custom post type that Author could read, edit and publish but Author Staff could only read? Well here’s were custom post types and capabilities gets interesting! Take the following basic custom post type for registering Article:

<?php 
add_action( 'init', 'register_article_post' );

function register_article_post() {

    $labels = array( 
        'name' => _x( 'Articles', 'article' ),
        'singular_name' => _x( 'Article', 'article' ),
        'add_new' => _x( 'Add New', 'article' ),
        'add_new_item' => _x( 'Add New Article', 'article' ),
        'edit_item' => _x( 'Edit Article', 'article' ),
        'new_item' => _x( 'New Article', 'article' ),
        'view_item' => _x( 'View Article', 'article' ),
        'search_items' => _x( 'Search Articles', 'article' ),
        'not_found' => _x( 'No articles found', 'article' ),
        'not_found_in_trash' => _x( 'No articles found in Trash', 'article' ),
        'parent_item_colon' => _x( 'Parent Article:', 'article' ),
        'menu_name' => _x( 'Articles', 'article' ),
    );

    $args = array( 
        'labels' => $labels,
        'hierarchical' => true,
        'supports' => array( 'title', 'editor' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
    );
    register_post_type( 'article', $args );
}
?>

The above example would give all users (above subscriber) full capabilities over the custom post type Article, like all can read, publish, edit and delete them. When we add ‘map_meta_cap, capabilities and capability_type’ to the $args array we can take more control over it.

Lets modify the $args first by adding map_meta_cap capabilities, and capability_type:

<?php 
add_action( 'init', 'register_article_post' );

function register_article_post() {

    $labels = array( 
        'name' => _x( 'Articles', 'article' ),
        'singular_name' => _x( 'Article', 'article' ),
        'add_new' => _x( 'Add New', 'article' ),
        'add_new_item' => _x( 'Add New Article', 'article' ),
        'edit_item' => _x( 'Edit Article', 'article' ),
        'new_item' => _x( 'New Article', 'article' ),
        'view_item' => _x( 'View Article', 'article' ),
        'search_items' => _x( 'Search Articles', 'article' ),
        'not_found' => _x( 'No articles found', 'article' ),
        'not_found_in_trash' => _x( 'No articles found in Trash', 'article' ),
        'parent_item_colon' => _x( 'Parent Article:', 'article' ),
        'menu_name' => _x( 'Articles', 'article' ),
    );

    $args = array( 
        'labels' => $labels,
        'hierarchical' => true,
        'supports' => array( 'title', 'editor' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,

        'map_meta_cap' => true,
        // map_meta_cap will allow us to remap the existing capabilities with new capabilities to match the new custom post type

        // capabilities are what we are customising so lets remap them
        'capabilities' => array(
            'edit_post' => 'edit_article',
            'edit_posts' => 'edit_articles',
            'edit_others_posts' => 'edit_other_articles',
            'publish_posts' => 'publish_articles',
            'edit_publish_posts' => 'edit_publish_articles',
            'read_post' => 'read_articles',
            'read_private_posts' => 'read_private_articles',
            'delete_post' => 'delete_article'
        ),
        // capability_type defines how to make words plural, by default the
        // second word has an 's' added to it and for 'article' that's fine
        // however when it comes to words like book the plural would become
        // books so it's worth adding your own regardless of the plural.
        'capability_type' => array('article', 'articles'),
    );
    register_post_type( 'article', $args );
}
?>

So now we have a Custom Post Type with Capabilities remapped to our own custom Capabilities with our own plural words. All we have to do now is add the capability to the roles.

Look at bellow example:

<?php 
function manage_capabilities() {
    // gets the role to add capabilities to
    $admin = get_role( 'administrator' );
    $editor = get_role( 'editor' );
	// replicate all the remapped capabilites from the custom post type article
    $caps = array(
    	'edit_article',
    	'edit_articles',
    	'edit_other_articles',
    	'publish_articles',
    	'edit_published_articles',
    	'read_articles',
    	'read_private_articles',
    	'delete_article'
    );
    // give all the capabilities to the administrator
    foreach ($caps as $cap) {
	    $admin->add_cap( $cap );
    }
    // limited the capabilities to the editor or a custom role 
    $editor->add_cap( 'edit_article' );
    $editor->add_cap( 'edit_articles' );
    $editor->add_cap( 'read_articles' );
}
add_action( 'admin_init', 'manage_capabilities');
?>

I think this blog post is really helpful for my blog reader’s, if any one have any query’s then please put your comments

WordPress 3.8 arrives with redesigned dashboard, new theme and widget screens, vector-based icons, and many more

WordPress.org announced the debut of WordPress 3.8, which introduces a modern new design that the company calls its “most beautiful update yet.” You can download the new release now from WordPress.org/Download (it’s 6.10MB).

Dubbed “Parker” in honor of American jazz saxophonist and composer Charlie Parker, WordPress 3.8 brings a new look to the entire admin dashboard.

WordPress 3.8, WordPress King Praveen Singh Shekhawat

The new features are as follows:

  • Modern aesthetic: The new WordPress dashboard has a fresh, uncluttered design that embraces clarity and simplicity.
  • Clean typography: The Open Sans typeface provides simple, friendly text that is optimized for both desktop and mobile viewing. It’s even open source, just like WordPress.
  • Refined contrast: With superior contrast and large, comfortable type, the new design is easy to read and a pleasure to navigate.
  • High definition at high speed: WordPress is sharper than ever with new vector-based icons that scale to your screen. By ditching pixels, pages load significantly faster, too.
  • Admin color schemes: WordPress now includes eight new admin color schemes, which can be previewed and changed from your Profile page.
  • Refined theme management: The new themes screen lets you survey your themes at a glance. Click to add more information, and use your keyboard’s navigation arrows to flip through themes.
  • Smoother widget experience: The widgets screen has been streamlined. On large monitors, multiple widget areas stack side-by-side to use the available space while on tablets, just tap a widget to add it.
  • Twenty Fourteen: Turn your blog into a magazine with this new theme. Choose a grid or a slider to display featured content on your homepage. Customize your site with three widget areas or change your layout with two page templates.

WordPress 3.8 Colors, WordPress King Praveen Singh Shekhawat

Improve loading, Remove unnecessary scripts and styles in WordPress

Some of the plugins, when installed, add 2 or 3 scripts and stylesheets to every page on website. This isn’t necessarily a problem but it would be nice to have scripts loaded only on pages that actually need them.

Let’s take a example of the most popular Contact Form 7 plugin. Most likely, only pages that contain the

 [contact-form-7] 

shortcode will need the extra scripts and styles.

The following code will check your post content to see if it contains the contact form 7 shortcode. If it doesn’t, it will dequeue the styles and scripts so they will not be loaded.

function pv_dequeue_scripts() {
    
    $load_scripts = false;

    if( is_singular() ) {
    	$post = get_post();

    	if( strstr($post->post_content, '[contact-form-7 ') ) {
        	$load_scripts = true;
    	}

    }

    if( ! $load_scripts ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }

}

add_action( 'wp_enqueue_scripts', 'pv_dequeue_scripts');

You can, of course, add more logic to the function to detect the necessity of scripts for other plugins as well. You will need to know the handles used to identify the scripts and styles of the plugin and the shortcode.

Be careful when implementing this though. If you’re rendering a contact form using a widget or template function (for example), the code above won’t detect it and will still dequeue the scripts and styles.

Show Custom Post Types on the Homepage

Custom post types are commonly used in WordPress sites, but they don’t show on the homepage or in the archive pages unless you write code to do that. I’ve put together some code that is smart about detecting your public custom post types and automatically adding them to your homepage and archive pages:

/**
 * Show WordPress custom post types on the main blog and archive pages
 **/
function show_my_post_types( $query ) {

  // Show all custom post types on main blog and archive pages
  if ( $query->is_main_query() && ( is_home() || ( is_archive() && !is_post_type_archive() ) ) ) {

    $custom_post_types = get_post_types( array(
       'public' => true,
       '_builtin' => false,
    ) );

    $post_types = array_merge( array('post'), $custom_post_types );
    $query->set( 'post_type', $post_types );
   }

   return $query;
}

add_filter( 'pre_get_posts', 'show_me_post_types' );

WordPress 3.6: What’s new, and why it Batters

A New User Interface to Create Menus

Many of users often found Menus confusing. WordPress 3.6 comes with a new and simpler user interface to create and edit menus for your website. It has two tabs, one for editing menus and another to manage locations. This new interface is easy to use, and i think many users would find it refreshing too.

New UI for Menu System in WordPress 3.6
New UI for Menu System in WordPress 3.6

Log in Notifications

Sometimes your WordPress session may expire while you are working on the site. This could happen due to several reasons, an expired or deleted session cookie, administrator changing security keys, etc. With earlier versions of WordPress this meant that you will have to go back and log in again. This resulted into loss of important and unsaved changes. WordPress 3.6 resolves this issue by displaying log in notification when a user’s session expires. It opens the notification in a pop-window darkens the screen you were working at.

Improved session handling with log in notifications in WordPress 3.6
Improved session handling with log in notifications in WordPress 3.6

Improved Auto-save Feature

You will not have to worry about loosing content when working on a post. WordPress 3.6 comes with improved auto-save functionality. The most notable improvement to auto-save feature is that WordPress now utilizes your browser’s storage as well as WordPress database to save revisions. WordPress tries to match the current revision with the backup stored in your browser storage and notifies you if it finds any difference.

WordPress 3.6 Autosave feature utilizes browser storage to autosave posts
WordPress 3.6 Autosave feature utilizes browser storage to autosave posts

New Improved Revision Comparison

With WordPress 3.6 comes another great feature, the ability to compare post revisions. As you know that WordPress automatically saves post revisions. You can disable post revisions but over the years we have found this to be a very useful feature. One thing that we didn’t like was that it was difficult to quickly find differences between two revisions. With 3.6, WordPress displays post revisions and highlights the changes between two versions of an article. There is also a slider bar at top so you can easily switch between revisions.

Improved post revisions in WordPress 3.6
Improved post revisions in WordPress 3.6

Twenty Thirteen – The New Default Theme

WordPress 3.6 also comes with a new default theme Twenty Thirteen which is unlike any other default theme before. Unlike its predecessors, Twenty Thirteen is a little bold and more colorful. It is developed to showcase the power of post formats and all new features of WordPress 3.6. It is a responsive theme and designed to be fully accessible so that it can also be used by people with special needs.

Twenty Thirteen - The New Default Theme in WordPress 3.6
Twenty Thirteen – The New Default Theme in WordPress 3.6

Let us know what you think of new features and UI changes in WordPress by leaving a comment below.

Disable Post Revisions in WordPress and Reduce Database Size

Post revisions is a great feature that WordPress has to offer but for some users it might not be the best option. For users who have limited database space, or for users creating WordPress as a CMS where they don’t need autosave, they can simply disable Post Revisions feature in WordPress by following this tutorial. By reducing the database size, you can also speed up your site.

Open wp-config.php located in your WordPress root directory and add the following

 define('AUTOSAVE_INTERVAL', 600 ); // seconds
define('WP_POST_REVISIONS', false ); 

This code will disable all future revisions to be saved and it will also increase your autosave interval from 60 seconds to 600 seconds, so it means your post will be autosaving every 10 minute instead of every minute.

The above code, will not delete your past revisions that are already saved in your database. To delete all previous revisions Click >>