Add Post Formats To WordPress Theme

It's school holiday for five days in a row, so as a part of the second day of this holiday, I was doing some random stuff around the internet, such as listing to new songs, reading about upcoming Next-Gen gaming consoles, browsing troll memes, blaming Justin Bieber, and more.

So in this busy day I took some time to edit my WordPress website for new feature. I did some thing new (at least for me) with some post formats, and I'm going to share it here on BWidgets. So as a part of that tutorial, here's the basic thing to learn before I post that article, which is adding post format support to your WordPress theme.

Post Formats is a theme feature introduced with the WordPress 3.1 release. It's piece of meta info that can be used by a theme to customize its post structure. If you ever used Tumblr, then you'll love this feature.

As of now, WordPress supports following post formats:

• aside: Typically styled without a title. Similar to a Facebook note update.

• gallery: An image gallery. This type of post will likely contain an image gallery using shortcode and plugins.

• link: A link to an external webpage.

• image: A single image. Yeah, just a single image.

• quote: A quatation. My favorite quote is: Your arms are just too short to box with the God. - CM Punk to Dwayne "The Rock" Johnson

• status: A short status update, similar to a tweet.

• video: A single video or several videos. You can upload or embed a video to the post.

• audio: An audeo file, likely if you run a Podcast.

• chat: A chat transcript.

Add following snippet to your theme's functions.php file to add post format support to your post:

add_theme_support( 'post-formats', array( 'aside', 'chat','gallery','image','link', 'quote', 'status', 'video', 'audio' ) );

You can also add post format support to Page and custom post types:

// add post-formats to post_type 'page'
add_post_type_support( 'page', 'post-formats' );

// add post-formats to post_type 'my_custom_post_type'
add_post_type_support( 'my_custom_post_type', 'post-formats' );

Remove Default Widget Bundle CSS From Blogger

If you're a Blogger template designer, then this article is very very helpful for your future designs. If you're a designer, then you probably know about two default Blogger stylesheets- widget_css_bundle.css and widget_css_2_bundle.css. Becaue they make it more diffecult for you to design your template.

Blogger automatically adds the following code in your Blogger template:

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css' />

So it's time for your to remove there stylesheets from your Blogger template. If you don't know above there stylesheets, then don't follow this tutorial. Removing this code maybe can make your template destroyed, if you use official widgets from Blogger.

We are not really removing this code from our template, but this trick will make that code ignored by your browser. This tutorial is just converting that code to HTML comments, thanks to Damzaky for this trick.

• Open Blogger > Template > Edit HTML, proceed, then CTRL+F this code: <b:skin><![CDATA[

• If you have found that code, in below that code you may found your CSS, so just copy all the CSS to a notepad or anywhere because we need this code later in this tutorial.

• Then the remaining code is  <b:skin><![CDATA[    ]]></b:skin>

• Replace above code with following:

&lt;style type=&quot;text/css&quot;&gt;

&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

• Then post following code just above the </head> of your template:

<style type='text/css'>

YOUR CSS FROM NOTEPAD

</style>

• In above code, replace the YOUR CSS FROM NOTEPAD from all CSS from your notepad that we copied earlier.

• Save your template.

That's it.

Change WordPress Login Logo Without Plugins

Above is a screen shot of the login page of my WordPress website. As you can see in above image, I'm using my website's logo in the login page instead of WordPress logo. And it looks pretty good.

If you're running a website with public registration or a client website, then you should replace the default logo with your own. There are lots of plugins to change the custom logo in some easy steps. However, we're going to do this without any plugin.

Add this snippet to the functions.php file of your active theme:

<?php
function custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('CUSTOM-LOGO-URL.png') !important; }
    </style>';
}
add_action('login_head', 'custom_login_logo');
?>

Replace the CUSTOM-LOGO-URL.png in above code with url of your custom login logo. That's it.

How To Set Minimum Word Count For WordPress Posts

If you're running a WordPress site with some co-authors then it's really important for you to focus on your content's quality. Quality content is the ultimate key to success in blogging. Most of bloggers write like a monkey in the very beginning; I was also in that league when I started this blog.

Since recent Google updates you can no longer post an article with some couple of words and expect the post to rank highly for the keywords in the title. Now you need more content in the entire post with a lot of different keywords.

With WordPress you can create a function to make sure that you have a minimum number of words in your post.

By adding following code to your functions.php file, you can check if the post is under 500 words and if it is you can end the publishing process so the post will not be published:

function minimum_number_words($content)
{
    global $post;
    $content = $post->post_content;
    if (str_word_count($content) < 500 )
    wp_die( __('The current post is below the minimum number of words, it must be over 500 words.') );
}

How To Set Minimum Comment Length In WordPress

Most of us turn on comments in our sites to start a discussion and reach out more people. But some people comment just to get a link back to their own site. Their comments will consist of things like "nice post", "thanks" and all stuff.

If you're running a big website, then moderating these crappy comments will waste a lot of time. So how about setting a minimum character count length on your comments.

Add following snippet to your functions.php file:

add_filter( 'preprocess_comment', 'minimal_comment_length' );

function minimal_comment_length( $commentdata ) {
    $minimalCommentLength = 20;

    if ( strlen( trim( $commentdata['comment_content'] ) ) < $minimalCommentLength )
        {
        wp_die( 'All comments must be at least ' . $minimalCommentLength . ' characters long.' );
        }
    return $commentdata;
}

Save your file. That's it. You can also replace 20 in the above code with your custom value.

Google Adsense Stats Plugin For WordPress

Most of us use Google Adsense as our primary source of earning. Believe me, they're the reason of me running a whole network of websites. So I found a great plugin to display stats of your Adsense in the backend of your WordPress website.

The description of this widget reads, "Earnings Dashboard will display your Google Adsense earnings and related reports inside your WordPress Blog, on your Administration Dashboard."

You can download this plugin from this link.

How To Install And Activate This Plugin:

• Click here and download this plugin. Visit your WordPress' plugin page and install this plugin.

• You can also install this plugin from your WP's plugin directory.

• After installing, activate the plugin through the 'Plugins' admin menu in WordPress.

• Open the plugin configuration page, which is located under Settings > Earnings Dashboard (optionally enter your API Key, Client Secret and Client ID).

• Authorize the application using the 'Authorize Application' button

• Go back to the plugin configuration page, which is located under Settings > Earnings Dashboard to update the final settings.

That's it.

Bulk Remove Featured Images From WordPress Posts

By default, there's no such option in WordPress to remove featured image from all posts at once. You can only remove the featured image by editing each post and removing it manually. It can take a lot of time. For example, it's almost impossible to manually remove featured images from my WWEFansNation.com with more than 4,000 posts. But that's all right cuz we're here to solve this problem.

WPBeginner found a great way to remove (unset) featured images from all posts in bulk. It's worth nothing that this code will only remove the featured image from the posts, and the image will not be deleted from your site.

Copy & paste following code in your theme's functions.php file:

global $wpdb;

$attachments = $wpdb->get_results( "
     SELECT *
     FROM $wpdb->postmeta
     WHERE meta_key = '_thumbnail_id'
" );

foreach ( $attachments as $attachment ) {
    wp_delete_attachment( $attachment->meta_value, true );
}

$wpdb->query( "
    DELETE FROM $wpdb->postmeta
    WHERE meta_key = '_thumbnail_id'
" );

Important: Please remove this code immediately after saving your functions.php file. You only need to run this code once, there's no need to keep this code in your theme.

Automatically Set The Featured Image In WordPress

Almost every WordPress theme developer is using WordPress' featured post image option in their latest themes, and it's a very great option. You can pick any image for your article before publishing

But ofter we forget to pick a featured image for out posts. Also there's no way to pick a featured image in WordPress' smartphone application. So today we're going to automatically set the featured image.

This snippet will automatically set the first image of your post as the featured image of the post. Note, you can always go and set another image as the featured image if you want to.

Add following snippet to your functions.php file:

function wpforce_featured() {
          global $post;
          $already_has_thumb = has_post_thumbnail($post->ID);
              if (!$already_has_thumb)  {
              $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
                          if ($attached_image) {
                                foreach ($attached_image as $attachment_id => $attachment) {
                                set_post_thumbnail($post->ID, $attachment_id);
                                }
                           } else {
                                set_post_thumbnail($post->ID, '414');
                           }
                        }
      }  //end function
add_action('the_post', 'wpforce_featured');
add_action('save_post', 'wpforce_featured');
add_action('draft_to_publish', 'wpforce_featured');
add_action('new_to_publish', 'wpforce_featured');
add_action('pending_to_publish', 'wpforce_featured');
add_action('future_to_publish', 'wpforce_featured');

There is one more cool option in this code. If you don't have an image in the post, the above code will let you set a default featured image as well. You must edit the attachment ID according to your WordPress site. The example above uses the attachment ID "414"

Credits: WPForce

Move WordPress Admin Bar To The Bottom

Ever wanted to move your WordPress blog's Admin Bar to bottom of the page? If yes, then this is the right place for you. It sounds like a telemall commercial, lol. With just a bit CSS you can change it. So instead of editing the core CSS files, we'll add some CSS to your functions.php file.

Put this little snippet to a Plugin or in the functions.php of your theme:

 function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body {
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

WordPress Style Admin Bar For Blogger

First of all, this is the most foolish Blogger widget on this entire blog. This widget is very useful but still a dumb idea from me.Still it's an awesome navigation bar for Blogger admins.

This widget is inspired from the WordPress Admin Bar menu and Blogger Admin Control Panel widget. This widget will be only visible to blog admins. It'll provide you some quick actions in the front end of your Blogger blog. Let's get started:

Locate Your Unique Blog ID Number:

To add this widget, it's important to find your unique blog ID number. It's really easy. Just open your Blog's dashboard (overview, posts, and backend other pages) and copy your unique blog ID from address bar.

For example, your ID will look something like this:

http://www,.blogger.com/blogger.g?blogID=1415638240907948#posts

Red part of the above URL is my blog ID. Visit your blog and copy your unique blog ID.

Add Admin Bar To Blogger Template:

To add the control panel to your Blogger template, go to Template > Edit HTML. Search and add following code just above </body>:

<style>
#wpadminbar {
    direction: ltr;
    color: rgb(204, 204, 204);
    font: 400 13px/28px sans-serif;
    height: 28px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}

#wpadminbar .quicklinks {
    border-left: 1px solid transparent;
}

#wpadminbar div {
    outline: 0px none;
}

#wpadminbar * {
    height: auto;
    width: auto;
    margin: 0px;
    padding: 0px;
    position: static;
    text-transform: none;
    letter-spacing: normal;
    font: 400 13px/28px sans-serif;
    color: rgb(204, 204, 204);
    text-shadow: 0px -1px 0px rgb(68, 68, 68);
    -moz-box-sizing: content-box;
    transition: none 0s ease 0s;
}

#wpadminbar {
    direction: ltr;
    color: rgb(204, 204, 204);
    font: 400 13px/28px sans-serif;
}

#wpadminbar .quicklinks ul {
    text-align: left;
}

#wpadminbar .ab-sub-wrapper, #wpadminbar ul, #wpadminbar ul li {
    background: none repeat scroll 0px 0px transparent;
    clear: none;
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
    position: relative;
    text-indent: 0px;
    z-index: 99999;
}

#wpadminbar .quicklinks > ul > li {
    border-right: 1px solid rgb(85, 85, 85);
}

#wpadminbar ul li {
    background: none repeat scroll 0px 0px transparent;
        background-color: transparent;
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: 0px 0px;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: auto auto;
    clear: none;
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
    position: relative;
    text-indent: 0px;
    z-index: 99999;
}
#wpadminbar li {
    float: left;
}

#wpadminbar .quicklinks > ul > li > a, #wpadminbar .quicklinks > ul > li > .ab-empty-item {
    border-right: 1px solid rgb(51, 51, 51);
}
#wpadminbar .quicklinks a, #wpadminbar .quicklinks .ab-empty-item, #wpadminbar .shortlink-input {
    height: 28px;
    display: block;
    padding: 0px 12px;
    margin: 0px;
}
#wpadminbar a, #wpadminbar a:hover, #wpadminbar a img, #wpadminbar a img:hover {
    outline: 0px none;
    border: 0px none;
    text-decoration: none;
    background: none repeat scroll 0px 0px transparent;
}

#wpadminbar .ab-top-secondary {
    float: right;
    background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}

#wpadminbar .quicklinks .ab-top-secondary > li {
    border-left: 1px solid rgb(51, 51, 51);
    border-right: 0px none;
    float: right;
}
#wpadminbar ul li:last-child, #wpadminbar ul li:last-child .ab-item {
    border-right: 0px none;
    box-shadow: none;
}

#wpadminbar #wp-admin-bar-search .ab-item {
    background: none repeat scroll 0% 0% transparent;
}
#wpadminbar #wp-admin-bar-search .ab-item {
    padding: 0px;
}
#wpadminbar .quicklinks .ab-top-secondary > li > a, #wpadminbar .quicklinks .ab-top-secondary > li > .ab-empty-item {
    border-left: 1px solid rgb(85, 85, 85);
    border-right: 0px none;
}
#wpadminbar ul li:last-child, #wpadminbar ul li:last-child .ab-item {
    border-right: 0px none;
    box-shadow: none;
}

#wpadminbar #adminbarsearch {
    height: 28px;
    padding: 0px 2px;
}

#wpadminbar #adminbarsearch .adminbar-input {
    font: 13px/24px sans-serif;
    height: 24px;
    width: 24px;
    border: 0px none;
    padding: 0px 3px 0px 23px;
    margin: 0px;
    color: rgb(204, 204, 204);
    text-shadow: 0px -1px 0px rgb(68, 68, 68);
    background-color: rgba(255, 255, 255, 0);
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
    background-position: 3px 2px;
    background-repeat: no-repeat;
    outline: 0px none;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    box-shadow: none;
    -moz-box-sizing: border-box;
    transition-duration: 400ms;
    transition-property: width, background;
    transition-timing-function: ease;
}

#wpadminbar .ab-icon {
    position: relative;
    float: left;
    width: 16px;
    height: 16px;
    margin-top: 6px;
}

#wp-admin-bar-comments > .ab-item .ab-icon {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
    background-position: -1px -134px;
    background-repeat: no-repeat;
}

#wpadminbar #wp-admin-bar-new-content > .ab-item .ab-icon {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
    background-position: -2px -182px;
    background-repeat: no-repeat;
}

#wpadminbar a:focus, #wpadminbar a:active, #wpadminbar input[type="text"], #wpadminbar input[type="password"], #wpadminbar input[type="number"], #wpadminbar input[type="search"], #wpadminbar input[type="email"], #wpadminbar input[type="url"], #wpadminbar select, #wpadminbar textarea, #wpadminbar div {
    outline: 0px none;
}

#wpadminbar #adminbarsearch .adminbar-button {
    display: none;
}

#wpadminbar .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar .ab-top-menu > li > .ab-item:focus, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
    color: rgb(250, 250, 250);
    background: linear-gradient(to top, rgb(58, 58, 58), rgb(34, 34, 34)) repeat scroll 0% 0% rgb(34, 34, 34);
}
#wpadminbar .quicklinks > ul > li > a, #wpadminbar .quicklinks > ul > li > .ab-empty-item {
    border-right: 1px solid rgb(51, 51, 51);
}

#wpadminbar #adminbarsearch .adminbar-input:focus {
    color: rgb(85, 85, 85);
    text-shadow: 0px 1px 0px rgb(255, 255, 255);
    width: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    cursor: text;
}
</style>

<span class='item-control blog-admin'>
<div id="wpadminbar" class="no-grav" role="navigation">   
            <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
                <ul id="wp-admin-bar-root-default" class="ab-top-menu">
        <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://draft.blogger.com/blogger.g?blogID=BlogIdNumber#overview">BWidgets.com</a>        </li>
        <li id="wp-admin-bar-comments"><a class="ab-item" href="http://www.blogger.com/blogger.g?blogID=BlogIdNumber#comments" title="Moderate Comments"><span class="ab-icon"></span></a>        </li>
        <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a>        </li>
        <li class="menupop"><a class="ab-item" aria-haspopup="true" href="http://www.blogger.com/logout" title="Logout"><span></span><span class="ab-label">Logout</span></a>        </li>
       
       
        </ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
        <li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="/search" method="get" id="adminbarsearch"><input class="adminbar-input" id="adminbar-search" name="q" value="" maxlength="150" type="text"><input class="adminbar-button" value="Search" type="submit"></form></div>        </li>
       
       
        </ul>            </div>
</div>
</span>

Replace all instances of BlogIdNumber with your unique BlogID. Save your template & that's it!