Blog

  • Insert Google Maps Using a Shortcode Without Using a Plugin

    How to Insert Google Maps Using a Shortcode Without Using a Plugin

    Google Maps is probably one of the best services out there for people to quickly get directions online. For business point of view, there are number reasons, why you should embed a Google map into your WordPress website. Whether you want to guide your users to your physical location or maybe you are just using Google map for a background graphic only, it’s always nice to create rich content that are useful and highly interactive. So in this tutorial, I will show you how to insert Google maps using a shortcode in WordPress. You may also be interested in knowing how to add PayPal donation button with shortcode too.

    There are many plugins available in official plugin repository to get this job done but it’s really not that complex to embed Google maps into WordPress posts and pages. Google maps actually provides copy-and-pastable iframe code that is really quick and easy to snag. All we need to do is to create a function for our shortcode to insert Google map URL in right place. So here is the code snippet that you can add in your theme’s function.php file to create Google maps Shortcode.

    // insert Google maps using a shortcode
    function wpcs_googlemap_shortcode( $atts, $content = null ) {
    
        extract( shortcode_atts( array(
            "width" => '640',
            "height" => '480',
            "src" => ''
        ), $atts ) );
    
        return '<iframe src="' . $src . '&amp;output=embed" width="' . $width . '" height="' . $height . '" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>';
    
    }
    add_shortcode( "googlemap", "wpcs_googlemap_shortcode" );

    Now you can insert Google maps using a shortcode in any WordPress post or page. Here is the example usage of this shortcode.

    [googlemap width="400" height="300" src="[map-url]"]

    You will need to insert Google map URL in above shortcode which you can get from their website.

  • Force WordPress to Select Thumbnail Image Size by Default in WordPress Media Uploader

    How to Force WordPress to Select Thumbnail Image Size by Default in WordPress Media Uploader

    With WordPress 3.5 release, WordPress core team introduced many significant changes in the core and Media Uploader was one of the most important one. This new WordPress Media Uploader has a number of advantages over the previous version. For instance it has drag and drop support, easier management of galleries, cleaner interface and much more.

    https://web.archive.org/web/20220521003726if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=4940428946&adk=2809832793&adf=801880389&pi=t.ma~as.4940428946&w=336&lmt=1775834046&psa=0&format=336×280&url=http%3A%2F%2Fwpcodesnippet.com%2Fselect-thumbnail-image-size-in-wordpress-media-uploader%2F&wgl=1&dt=1653093449295&bpp=5&bdt=3332&idt=941&shv=r20220613&mjsv=m202206140101&ptt=9&saldr=aa&abxe=1&correlator=1419750045290&frm=20&pv=2&ga_vid=839127661.1653093451&ga_sid=1653093451&ga_hid=461633498&ga_fc=0&u_tz=0&u_his=7&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=1155&biw=428&bih=781&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759842%2C44761043%2C31067768%2C31068039%2C21066430&oid=2&pvsid=2699379776652316&tmod=1118653441&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C781&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=1&uci=a!1&btvi=1&fsb=1&xpc=6KxjIWs3TV&p=https%3A//web.archive.org&dtd=1979

    The new WordPress Media Uploader is just great and provides tons of features for uploading and editing images but sometimes that is not enough for us. We always look for ways to improve the user experience.

    On a project, my client asked me to implement a feature to select a custom thumbnail image size automatically in WordPress Media Uploader when he uploads new images to a post, so he can insert them into content without making few extra clicks.

    Lucky for me, WordPress has tons of filters and hooks to help developers alter the default functionality. I used pre_option_(option name) filter to force WordPress to select a custom thumbnail image size by default. This filter is used to temporarily alter a WordPress option during the rendering of a page without changing it permanently in the database.

    If you are also looking for a way to auto select a specific custom thumbnail image size in WordPress Media Uploader then you will need to follow these steps.

    First make sure your theme has support for post thumbnails and you have already defined the custom thumbnail image size in your functions.php file.

    https://web.archive.org/web/20220521003726if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=3463695748&adk=3568412579&adf=337198732&pi=t.ma~as.3463695748&w=336&lmt=1775834046&psa=0&format=336×280&url=http%3A%2F%2Fwpcodesnippet.com%2Fselect-thumbnail-image-size-in-wordpress-media-uploader%2F&wgl=1&dt=1653093449295&bpp=2&bdt=3332&idt=952&shv=r20220613&mjsv=m202206140101&ptt=9&saldr=aa&abxe=1&prev_fmts=336×280&correlator=1419750045290&frm=20&pv=1&ga_vid=839127661.1653093451&ga_sid=1653093451&ga_hid=461633498&ga_fc=0&u_tz=0&u_his=7&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=2106&biw=428&bih=781&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759842%2C44761043%2C31067768%2C31068039%2C21066430&oid=2&pvsid=2699379776652316&tmod=1118653441&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C781&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=2&uci=a!2&btvi=2&fsb=1&xpc=L8A0vA1tEe&p=https%3A//web.archive.org&dtd=1985

    // define custom thumbnail image size
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'my-image-size', 600, 300, true );

    You can change the custom thumbnail image identifierand dimension based on your theme requirement. Now add this following code snippet in your theme’s functions.phpfile before the closing PHP tag at the bottom.

    // force WordPress to select thumbnail image size by default in WordPress media uploader
    function wpcs_default_image_size() {
        return 'my-image-size';
    }
    add_filter( 'pre_option_image_default_size', 'wpcs_default_image_size' );

    That’s it, there is nothing more to do. It’s important to note before posting above code snippet that you use same thumbnail image identifier in above code which you defined earlier in your theme, or it will not work.

  • Change The Separator in The Title Tag in WordPress

    How to Change The Separator in The Title Tag in WordPress

    Title HTML tag in WordPress or on a web page in general, defines the title of the document and is used on search engine result pages (SERPs) to display the preview snippets for that particular page. Title tags are very important for SEO as well as social sharing.

    Why Title Tags are Important for SEO

    Title tag is the main text that briefly describes the content on the page and helps search engines to rank an article into SERPs. That’s why title tags have been considered one of the most important on-page SEO elements.

    The Separator in The Title Tag in WordPress

    Optimizing title tags for your WordPress site must be your number 1 priority and best practices includes using right keyword in the beginning of page title for higher ranking in SERPs. Along with keywords, title tag separators are also important part of the page title.

    Although it has never been confirmed any real significative advantage of using one over the other or any negative impact on SEO for using different separator in the title tag of the page but it does attract eyeballs of visitors.

    https://web.archive.org/web/20220615212918if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=4940428946&adk=522744272&adf=3112791762&pi=t.ma~as.4940428946&w=336&lmt=1775833903&psa=0&format=336×280&url=http%3A%2F%2Fwpcodesnippet.com%2Fseparator-in-the-title-tag-in-wordpress%2F&wgl=1&dt=1655328605397&bpp=24&bdt=47417&idt=4158&shv=r20220613&mjsv=m202206140101&ptt=9&saldr=aa&abxe=1&correlator=3482013058252&frm=20&pv=2&ga_vid=85544088.1655328611&ga_sid=1655328611&ga_hid=1332971674&ga_fc=0&u_tz=0&u_his=7&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=1528&biw=428&bih=781&scr_x=0&scr_y=1&eid=44759875%2C44759926%2C44759842%2C44761043%2C31067628%2C31068031%2C31068039&oid=2&pvsid=2097683576436882&tmod=1118653441&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C782&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=1&uci=a!1&btvi=1&fsb=1&xpc=ivRzAu0kT1&p=https%3A//web.archive.org&dtd=5188

    So in this article we will be focusing on how to change the separator in the title tag in WordPress.

    Change The Separator in The Title Tag

    WordPress by default use pipes “|” as separator in the title tag but we can change it to something of our choice very easily. Official documentation on codex for wp_title()suggests the following way to change the title tag separators. Here the first parameter is separator for the page title and we can change it to dashes, commas or anything else of our choice.

    https://web.archive.org/web/20220615212918if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=3463695748&adk=2820664628&adf=1321344665&pi=t.ma~as.3463695748&w=336&lmt=1775833903&psa=0&format=336×280&url=http%3A%2F%2Fwpcodesnippet.com%2Fseparator-in-the-title-tag-in-wordpress%2F&wgl=1&dt=1655328605397&bpp=2&bdt=47417&idt=4175&shv=r20220613&mjsv=m202206140101&ptt=9&saldr=aa&abxe=1&prev_fmts=336×280&correlator=3482013058252&frm=20&pv=1&ga_vid=85544088.1655328611&ga_sid=1655328611&ga_hid=1332971674&ga_fc=0&u_tz=0&u_his=7&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=2145&biw=428&bih=781&scr_x=0&scr_y=1&eid=44759875%2C44759926%2C44759842%2C44761043%2C31067628%2C31068031%2C31068039&oid=2&pvsid=2097683576436882&tmod=1118653441&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C782&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=2&uci=a!2&btvi=2&fsb=1&xpc=u2mGsuVIWB&p=https%3A//web.archive.org&dtd=5193

    <title><?php wp_title( '|', true, 'right' ); ?></title>

    This is the easiest way to change the title tag separatorsbut it does not always work since many plugins modify WordPress title function to generate the page titles.

    So the best way to change the separator in the title tag is to use wp_title filter for modifying the output of the WordPress title function. You can page this following code snippet in your WordPress theme’s functions.php file.

    // change the title tag separators in WordPress
    function wpcs_change_wp_title_separator( $title, $sep ) {
        // Set new separator
        $sep = '-';
    
        // Set new title with separator
        $title = str_replace( '|', $sep, $title );
    
        return $title;
    }
    add_filter( 'wp_title', 'wpcs_change_wp_title_separator', 10, 2 );

    Upon adding the above code snippet, it will change the default page title separator “|” (pipes) with “-” (dashes).

  • How to Disable Update Check and Notification for Specific Plugin

    How to Disable Update Check and Notification for Specific Plugin

    Sometimes when you login to the admin section of your WordPress website, you may see a number in a red bubble next to the Plugins-item in the menu. This indicates that some of your plugins have updates available and are ready to install from WordPress plugin respiratory.

    It is strongly advised to keep your plugins up to datesince plugin updates usually come with new additional features and more importantly with many security fixes.

    https://web.archive.org/web/20220523103326if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=4940428946&adk=1310781181&adf=3067852227&pi=t.ma~as.4940428946&w=336&lmt=1775820778&psa=0&format=336×280&url=https%3A%2F%2Fwpcodesnippet.com%2Fdisable-update-check-notification-for-specific-plugin%2F&wgl=1&dt=1653302008855&bpp=6&bdt=2870&idt=1371&shv=r20220613&mjsv=m202206140101&ptt=9&saldr=aa&abxe=1&correlator=6512004669528&frm=20&pv=2&ga_vid=151573452.1653302011&ga_sid=1653302011&ga_hid=1390028017&ga_fc=0&u_tz=0&u_his=7&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=1141&biw=428&bih=781&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759842%2C31068039%2C31067487&oid=2&pvsid=2627389365942162&tmod=1118653441&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C781&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=1&uci=a!1&btvi=1&fsb=1&xpc=ZdHKK3wL0H&p=https%3A//web.archive.org&dtd=2394

    But there are times when you don’t want to receive updates for a specific plugin because you may have modified plugin core files and updating plugin will simply wash away your customizations

    The situation become direr when you setup a WordPress website for your client and he accidentally updates all plugins resulting in broken website or at least broken functionality in some part of the website.

    To avoid such scenarios and fixing your WordPress website later on, you may want to disable update check as well as update notification for a specific plugin for a website.

    Previously we have posted code snippet for disabling updates for all plugins in WordPress. If you are looking for a solution to disable update check for all pluginsthen you must head over there and use provided code snippet.

    To disable the updates for specific plugin(s), we will use same method but restrict http request for plugins that we do not want to update. So here is the function you can paste in your functions.php file of your theme.

    https://web.archive.org/web/20220523103326if_/https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7443478584383873&output=html&h=280&slotname=3463695748&adk=161595513&adf=1177554562&pi=t.ma~as.3463695748&w=336&lmt=1775820778&psa=0&format=336×280&url=https%3A%2F%2Fwpcodesnippet.com%2Fdisable-update-check-notification-for-specific-plugin%2F&wgl=1&dt=1653302008855&bpp=2&bdt=2870&idt=1417&shv=r20220613&mjsv=m202206140101&ptt=9&saldr=aa&abxe=1&prev_fmts=336×280%2C336x280&correlator=6512004669528&frm=20&pv=1&ga_vid=151573452.1653302011&ga_sid=1653302011&ga_hid=1390028017&ga_fc=0&u_tz=0&u_his=7&u_h=926&u_w=428&u_ah=926&u_aw=428&u_cd=24&u_sd=1&adx=30&ady=2339&biw=428&bih=781&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759842%2C31068039%2C31067487&oid=2&pvsid=2627389365942162&tmod=1118653441&uas=0&nvt=1&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C428%2C0%2C428%2C926%2C428%2C781&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=3&uci=a!3&btvi=3&fsb=1&xpc=pvnYRNWKxH&p=https%3A//web.archive.org&dtd=2402

    // Disable Update Check and Notification for Specific Plugin
    function wcs_disable_plugin_update_check( $r, $url ) {
        if ( 0 !== strpos( $url, 'http://api.wordpress.org/plugins/update-check' ) )
            return $r;
    
        // array of the plugins
        $blocked_plugins = array(
            'akismet/akismet.php',
            'contact-form-7/wp-contact-form-7.php',
        );
    
        if ( 0 === (int) count( $blocked_plugins ) )
            return $r;
    
        $installed_plugins = unserialize( $r['body']['plugins'] );
        foreach( $blocked_plugins as $p ) {
            unset( $installed_plugins->plugins[ $p ] );
            unset( $installed_plugins->active[ array_key_exists( $p, $installed_plugins ) ] );
        }
        $r['body']['plugins'] = serialize( $installed_plugins );
    
        return $r;
    }
    add_filter( 'http_request_args', 'wcs_disable_plugin_update_check', 5, 2 );

    In this example, we have disabled updates check for Akismet and Contact Form 7 plugins. Of course you must modify this code snippet and add path of the plugins that you do not want to receive updates as well as notifications.

  • Add Custom Image Sizes Into WordPress Media Library

    How to Add Custom Image Sizes Into WordPress Media Library

    In a previous article we have posted about how you can define new custom image sizes to use on your WordPress theme and how to remove default image sizes. You can define and add custom image sizes with the help of add_image_size() function in WordPress. In this article we will show you how you can add these pre-defined custom image sizes to media library upload panel so that you can choose from all available image sizes instead of only standard thumbnail, medium, large and full sizes.

    We want the content editor to be able to select these new sizes when adding an image into the post, by default when using add_image_size() these custom image sizes won’t appear when inserting into the post. For this we need to use the filter image_size_name_choose and make sure we add the custom image sizes into the size array. Adding the new custom image sizes into this array will make sure that the editor can pick these new sizes and that the images will still fit the design of the theme.

    Simply add the following WordPress code snippet into your theme’s functions.php file to allow the editors to choose these new sizes.

    // add custom image sizes into wordpress media library
    function display_custom_image_sizes( $sizes ) {
        global $_wp_additional_image_sizes;
        if ( empty( $_wp_additional_image_sizes ) )
            return $sizes;
    
        foreach ( $_wp_additional_image_sizes as $id => $data ) {
            if ( !isset($sizes[$id]) )
                $sizes[$id] = ucfirst( str_replace( '-', ' ', $id ) );
        }
    
        return $sizes;
    }
    add_filter( 'image_size_names_choose', 'display_custom_image_sizes' );
  • How to Add Featured Post Thumbnails to WordPress Admin Post Columns

    Have you ever wanted to see the featured post thumbnails associated with your posts, without going through each post individually? Wouldn’t it be nice if you can see all post thumbnails while viewing the list of posts in the WordPress admin? If you want this feature to add in your website then you are in luck because we just have a perfect solution for you. We have a code snippet that does just that by adding an additional column to the list of posts and pages in WordPress admin and displays the featured post thumbnails in it.

    WordPress filters mange_posts_columns and manage_posts_custom_column allow us to add custom columns to the list of post & pages in the WordPress admin. These two filters control which columns should be displayed when a user views the list of posts or pages. So we used these functions to add an additional column to the list of posts and pages for displaying featured post thumbnails. You can add this code snippet in your functions.php file of your current theme.

    // add featured thumbnail to admin post columns
    function wpcs_add_thumbnail_columns( $columns ) {
        $columns = array(
            'cb' => '<input type="checkbox" />',
            'featured_thumb' => 'Thumbnail',
            'title' => 'Title',
            'author' => 'Author',
            'categories' => 'Categories',
            'tags' => 'Tags',
            'comments' => '<span class="vers"><div title="Comments" class="comment-grey-bubble"></div></span>',
            'date' => 'Date'
        );
        return $columns;
    }
    
    function wpcs_add_thumbnail_columns_data( $column, $post_id ) {
        switch ( $column ) {
        case 'featured_thumb':
            echo '<a href="' . get_edit_post_link() . '">';
            echo the_post_thumbnail( 'thumbnail' );
            echo '</a>';
            break;
        }
    }
    
    if ( function_exists( 'add_theme_support' ) ) {
        add_filter( 'manage_posts_columns' , 'wpcs_add_thumbnail_columns' );
        add_action( 'manage_posts_custom_column' , 'wpcs_add_thumbnail_columns_data', 10, 2 );
        add_filter( 'manage_pages_columns' , 'wpcs_add_thumbnail_columns' );
        add_action( 'manage_pages_custom_column' , 'wpcs_add_thumbnail_columns_data', 10, 2 );
    }

    This is a very handy code snippet if you use post thumbnail feature very heavily and don’t want to have to edit each post in order to see the thumbnail being used.