How to Send HTML Emails From WordPress Using wp_mail Function

How to Send HTML Emails From WordPress Using wp_mail Function.
Yes you can use WordPress’s wp_mail() function to send HTML emails from your WordPress site. However, the default content type of wp_mail() function is set to ‘text/plain’ which does not allowed you to send HTML in emails. If you want to send HTML emails using the WordPress wp_mail() function then you will need to set the content type of the email to “text/html” by using the ‘wp_mail_content_type’ filter. This is how you can do that:

Before you send your wp_mail() call add a filter to wp_mail_content_type. You can add this filter which is shown below.

[php] add_filter(‘wp_mail_content_type’,’set_content_type’); [/php]

Then create a function set_content_type and in that function have to return the appropriate content type, in this case it is ‘text/html’. See below

[php]
function set_content_type($content_type){
return ‘text/html’;
}
[/php]

Another Way to Set the Mail Content Type to HTML

[php]

add_filter(‘wp_mail_content_type’,create_function(”, ‘return “text/html”; ‘));
wp_mail(‘whoever@whatever.com’, ‘Email Subject’, ‘Email Message Body’);

[/php]

How to Change the Default Image Sizes in WordPress Admin Panel

Change the Default Image Sizes in WordPress Admin

In WordPress there are 3 default image sizes are there and these default image sizes are 150px * 150px for Thumbnail, 300px * 300px for Medium size and 1024px for Large size.

To change these default image size settings, there is no need of any plugin. You can manage these settings from WordPress admin panel, Go to Settings >> Media and add new values.

How to Defer Parsing of JavaScript in WordPress

The most important one for a WordPress site is its speed and performance. So this is the reason why we should defer parsing of Javascript in wordpress.

So in order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. This means that if you have lots of JS or <script> tags, it will take more time for the website’s content to appear, as it first waits for all the JavaScript to load.

By minimizing the amount of JavaScript needed to render the page and by defer parsing of JavaScript, the website would not wait for the JS code to load, which would result in a quicker loading time, so you can reduce the initial load time of your page.

When you check your website in the Pingdom, GTMetrix or Google’s Page insights, you will get “Defer loading of javascript” warning. If you get this warning, then you should follow the steps below.

How To Defer Parsing Javascript?

You can enable defer parsing for JavaScript just by adding ‘defer’ attribute. For example

How To Defer Parsing Javascript in WordPress?

To defer parsing of JS in WordPress, add the below code to the bottom of your theme’s functions.php file.

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        return "$url' defer ";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

So we have learned how to improve the speed and performance of your website or WordPress powered website by deferring parsing of JavaScript. Remember, the faster and smoother your site is, the more traffic and happier visitors you will have!

Add Custom CSS to WordPress admin dashboard

Using this snippet you can add custom CSS to WordPress admin dashboard.

In WordPress admin panel, you can also add CSS code to customize the look and feel of WP Admin Area. You can easily achieve this by creating a simple function and adding it to your current functions file (functions.php).

Below is an example function that you can use:

[php]

add_action(‘admin_head’, ‘custom_css_admin_panel’);

function custom_css_admin_panel() {
echo ‘

‘;
}

[/php]

Add a Taxonomy Filter to your admin list for Custom Post Type

How to Add a Taxonomy Filter to your admin list for Custom Post Type

This tutorial explains you to enable “taxonomy filter” for any of your custom post type you created, in listing view of custom post type. This will allow you to filter the entries of custom post type by the term within a custom taxonomy attached to that post type.

For example, if you have a custom post type called “Books”, with a taxonomy called “Genre” attached to it, you could enable the filter for Genres and then be able to view only books filed in the “Fantasy” genre from the admin mange posts screen.

Add this below function to your theme functions.php

Screenshot:

taxonomy_filter-1

[php]

function book_add_taxonomy_filters() {
global $typenow;

// an array of all the taxonomies you want to display. Use the slug
$taxonomies = array(‘genre’);

// must set this to the post type you want the filter(s) displayed on
if( $typenow == ‘book’ ){

foreach ($taxonomies as $tax_slug) {
$tax_obj = get_taxonomy($tax_slug);
$tax_name = $tax_obj->labels->name;
$terms = get_terms($tax_slug);
if(count($terms) > 0) {
echo "<select name=’$tax_slug’ id=’$tax_slug’ class=’postform’>";
echo "<option value=”>Show All $tax_name</option>";
foreach ($terms as $term) {
echo ‘<option value=’. $term->slug, $_GET[$tax_slug] == $term->slug ? ‘ selected="selected"’ : ”,’>’ . $term->name .’ (‘ . $term->count .’)</option>’;
}
echo "</select>";
}
}
}
}
add_action( ‘restrict_manage_posts’, ‘book_add_taxonomy_filters’ );

[/php]

Bloginfo Function Shortcode

Bloginfo Function Shortcode

The bloginfo() function in WordPress gives you access to lots of useful information about your site. Here is the complete list. This can be used inside Page/Post content itself using shortcode, here we can make a shortcode to return the values. Add this functin to your functions.php file in your theme:

[php]

function qt_bloginfo_shortcode( $atts ) {
extract(shortcode_atts(array(
‘key’ => ”,
), $atts));
return get_bloginfo($key);
}
add_shortcode(‘bloginfo’, ‘qt_bloginfo_shortcode’);

[/php]

Now you can output any of the values by calling that shortcode with attribute “key”. For example, the name of your site:

[html]
[bloginfo key=’name’]

<img src="[bloginfo key=’template_url’]/images/logo.jpg" alt="[bloginfo key=’name’] logo" />
[/html]

How to Remove Width and Height Attributes From Inserted Images in WordPress

How to Remove Width and Height Attributes From Inserted Images.
remove_image_att
When we upload an image through the WordPress media uploader and then insert it into the tinyMCE editor, it comes with height & width attributes. But if you want to remove the insert action from adding these attributes, you can add this code to you functions.php file or a functionality plugin of your own making:

[php]

add_filter( ‘post_thumbnail_html’, ‘remove_width_attribute’, 10 );
add_filter( ‘image_send_to_editor’, ‘remove_width_attribute’, 10 );

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

[/php]

WordPress 3.8 Icons for your Custom Post Types in the Admin Menu

New look of WordPress 3.8 admin is really exciting. I discovered that the new icons are packaged as an icon font and loaded by default admin the admin panel, so we use these icons with a little
css and markup. Here we use these icons for custom post type.

WordPress 3.8 Icons for your Custom Post Types in the Admin Menu.

There is a new option for menu_icon argument of the register_post_type function. We can pass any of the following argument in menu_icon.

  • the url of an image to be used for the icon
  • a “dashicons” helper class
  • a base64-encoded SVG using a data URI string

Step 1 –

Custom post type menu items by default are given the class “menu-icon-post”, which gives it the default pushpin icon. However, you can simply pass an empty string in the menu_icon argument, and a custom icon class will be added to the menu item. So, when registering an “Events” post type, adding ‘menu_icon’ => ” will result in the menu item being given the class “menu-icon-events”. This allows us to quite easily alter the icon used.

[php]
$post_type_args = array(
‘labels’ => $labels,
‘singular_label’ => __(‘Event’),
‘public’ => true,
‘show_ui’ => true,
‘publicly_queryable’ => true,
‘query_var’ => true,
‘exclude_from_search’ => false,
‘show_in_nav_menus’ => true,
‘capability_type’ => ‘post’,
‘has_archive’ => true,
‘hierarchical’ => false,
‘rewrite’ => array(‘slug’ => ‘event’, ‘with_front’ => false ),
‘supports’ => $supports,
‘menu_position’ => 20,
‘menu_icon’ => ”,
‘taxonomies’ => $taxonomies
);
register_post_type(‘event’,$post_type_args);
}
add_action(‘init’, ‘register_event_posttype’);
[/php]

Step 2 –

dashicons_ss

Now we add some css in the admin head, But first go to http://melchoyce.github.io/dashicons/ and find the icon from the list that you want to use and click on the icon then click on “Copy CSS” in header, it will provide the code like content: "\f116";. Now add the following code into your theme’s functions.php.
[php]
<?php

function qt_add_menu_icons_styles(){
?>

<style>
#adminmenu .menu-icon-events div.wp-menu-image:before {
content: ‘\f145’;
}
</style>

<?php
}
add_action( ‘admin_head’, ‘qt_add_menu_icons_styles’ );
[/php]

Result:

icon_result
And you are Done!!

Disable admin bar from WordPress Site

WordPress by default provide admin bar at the top of the page for logged in users.

By using wordpress filtering and hook system, we can disable the admin bar from wordpress site for logged in user. Here is the snippet which will disable admin bar from wordpress site.

[php]

add_filter(‘show_admin_bar’, ‘__return_false’);

[/php]

Add this filter into your theme’s funtions.php file