Add Login Form To WordPress Sidebar

Adding a login form in your site's sidebar will surely attract your readers to login or register. It's less painful than visiting your WP's login page to login.

Mike Jolley created a great ajax-enhanced login plugin for WordPress, which is available to download at this link. This widget adds a useful login widget which you can use to login from in the sidebar of your WordPress.

How To Install:

• 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.

Usage:

• Simply go to Appearance > Widgets and drag "sidebar login" to the sidebar of your choice.

After login it redirects them back to the page they logged in from. You can contribute to this awesome plugin on GitHub at this link. You can also use this widget on your WP's template with the the_widget() function.

As of writing, you can check a live demo of this widget on my wordpress site at this link. Don't forget to leave a comment.

In next few months, I'll focus on WordPress plugins and tricks. Also, #NowPlaying Started from the bottom by Drake.

Replace Existing Images In WordPress Media Library

You ever tried to replace an existing image from your WordPress. It sucks and takes a lot of time to delete, rename, replace, and upload your images from your file manager. Let's make it easier than ever.

A guy called "mungobbq" created a great plugin, which gives us an option to replace any uploaded file from the media "edit" view.

You can download this plugin at this link, or by searching "Enable Media Replace" on your blog's plugin directory. Below is a (huge) quote from this plugin's official page:

It's simple to replace a file

1. Just replace the file. This option requires you to upload a file of the same type as the one you are replacing. The name of the attachment will stay the same no matter what the file you upload is called.
2. Replace the file, use new file name and update all links. If you check this option, the name and type of the file you are about to upload will replace the old file. All links pointing to the current file will be updated to point to the new file name.

This plugin is very powerful and a must-have for any larger sites built with WordPress.

Display file modification time

There is a shortcode available which picks up the file modification date and displays it in a post or a page. The code is:

[file_modified id=XX format=XXXX]

where the "id" is required and the "format" is optional and defaults to your current WordPress settings for date and time format.

So [file_modified id=870] would display the last time the file with ID 870 was updated on your site. To get the ID for a file, check the URL when editing a file in the media library (see screenshot #3)
If you want more control over the format used to display the time, you can use the format option, so [file_modified id=870 format=Y-m-d] would display the file modification date but not the time. The format string uses standard PHP date() formatting tags.

Add Numbered Page Navigation To WordPress

If your WP blog has a large number of posts, then adding numbered page navigation is a great way to give your readers an easy navigation to your blog's archives. The default WordPress pagination comes with ‘older posts’ and ‘newer posts’ but those look good if your blog has only few articles.

In this tutorial, I'll tell you how to add numbered page navigation to your WordPress, both manually and automatically. Let's get started with automatic method (by using a plugin).

By Using A Plugin:

I recommend you to use this way, since it's easy and much better. Click here to download or search and install WP-PageNavi to your blog. Activate this plugin and that's it.

Custom Method:

You can also manually add numbered page navigation to your WP, just follow these simple steps:

• Go to your WP Dashboard > Appearance > Editor

• Open the functions.php file from the right sidebar.

• Add the following lines of code to your functions.php file and publish.

function pagination($pages = ”, $range = 4)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == ”)
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo “<div class=\”pagination\”><span>Page “.$paged.” of “.$pages.”</span>”;
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo “<a href=’”.get_pagenum_link(1).”‘>&laquo; First</a>”;
if($paged > 1 && $showitems < $pages) echo “<a href=’”.get_pagenum_link($paged – 1).”‘>&lsaquo; Previous</a>”;
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? “<span class=\”current\”>”.$i.”</span>”:”<a href=’”.get_pagenum_link($i).”‘ class=\”inactive\”>”.$i.”</a>”;
}
}
if ($paged < $pages && $showitems < $pages) echo “<a href=\”".get_pagenum_link($paged + 1).”\”>Next &rsaquo;</a>”;
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo “<a href=’”.get_pagenum_link($pages).”‘>Last &raquo;</a>”;
echo “</div>\n”;
}
}

• One-by-one open index.php, archive.php, search.php, and loop.php (only if exist) file from the right sidebar.

• Find ‘older posts’ or ‘older entries’ and replace those lines with the below code.

<?php if (function_exists(“pagination”)) {
pagination($additional_loop->max_num_pages);
} ?>

That's it! You can also add some CSS to make it look better.

• On editor, open the style.css file from the right sidebar.

• Add following CSS add the bottom of style.css file:

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
.pagination a:hover{
color:#fff;
background: #3279BB;
}
.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

That's it! Don't forget to leave a comment.

Split WordPress Posts Into Multiple Pages Using Post Pagination

Post Pagination is a great way to split lengthy posts into multiple pages. It's also a great way to improve your blog's loading time. You can check an example of this trick by clicking here. Last year, I posted post pagination for Blogger, which is way too much different from WordPress post pagination.

It's way too much easy to add Post Pagination on WordPress.On most well-coded themes, all you have to do is paste this code: <!––nextpage––> wherever you want the next page to start. You can also use this plugin to add a nextpage button on your post editor.

But if it's not working on your theme, then just add following php snippet on your single.php loop:

<?php wp_link_pages(); ?>

You can learn more about Post Pagination, and styling this post pagination for a better look at WordPress' official codex page by clicking here.

Deactivating Jetpack's Mobile Theme In WordPress

Last week, I posted an article about Jetpack's Mobile Theme module, which is the easiest way to create a mobile version of your WordPress blog.

Deactivating Jetpack's services is a very simple task, but I for the first time, I was lost in that module page. It's quite easy. You can check it below:

Visit your WordPress blog's Jetpack plugin and scroll down to Mobile Theme module. Just like below

As you can see in above image, Mobile Theme is already activated in my press. Now to deactivate this theme, click on Learn More button, and it'll look something like this:

Well done.Now as you can see in above image, a Deactivate button is now visible. Click on that Deactivate button to deactivate Mobile Theme. That's it.

Also, I'm trying to customize this mobile theme, and will post some tutorials soon.

Adding Favicon To WordPress Admin Panel

As I noted before, I recently migrated my WWE blog from Blogger To WordPress, and I'm having too much fun with all amazing WordPress features and plugins. Soon I'll post an article about some cool WordPress plugins so don't forget to subscribe to BWidgets (from your favorite feed reader or email updates).

Let's get back to topic. After adding a favicon to our WordPress blog, we notice that our favicon is not appearing in our blog's admin panel. It's good to add a favicon to your blog's admin panel. Also, it's more important if your blog's users are also allowed to write for your site.

I tried to add it to my blog's admin panel by editing php files via ftp, and I was lost in those heavy scripted files. But after few minutes, I was successful in changing my blog's admin panel's favicon. So it's start the tutorial:

• Visit your WordPress hosting provides. For example, I bought mine from GoDaddy.

• Now visit your file manager or ftp client. Below is a screenshot of my file manager:

• In my hosting, webroot is my root folder. Upload your favicon image in this webroot folder or skip to next point if your favicon is already uploaded..

• Now visit webroot/wp-admin/admin-header.php. Now, in admin-header.php search for following line:

<title><?php echo $admin_title; ?></title>

• Post following code just below it:

<link rel="shortcut icon" href="FAVICON IMAGE URL" />

• Don't forget to replace FAVICON IMAGE URL with your the link of your favicon. Just like following image:

Now save your file and that's it!! If you still can't see favicon then clear your browser's cache files or try another browser. More WordPress tutorials are coming soon. I'll post new things as soon as I'll explore them :)

Another Way:

JP shared another great way in comments to permanently add a favicon to your WordPress' Admin Panel. He posted following in the comments:

Are you editing Wordpress core files? I strongly discourage that. Any changes you make to core files will be overwritten when you update WordPress. Instead, put something like this into your theme's functions.php file, or into a custom plugin.

add_action('admin_head', 'show_favicon');
function show_favicon() {
echo '<link href="FAVICON IMAGE URL" rel="icon" type="image/x-icon">';
}

Code that you put in either of those two places will survive updates.

How To Remove MobilePress Footer Credits

In last post, I discussed about JetPack Mobile Module and MobilePress. MobilePress is a great WordPress plugin, but it has a credit note in it's footer, which is not preferred by all bloggers, including me. It's hard for beginners to remove these credits, so I'm here to help them. This is every simple, just follow these instructions:

• Visit your hosting provides, for ex. blog is hosted on GoDaddy.

• Login to your hosting account, and click on File Manager/FTP.

I'm not sure about yours, but my GoDaddy powered file manager looks something like this:

• Now in your File Manager, you webroot is your home root. Now visit following root: webroot / wp-content / plugins / mobilepress / themes / default / footer.php

• In footer.php, find and delete following line:

<p>Powered By <a href="http://wordpress.org">WordPress</a> and <a href="http://mobilepress.co.za">MobilePress</a></p>

• Save your footer.php file, and that's it. You must admit that it was easy.

Don't forget to leave a comment :)

Create A Mobile Version Of Your WordPress Blog

Recently, I migrated my WWE News blog from Blogger to WordPress, and because of that lots of WordPress tutorials are on their way.

Earlier today, I shared a tutorial about Create A Mobile Version Of Your Blogger Blog, and now it's time for WordPress users. Creating a mobile friendly site is a great idea to gain some extra views. Also, it'll be easy for your users to access a small mobile version of your site.

There are lots of ways to create a mobile version of your WordPress site, and I'll share two best of them. Both are totally free. Here we go:

By Using Jetpack:

This is a very basic thing, and you can't customize this. Jetpack is a WordPress plugin that supercharges your self-hosted WordPress site with the awesome cloud power of WordPress.com. You can install Jetpack by clicking here.

Jetpack was pre-installed on my hosting. Follow these instruction to enable mobile site powered by Jetpack:

• Install Jetpack from your WordPress or from this link.

• After installing, activate this plugin and visit Jetpack tab:

• On Jetpack tab, scroll down a bit and find Mobile Theme option.

• Click on Activate, and that's it.

Seriously, Jetpack is a great plugin but Mobile Theme by Jetpack really sucks. So I recommend you to deactivate Jetpack's Mobile Theme and use second option. However, if you're using Jetpack then your visitors by mobile will see a simple mobile version of your site.

By Using MobilePress:

MobilePress is a plugin for WordPress that renders a mobile friendly version of your WordPress website or blog. It allows for custom themes and a few other mobile friendly settings. You can install MobilePress by clicking here. Preview of this tutorial is also a MobilePress site. Here is how to use MobilePress:

• Install MobilePress from your WordPress or from this link.

• Activate MobilePress plugin, and that's it.

You can easily view your mobile theme in a web browser by visiting http://www.yoursite.com/?mobile.

Remember, to view your normal blog theme again, simply visit http://www.yoursite.com/?nomobile.

That's it for this time. In future, I'll discuss more about MobilePress and Jetpack.

Create A Mobile Version Of Your Blogger Blog

It's 2013, almost every teen is using a mobile phone to access internet. Even I surf tons of wap pages on my Android everyday. Creating a mobile friendly site is a great idea to gain some extra views. Also, it'll be easy for your users to access a small mobile version of your site.

In this tutorial, I'll show you how to create a mobile friendly version of your Blogger blog. You can check mobile version of BWidgets by clicking here. We're going to do this tutorial in three simple steps. First step is important, while second step is optional, and third step is only for custom domain blogs.

Creating A Mobile Version:

There are lots of sites, which offers you to create free mobile site, and for that they put ads on your site, which totally sucks. However, some premium sites give you full access, but as I said they are premium.

We don't need a stinking service to create a mobile version of our site. We're going to use Blogger's mobile template for our site, which is best option. Blogger provides lots of amazing mobile templates for us. Some people don't use Blogger mobile template because they are ugly but that's not true. Click here to check our mobile site, which looks totally flawless. So here is how to turn on mobile template:

• Go To Blogger > Template > Click on Mobile option > Turn on mobile template and choose a theme for your blog:

After turning this option, you can access your mobile blog at http://yourblog.blogspot.com/?m=1

That's it for first step. Now, you can leave this tutorial here or you can check next step, if you want to remove Powered By Blogger option from your mobile template.

Removing Credits:

In February, we discovered a way to remove this attribution widget from both mobile and default template. ithout wasting any time, let's get started:

• Go To Blogger > Template > Edit HTML > Proceed

• Find and remove following code from your template:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

• Find </body> in your template and just above it paste following code:

<div style='display:none;'>
<b:section class='hiddenbar' id='hiddenbar' preferred='no'>
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
</b:section>
</div>

• Save your template, it's done.

Let me explain this, instead of removing attribution widget, we hid this widget with css. If you only add mobile='no' property in your attribution, instead of this code, it'll only remove this widget from your mobile template.

If you're using free Blogger domain then this tutorial is over for you, but if you're using custom domain then don't forget to check next step.

Create A Mobile URL:

Time for a cool step. If you're using a custom domain, then why not give our mobile website a new address? I mean it'll be easy for your visitors to access your site from m.yoursite.com. In this step, I'll only explain what to do.

Visit your domain registrar, then visit your domain control panel and choose domain/sub-domain forwarding/redirecting. Now redirect m.yourdomain.com to http://www.yourdomain.com/?m=1.

If you're using GoDaddy, then you can learn more about domain forwarding at this link. As of writing, mobile url of BWidgets is not available, since our domain registrar doesn't provide this service, but soon I'll transfer my domain to GoDaddy.

Hope this tutorial helped you. Don't forget to leave a comment.

Configure Windows Live Writer For Blogger

Windows Live Writer is a great WYSIWYG authoring software, and is currently compatible with Windows Live Spaces, SharePoint blogs, Blogger, LiveJournal, TypePad, WordPress, and all blogs that support RSD.

With WLW (Windows Live Writer), you can easily write and publish your posts to your blogs. WLW's post editor is very smooth, easy, and flexible to use. In this post, I'll teach you how to setup your Blogger hosted blog with WLW. It's easy, just follow these simple steps:

• First visit this link and install Windows Live Writer on your device. It's fast and easy!

• After installing, open Windows Live Writer, which may look something like this:

• To configure your Blogger blog, click on "Other blog service" option on your Live Writer (As Image above), and click on Next.

• On next window, put your blog's web address, your Blogger username, and password. You can also put your free Blogger blog address there. Click on Next.

• After clicking on next, it'll take a bit time to configure your Blogger (Based on your connection). After loading, you'll see following confirmation screen:

• Enter your blog's nickname, which is nothing more than your blog's name. Finally, click on Finish button and it's done!

Now, you'll see Windows Live Editor's post editor, and you can start posting now! Don't forget to leave your responses in the comment section below...