Showing posts with label WordPress. Show all posts
Showing posts with label WordPress. Show all posts

Sunday, 1 June 2014

WordPress Is Not The Only Way People Can Create A Blog


One of the most popular methods in recent memory that people have used to create blogs is WordPress, which is a software platform that novice and experts can use to develop blogs for a variety of purposes. There are several reasons why WordPress is a popular method to develop blogs; however, one of the main reasons is based on its own popularity because people are able to find many features and themes that are aimed at WordPress users. Therefore, it is relatively easy for most people to find a WordPress theme or features to meet their purpose for a blog.

Even though WordPress provides many features and themes along with a platform that is reliable, many people prefer to use other methods for creating blogs. One of the other methods that people use is HTML. For people unfamiliar with HTML, which is short for HyperText Markup Language, it is the standard markup language used to create web pages.

When people refer to blogs, many people think that it is different than a website. However, a blog is basically a website. In general terms, a website is a group of related web pages that are served from a single domain. The word blog is used instead of the more technically correct term website because the word blog is a better reference point to the purpose of a blog, which is to chronicle specific activities on a daily basis.

For people interested in using HTML to create a blog, there are certain things that people should consider such as web design and SEO. The reason that web design and SEO are important regarding the use of HTML is because both are necessary to create a good blog. Web design commonly referred to as website design and SEO commonly referred to as Search Engine Optimization take time to learn properly; however, once the skills and techniques are learned, people can create high quality blogs that can match the look or features of any WordPress blog.

Additionally, HTML code is the backbone for many WordPress themes. Therefore, as people learn the basics of HTML, people can look at the core HTML code behind WordPress themes to make modifications to WordPress themes based on the HTML code. Also, people can view the HTML code for current WordPress themes to think of ways to add various capabilities to their HTML blogs.

Regarding website design, it is the primary component of a good website. In addition, website design encompasses the appearance, functions, and capabilities of a website, and search engine optimization concerns the structure of a website in relation to its ability to do well in search engine results for specific keywords. As people learn website design and search engine optimization, they are able to create blogs that are visibly appealing, efficient, perform well in search engine results, and provide a good user experience.

Currently WordPress is a popular method that people use to create blogs. However, HTML is also a popular method, and HTML is also a core component of WordPress themes. In relation to blogs, HTML is very important. The people who decide to use HTML to create their blogs not only have a popular method at their disposal, but these people can use their HTML knowledge to modify existing WordPress blogs that contain HTML code.

Author - To learn more about web design, visit the blog of Brisbane agency Orange Digital. There you will find posts on responsive web design, mobile web optimisation and search engine tactics.

Tuesday, 3 December 2013

How To Enable Jetpack Stats On MobilePress

Almost every WordPress admins uses WordPress' Jetpack plugin on their site to connect and use WordPress.com feature on their self-hosted WordPress. There are a lot of great modules in the Jetpack plugin, but Jetpack Stats module is my personal favorite.

MobilePress is also a well known plugin to create a mobile friendly version of your WordPress. It allows custom themes and a few other mobile friendly settings. But Jetpack's stats module only tracks the desktop version of your site, not the MobilePress version.

Don't worry about this, as I have found a way to enable Jetpack's stats module on our MobilePress. Here is how:

  • First of all, enable Jetpack stats module on your WordPress. Now visit your WordPress website as a guest (without signing in).
  • Now right click & click on View Page Source to view the source code of your current page, and search stats.wordpress.com in the source code page. You'll find a code similar to this:

<script src="http://stats.wordpress.com/e-201349.js" type="text/javascript"></script>
<script type="text/javascript">
st_go({v:'ext',j:'1:2.6',blog:'YOURUNIQUEBLOGID',post:'0',tz:'-5'});
var load_cmc = function(){linktracker_init(YOURUNIQUEBLOGID,0,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script>

  • Copy your unique blog id from your unique Jetpack stats snippet and place it in the following code:

<script src="http://stats.wordpress.com/e-201341.js" type="text/javascript"></script><script type="text/javascript">
st_go({v:'ext',j:'1:2.5',blog:'YOURUNIQUEBLOGID',post:'<?php the_ID(); ?> ',tz:'-4'});
var load_cmc = function(){linktracker_init(YOURUNIQUEBLOGID,0,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script>

  • Now paste the above code in the footer.php (webroot / wp-content / plugins / mobilepress / themes / default / footer.php) file of your current MobilePress theme. That's IT!!

As you can see, there's only one difference in the above two codes. In the second code, I have replaced the current post id with <?php the_ID(); ?>, otherwise your Jetpack wouldn't count views for specific page, and all your visits would be counted as Homepage views or of a specific post.

Saturday, 30 November 2013

Set WordPress Permalinks Settings From functions.php

Permalinks are the permanent URLs to your individual WordPress or blog posts, as well as pages and other lists of blog postings. It's very important to have an easy and beautiful permalinks structure for your site, as it's a part of optimizing your site for SEO.

The default WordPress permalinks structure looks something like this:

http://www.whatever.com/?p=316

And I hate this as much as you all do. However, you can change the default structure of your blog permalinks in the settings of your WordPress blog. But we can also change the default permalinks structure from our functions.php file.

It's pretty easy, just add following snippet to your functions.php file:

<?php
// set permalink
function set_permalink(){
    global $wp_rewrite;
    $wp_rewrite->set_permalink_structure('/%year%/%monthnum%/%postname%/');
}
add_action('init', 'set_permalink');
?>

Use this snippet to change the permalink settings from your functions.php file instead of in the admin area. You can replace the red area in above code with following structure codes:

%year%
    The year of the post, four digits, for example 2004

 %monthnum%
    Month of the year, for example 05

 %day%
    Day of the month, for example 28

 %hour%
    Hour of the day, for example 15

 %minute%
    Minute of the hour, for example 43

 %second%
    Second of the minute, for example 33

 %post_id%
    The unique ID # of the post, for example 423

 %postname%
    A sanitized version of the title of the post (post slug field on Edit Post/Page panel). So “This Is A Great Post!” becomes this-is-a-great-post in the URI.

 %category%
    A sanitized version of the category name (category slug field on New/Edit Category panel). Nested sub-categories appear as nested directories in the URI.

 %author%
    A sanitized version of the author name.

Thursday, 28 November 2013

Disable Auto Updates In WordPress

WordPress 3.7 came out with a new automatic background update feature in an effort to promote better security. By the default, only minor releases and translation file updates are enable. But we could manually disable or enable anything we want.

Just put following codes to your wp-config.php file to disable/enable the updates:

To specifically enable development (nightly) updates, use the following:

add_filter( 'allow_dev_auto_core_updates', '__return_true' );

To specifically disable minor updates, use the following:

add_filter( 'allow_minor_auto_core_updates', '__return_false' );

To specifically enable major updates, use the following:

add_filter( 'allow_major_auto_core_updates', '__return_true' );

Plugins, themes and translation file:

Automatic plugin and theme updates are disabled by default.

To enable automatic updates for plugins, use the following:

add_filter( 'auto_update_plugin', '__return_true' );

To enable automatic updates for themes, use the following:

add_filter( 'auto_update_theme', '__return_true' );

Automatic translation file updates are already enabled by default, the same as minor core updates.  To disable translation file updates, use the following:

add_filter( 'auto_update_translation', '__return_false' );

Core Updates:

To disable all core-type updates only, use the following:

add_filter( 'auto_update_core', '__return_false' );

All Updates

To completely disable all types of automatic updates, core or otherwise, add the following to your wp-config.php file:

define( 'AUTOMATIC_UPDATER_DISABLED', true );

You can also disable all automatic updates using the following filter:

add_filter( 'automatic_updater_disabled', '__return_true' );

Hope this would help you. Source: WordPress Codex

Saturday, 23 November 2013

Add Extra CSS In WordPress Posts With Custom Fields

I posted last couple of WordPress articles on BWidgets about the amazing power of custom fields. This is article is also about another great use of custom fields.

Sometimes, a specific post needs to be more styles with some custom CSS codes. We all know that we can directly write our CSS code in post editor, but that's not very clean way to do this. So, we're going to do this with custom fields.

This is clean, easy, and a bit fun as well. Yea, these things makes me feel like James Bond 007. Here we go:

First, we need to add following code to your WordPress theme's header.php file:

<?php if (is_single()) {
    $css = get_post_meta($post->ID, 'css', true);
    if (!empty($css)) { ?>
        <style type="text/css">
        <?php echo $css; ?>  
        </style>
    <?php }
} ?>

Save the file. Once saved, when you're writing a post which requires some custom extra CSS styling, you'll just have to put your custom CSS styles in a custom field named css.

Friday, 22 November 2013

How To Get Custom Fields Outside The Loop In WordPress

Custom fields are one of the most useful and powerful feature in WordPress and are used on many WordPress-powered blogs. In this post, I'm going to show you how to get custom fields values outside the loop.

Thanks to Paul Whitehead for this trick. I want to share link to his website, but the website is dead right now.

Simply post following snippet anywhere in your WordPress site. Don’t forget to replace customField on line 4 by the name of the custom field you want to display.

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'customField', true);
?>

Wednesday, 20 November 2013

How To Get Value Of A Specific Custom Field In WordPress

WordPress allows us to add custom fields to a our posts, which adds extra information, which is known as meta-data. But we can do a lot more there custom fields. For example, I embedded a video in this post with the use of custom fields.

More of newbies gets confused when it comes to use custom fields. But they're not that complicated, at least the basic use of these fields.

Here's how you can get value of a specific custom field in your WordPress posts:

<?php echo get_post_meta($post->ID, 'mood', true); ?>

"mood" would be ID value of custom field. That was simple.

And here's how to display custom field only if exists:

<?php
    $url = get_post_meta($post->ID, 'snippet-reference-URL', true);

    if ($url) {
        echo "<p><a href='$url'>Reference URL</a></p>";
    }
?>

Sunday, 17 November 2013

Using A Different Post Template For Posts Within A Specific Category

On Thursday I posted an article about using different post template for posts formats, but now it's time for doing the same thing with categories, instead of formats. You can use this trick in your WordPress to create different type of posts, such as portfolio items.

We discussed everything previously, so let's get into this trick:

Using A Different Post Template:

In this tutorial, we'll create a different post template for the cat-1 category. We'll use multiple single.php files to make it more easy and customizable.

Create a single.php file for your category. We're going to name it single-cat-1.php. You can also copy your single.php file to this template and make some changes that you want in the video template.

Upload single-cat-1.php to the root of your current theme. Same place where single.php file is located.

Okay, so now we'll tell WordPress to use single-cat-1.php template for the posts within video category. Add following to your theme's functions.php file:

add_action('template_include', 'load_single_template');
  function load_single_template($template) {
    $new_template = '';

    // single post template
    if( is_single() ) {
      global $post;

      // 'cat-1' is category slugs
      if( has_term('cat-1', 'category', $post) ) {
        // use template file single-template-cat-1.php
        $new_template = locate_template(array('single-cat-1.php' ));
      }

    }
    return ('' != $new_template) ? $new_template : $template;
  }

In above code, replace cat-1 is the slug of your category, and single-cat-1.php is your custom post template file. Save the file. That's it.

Thursday, 14 November 2013

Using A Different Post Template For Posts Formats In WordPress

Post Formats is a theme feature which was introduced with the WordPress 3.1 release. It gave us a new feature to style posts based on its format. If you ever used WordPress' default themes, then you might know about their different post templates based on the post format. So it's time for you to style your posts based on its format. Here's a demo of this trick from my own WordPress site:

This is a simple post.

This is a video post with a different template.

Add Post Format Support To Your WordPress Theme:

Before starting this tutorial, it's important for you to add support for post formats in your current WordPress theme. If this section is available in your post editor then you can skip this step:


If not, then follow this tutorial.

Using A Different Post Template:

In this tutorial, we'll create a different post template for the Video format. Most of developers uses a single post template file for all different format. But we'll use multiple single.php files to make it more easy and customizable.

Create a single.php file for your post format (we're using Video). We're going to name it single-video.php. You can also copy your single.php file to this template and make some changes that you want in the video template.

Upload single-video.php to the root of your current theme. Same place where single.php file is located.

Okay, so now we'll tell WordPress to use single-video.php template for the posts with video format. Add following to your theme's functions.php file:

add_action('template_include', 'load_single_template');
  function load_single_template($template) {
    $new_template = '';

    // single post template
    if( is_single() ) {
      global $post;

      // template for post with video format
      if ( has_post_format( 'video' )) {
        // use template file single-video.php for video format
        $new_template = locate_template(array('single-video.php' ));
      }

    }
    return ('' != $new_template) ? $new_template : $template;
  }

Save the file. That's it.

Now just publish a post with video format & see the magic. You can do the same with every post format. On a related note, I'll also share the same trick with categories, instead of formats.

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' );

Monday, 11 November 2013

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.

Sunday, 10 November 2013

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.') );
}

Friday, 8 November 2013

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.

Thursday, 7 November 2013

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.

Tuesday, 5 November 2013

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.

Monday, 4 November 2013

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

Sunday, 3 November 2013

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' );

Saturday, 2 November 2013

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!

Thursday, 31 October 2013

Stop WordPress From Compressing JPEG Images

According to some blogs, WordPress automatically compress your JPEG images to 90% quality, but this information is false.

This only happens on the resized images WordPress creates. The original uploaded image is saved unaltered, as the "full" size.

Anyways, you can stop compressing of JPEG images by putting following code into your functions.php file:

add_filter('jpeg_quality', function($arg){return 100;});
add_filter( 'wp_editor_set_quality', function($arg){return 100;} );

Tuesday, 29 October 2013

Remove Author Prefix From Slug In WordPress


Earlier this month I shared an article about changing WordPress Author URL Slug. That code will change the default yoursite.com/author/name to yoursite.com/profile/name.

Now this trick will remove the author prefix from the author slug. To clarify, this snippet will help you turn: yoursite.com/author/name/ into: yoursite.com/name/.

Just add following snippet to your functions.php file:

// The first part //
add_filter('author_rewrite_rules', 'no_author_base_rewrite_rules');
function no_author_base_rewrite_rules($author_rewrite) {
    global $wpdb;
    $author_rewrite = array();
    $authors = $wpdb->get_results("SELECT user_nicename AS nicename from $wpdb->users");   
    foreach($authors as $author) {
        $author_rewrite["({$author->nicename})/page/?([0-9]+)/?$"] = 'index.php?author_name=$matches[1]&paged=$matches[2]';
        $author_rewrite["({$author->nicename})/?$"] = 'index.php?author_name=$matches[1]';
    }  
    return $author_rewrite;
}

// The second part //
add_filter('author_link', 'no_author_base', 1000, 2);
function no_author_base($link, $author_id) {
    $link_base = trailingslashit(get_option('home'));
    $link = preg_replace("|^{$link_base}author/|", '', $link);
    return $link_base . $link;
}

Props to WP-Snippet for this amazing tricks.

Popular Posts

 
Powered by Blogger.