Tuesday, 25 June 2013

How To Add Polls To WordPress



Polls are a great way to find out what your readers thinks about a specific thing or topic. Because your reader's opinion really matters, or maybe we just say that, but polls are a must have feature for all topic based sites.

By using polls, you can know your reader's interest, opinion, and many things. It all depends on how you use them. It's WordPress and you can also use polls in your posts, sidebars, or on an poll archive page.

So there are lots of plugins to add free polls on your WordPress site, but which one is best for us? It's not a really hard question - you can use WP Polls, which is free and fantastic. Official description of WP Polls reads:

Adds an AJAX poll system to your WordPress blog. You can also easily add a poll into your WordPress's blog post/page.

It's very great plugin to use, and you can also add a poll into your blog's posts, pages, or on sidebar widgets. It's extremely customizable via templates and css styles. It also gives you an option to set a Polls Archive page for your site to display all our current and old polls. Let's just get started with this plugin:

Installing WP Polls to WordPress:

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

That's with this simple part. Now let's move on to second part.

How To Add A Poll:

After installing this plugin, WP Poll menu will appear in your WordPress's right menu section. You can add a new poll by simply clicking on that menu. You can also choose poll's expiring time, starting time, more. Just add your poll and click on Add Poll button.

Now visit Widget section of your WP, and add a WP Poll widget to your blog's sidebar, or wherever you want your poll to appear. You can also add your poll into a post or page by clicking on Poll icon in post/page editor.

You can also display WP Poll into your template by adding following php code into your template:

<?php if (function_exists('vote_poll') && !in_pollarchive()): ?>
    <li>
        <h2>Polls</h2>
        <ul>
            <li><?php get_poll();?></li>
        </ul>
        <?php display_polls_archive_link(); ?>
    </li>
<?php endif; ?>

You can get more details at this link.

Creating Poll Archive:

Creating a Poll Archive page for your blog is a great idea, and I really recommend this step. It's just too easy, you just need to enter a simple code into your page.

  • Create a new page and name it Polls or Poll Archive
  • Change page's permalink to: http://www.yourblog.com/pollsarchive/
  • Just put following code into your page and publish it:

[page_polls]

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

Friday, 14 June 2013

How To Delete Unconfirmed WordPress Users



In past, I shared several articles to manage your WordPress users, such as changing usernames, and restricting usernames. It's time for another article related to WordPress users. It's really important to manage all users, even more if you're using BuddyPress.
Some registered users of your site may not really confirm their id by clicking on activation links, which really sucks, as they're just wasting your database's little space. Activation emails may be caught by spam filters, deleted unwillingly, or simply not understood.

Boone Gorges and CUNY Academic Commons created a very useful plugin called, Unconfirmed, which creates a Dashboard panel under the Users menu (Network Admin > Users on Multisite) that shows a list of unactivated user registrations.

For each registration, you can resend the original activation email, manually activating the user, or delete them. It's a really great and must use plugin for all. If you got some extra money, you can also donate some to keep this plugin up in development at this link.

How To Install And Use Unconfirmed:

  • 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.
  • Now visit Dashboard > Users to manage unconfirmed users.

Hope this will keep your community up and clean. Don't forget to leave your responses, and I'll try to help and reach you all.

Wednesday, 12 June 2013

How To Activate New Facebook News Feed



Facebook has launched a new news feed design. It was introduced in March 2012, and right now is in BETA testing version. It's inspired by a "newspaper" and looks bit like Facebook's smart phone application. It has a very sleek UI, with a very nice off-canvas menu.

It's very user-friendly, and has lot of option to customize in your own style,You can choose from separate sections for friends, photos, music and other activity and updates. I used it, and it was pretty cool. To be honest, it's not very user-friendly at all, and is very confusing for new users.

How To Activate It:

  • Now click on "Join Waiting List", which is located on the bottom.

Now you're on news feed's waiting list. As it's a beta version, once the waiting list completes you will get a notification on the Facebook Home page to use it. That's it guys!

Tuesday, 11 June 2013

How To Use PHP On Blogger

We love Blogger, probably because it's free and is a Google Product. In April, I posted an article about some reasons why we should choose Blogger as our blogging platform, as I never miss a chance to promote my old articles.

As I noted in that article, Blogger is not a really good choice for a php developer, as it only supports html, css and javascript. However, there is a possible way to use your php files on Blogger, which is quite easy.

First we need a php hosting to host our php files. There are tons of free sites for php hosting, here are some:
awardspace.com
zymic.com
000webhost.com
Click here for more...

So just create an account on one of these free php hosting sites, and upload your php files in it. Now it's type to put your php files into your blog by iframing it or by using this code:

<object data="http://your-file.php" height="500" type="text/html" width="600"></object>

Now just replace red text in above code with your php file's link and publish it or post it on your blog.

That's the only possible way to do this... :)

Monday, 10 June 2013

How To Restrict Usernames In WordPress


It's really hard to run a WordPress blog, with BuddyPress and public registration. I'll post several article about managing your WordPress and BuddyPress users on BWidgets. Today, we'll kick off this series with a very basic tutorial.

In this tutorial, we'll learn about how to restrict usernames from your WordPress, so people may not use when registering for your site. By default, WordPress allow users to pick any username they choose as long as it isn't an already existing account and it doesn't include invalid characters.

Scott Reilly created a great plugin to restrict some usernames so they may not pick it. It's very important to restrict several usernames, including contact, admin, feedback, user, moderator, and more.

When attempting to register with a restricted username, vistors will see an error notice that says: ERROR: This username is invalid. Please enter a valid username.

How To Install And Use Restrict Usernames:

  • 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.
  • Go to the Users -> Name Restrictions admin settings page (which you can also get to via the Settings link next to the plugin on the Manage Plugins page) and specify username restrictions.

That's IT! You can put your responses, problems and requests in the comment section below... :)

Wednesday, 5 June 2013

Adding reCAPTCHA To BuddyPress Registration

We all hate spam and spammer way too much. They always annoy us everywhere on internet, our blogs, comments, Facebook, Twitter, forums, and everywhere. It's a great idea to prevent some of these spammers by using a CAPTCHA. It's impossible for them to pass a CAPTCHA, since they're just a spam bot without any brain.

Google's reCAPTCHA is a great way to knock these spammers out. Over 200,000 sites use reCAPTCHA, including household names like Facebook, Ticketmaster, Twitter and Craigslist. I have added a reCAPTCHA on my BuddyPress' registration at this link. It also looks good and professional. It's easy to add reCAPTCHA to your BuddyPress' registration page, you just need to read this tutorial carefully. Here we go:

Installing BuddyPress reCAPTCHA:

First we must install BuddyPress reCAPTCHA on our WordPress. You can download this by clicking here.

  • 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, just click on active.

Finish with this part. Now, first we'll create our reCAPTCHA keys then we'll add our key to this plugin. This doesn't have a user panel, so we have to do it manually. Let's start our second step:

Getting Our reCAPTCHA Keys:

Now we need two reCAPTCHA keys from their website - first is public key, and second is a private key. Here is how to get both of these:

  • Visit this link and login with your Google Account.
  • Following form will appear, fill this form with your website url and click on Create Key:


  • Now after clicking on Create Key,  you'll get both keys - public key, and the private key. Now copy these codes into a notepad document, and check next step:

Adding reCAPTCHA Keys To BuddyPress:

It's final step, and it's not that hard.You must edit the 'bp-recaptcha.php' file to make your settings.

  • Visit your WordPress Dashboard > Plugins > Edit Plugins
  • Choose BuddyPress reCAPTCHA plugin
  • Now choose bp-recaptcha.php file
  • In bp-recaptcha.php add your your public key and private key in following spaces:


  • Click on Update/Save and That's IT!
Don't forget to leave your responses. Also guys, you can check full personal blog at this link.

Monday, 3 June 2013

How To File A DMCA Complaint Against WordPress.com Blog


It's really sucks when someone is copying your content without giving you credits of your work, even more if he copied full article, even your images.

A WordPress.com blog, http://www.rnhckr.wordpress.com , was coping our article, without giving me credits for my original work. So I went to his website and comment on copied post to give me credits of my work. That kiddo edited my comment to:

Thanks! I'm copying this article.

I was really mad when I saw that he edited my comment. So, I filed a DMCA complain against his WordPress.com blog. As you can see, his blog is no more.

You can also file DMCA complain against a WordPress.com blog if he's violating your copyrights. It's easy and very effective.

If you believe that someone is infringes one or more of WordPress' TOS, then you can file a DMCA complain against them to get it removed of the web. First, you should to contact that person to remove your content, but if he's still not removing, then filing a DMCA is a great idea.

How To File A DMCA Against WordPress.com Blog:

Before starting it, here is a quote from WordPress.com about DMCA complains:

If an Infringement Notice is valid, we are required by law to respond to it by disabling access to the allegedly infringing content. If you are a WordPress.com user and access to portions of your blog have been disabled for this reason, we will notify you. You then have the option to send us a written counter-notice (a Counter-Notice) stating why your content does not infringe copyrights and asking for access to be reinstated. 

To file a DMCA against WordPress.com blog, you must fill WordPress' online DMCA form, which is available at this link. It's pretty simple. Below are some info about form's filed, and what to fill.

  • First Name(required): Fill your first name.
  • Last Name(required): Fill your last/second name.
  • Company Name: Name of your company or simply put your blog's name.
  • Address Line 1(required): Just put your address in this filed.
  • Address Line 2: Put your second address, if there is any.
  • City(required): Simply put your city's name. I'm from Kanpur :p
  • State/Region/Province(required): Put your state/region/province's name in this field.
  • Zip/Postal Code(required): Put your Zip or Postal address. You must know your Zip code.
  • Country(required): Enter your country's name.
  • Telephone Number(required): Put your telephone number in this field. Don't worry girls, they won't call you.
  • Email Address(required): Put your primary email in this field.
  • Copyright holder you represent (if other than yourself): Name of the copyright holder you represent, if it's not your own content.
  • Location of copyrighted work (where your original material is located)(required): Put links to your own original article of your blog, where the original articles are located.
  • Please describe the copyrighted work so that it may be easily identified(required): Give a brief description of your copyrighted work and the copied content. Like you can write, "this article is written and copyrighted by me, and this or that blog copied it without my permissions." Don't forget to be nice.
  • Location (URL) of the unauthorized material on a WordPress.com site (NOT simply the primary URL of the site - example.wordpress.com; you must provide the full and exact permalink of the post, page, or image where the content appears, one per line) (required): Put links of the copied work. Don't forget to enter the direct link of that copied content and describe it. Don't forget to mention, if that blog is copying from other blogs or is violating other TOS.
  • If the infringement described above is represented by a third-party link to a downloadable file (e.g. http://rapidshare.com/files/...), please provide the URL of the file (one per line): Only if that link is represented by a third-party link to a downloadable file. It's not required.
  • Two Check Boxes: Now check both of these checkboxes.
  • Signed on this date of (today's date, MM/DD/YYYY)(required): Today's date in MM/DD/YYYY format.
  • Signature (your digital signature is legally binding)(required): Your digital signature, which is your full name.

After filling above fields, just click on Submit button!!

You'll soon receive an email from WordPress team about this complain. I just received following emails in about 12 hours:

Hi,

Thank you for your report. The website in question has been suspended for violating our Terms of Service.

Thanks,

Phil
WordPress.com | Automattic Inc.

Hope this information will help you. If you're going to copy this or any other articles, then don't forget to credit us for our content, If you believe that we're violating your copyrights, then don't forget to contact us :)

Sunday, 2 June 2013

Adding Google Custom Search Engine To Blogger


Every website and blog must have a search bar to make it easy for visitors to search something. Even our site has a small, but stylish search bar in top. It's a must have stuff for all bloggers and webmasters. You can try it, and you'll find out that our search bar is linked with Google's custom search engine.

Replacing your boring search engine with a custom Google search engine is an awesome idea. You can also turn your old search to Google CSE, but we'll discuss that stuff later. Plus, you can also earn money with your Google CSE, but we'll also discuss it later.

It's time for you to learn how to create your own custom Google search engine, which is 100% embeddable and customization. As I noted before, you can check a live demo in our blog's right top bar, or by clicking here.

Creating A Google CSE:

Creating your own Google custom search engine is quite easy, you just need to type some basic information about your search preference and that's it. Here we go:

  • Click on Add button and a form will appear


Now it's time to fill a simple form, with one on text field, and other options. As you can see in below picture, steps are just too easy.

  • In first field, enter your blog/site's URL, you can enter more than one URLs (one URL per field)
  • In second option, choose your preferred language (English if you're using Adsense)
  • In third field, you can edit your search engine's name, which is optional and is only visible to you
  • Finally, click on that Create button to finish your setup


Yea!! We're almost done with this section of this post. After clicking on Create button, following page will appear:

  • Just click on Get code to get your CSE's code. Also that Google Bot looks freakin' awesome!!

As you can see in above image, just copy that highlighted code, cuz we'll add that code in your blog. You can try different types of Google CSE forms and style by customizing it. Time for next step!

Adding Google CSE To Blogger:

Now you can add that Google CSE code to wherever you wanna display your search engine. You can also try it on a html document. But we'll add it to our blog. Here you go:

  • Go To Blogger> Layout > Add A Gadget > HTML/JavaScript
  • Paste your Google CSE form and save your widget.
That's IT

Customizing:

Now you can also customize this widget. There are two ways to customize it, first one is by Google CSE's option, and second way is with some CSS and HTML. In this post, we'll only discuss about first method.

Visit Google CSE > Select your custom search engine > Click on Look and feel option in right sidebar
Now in look and feel tab, you'll see lots of option to customize your search engine, like Layout, themes, customize, and thumbnails, as you see in below images.


You can try to customize your search with every option, without using any CSS. It's pretty simple. Also, don't forget to experiment with layout option, as it's a very great way to customize your search's layout. More tutorials and article about Google CSE are coming soon :)

Wednesday, 29 May 2013

Adding Google Adsense Ads Into MobilePress


In past, I wrote an article about creating a mobile version of your WordPress site with MobilePress plugin. You can also earn some money with your MobilePress site by using Google Adsense or other mobile advertisement platforms, but lots of users get confused about how to add their advert code into their MobilePress template.

To be honest, it's pretty simple, but still not for first time. I'm also using Adsense on my site's mobile version at this link. Adsense mobile ads are only visible from mobile phones, not on your computer. Let's get started...

Create Adsense Mobile Ads Unit:

Your default Adsense ads are not perfect for your MobilePress powered site. You must create a mobile ads unit on your Adsense account. It's pretty simple...

  • 1. Login to your Adsense account > Click on My Ads tab
  • 2. Now in My Ads tab, click on Mobile content tab
  • 3. Now clck on New ad unit button


  • 4. Fill the following form with your ad preference and click on Save and get code:


  • 5. Copy your mobile ad code, and paste it into a blank notepad document


  • 6. Paste generated ad code into a notepad document and name it adsense.php
  • 7. Select All Files as file type
  • 8. Click on Save button to save adsense.php

The same thing goes for inmobi, buzzcity, admob and others, just copy the code to a notepad and save. Now we'll add this adsense.php file into your MobilePress theme.

Adding Ads Into MobilePress Theme:

Now you need to visit your ftp client or file manager. I'm using GoDaddy, and here is a preview of my file manager:


  • Upload this to public_html or webroot (based on your file manager)
  • Go to /public_html/wp-content/plugins/mobilepress/system/themes/default or /public_html/wp-content/mobilepress/themes/themename for custom theme.
  • Now if you want to place an advert at the top, you’ll have to edit header.php and insert the ad where you want it to display with following php:

<div class="aduity"><?php include('adsense.php'); ?></div>

  • If you need to show the ad unit at the footer, edit footer.php and paste that same code on the very first line or your preferred position..

That's it guys. Same work goes for all other mobile advert platforms. Don't ad more than three Adsense ads in your site. If you need any help, then don't forget to leave a comment.

Monday, 27 May 2013

Easiest Way To Change WordPress Username


Update

There's one more way, which is way more easier and without a plugin, you can check it by clicking here.

Original Post:

Earlier this hour, I was reading an article on WPBeginner about changing your WordPress username using phpmyAdmin. It's a very great article, but it's not really a easy way. I like to take easy-way-out when it comes to change something on my site.

Come On, we're using WordPress, he got thousands of plugins to use them. So I'm here to discuss a really easy and one-minute way to change any WordPress username of your site. You must be site admin to use this way. You can check a screen shot of how to change username, in image above.

Ghost1227 created Username Changer, which is a really great plugin to change any username of your site. Username Changer is a simple plugin which allows administrators to change usernames of users on their sites. Admins can also change their own username.

How To Install Username Changer:

  • 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, just click on active.
  • Now visit this plugin's settings page (in user menu) and easily choose your desire username.

That's so damn easy! For any help or issues, please post your query in the comment section below...

Sunday, 26 May 2013

Three Stylish Customized Blogger Contact Forms


Yesterday, I posted a couple of articles about Blogger's new contact form widgets. First, I showed you how to add this widget to your Blog's sidebar, then I showed you how to add this form to a specific page of your blog.

It's time for me to share three stylish customized designs for Blogger's new contact form widget. All three designs are coded with some really simple CSS, and they look really great on your blog's sidebar and pages.

First, I'll showcase three stylish designs with their CSS, then I'll show how to add them on your blog.

Design #1:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

#ContactForm1_contact-form-email-message {
width: 245px;
height: 150px;
line-height: 150%;
}

#ContactForm1_contact-form-submit:hover, textarea:hover,
#ContactForm1_contact-form-submit:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

#ContactForm1_contact-form-submit{
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
height:40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Design #2:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HpAaUCELV4K1-7UCQ99iut8yGa4FWQqg0o0rvFy1V8oigUlb1M1hmQfHy6NucIioVp1bKrkkeCASvBPso0OaFtCZwb3ZYpQmDb2n7496SULzX1SRMyC-WNQOMoMhplo882X6MnPdtAI/s1600/form_name.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8stcNavSUoBqa4LbJ4IehqTQeMHV0OCGKDdwydT6mcXss8MDOtFHJP_tLmYS23kM7NxA7Ujx2BOY6PRSRi9YkKqxWij13sDB_bWL9H-niqt0ya00VYsq_tqSq4ov6qVdq2HTbhxTM3F0/s1600/form_email.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email-message {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVDUB3LPRdSw2-jYwvT1cBiIEjmYq9N71BQFMMk2lj0UoPUHOR_6ZLqWgUBcNVWtSTUK7EDd3iOgI-3nj8ylkt9hRgRw3uE_RSa11F5SJRba-k0jkkFBgwcEZTE1SHIcBcdbw6D-SK_A/s1600/form_note.gif") no-repeat scroll 5px 6px rgb(255, 255, 255);
}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
margin: 0px;
width: 250px;
border: 1px solid rgb(221, 221, 221);
padding: 3px 5px 3px 25px;
}

#ContactForm1_contact-form-submit {
margin-top: 5px;
padding: 5px;
width: 100px;
background-color: rgb(225, 77, 77);
background-image:none;
border: 1px solid rgb(57, 21, 21);
border-radius: 5px 5px 5px 5px;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
line-height: 48px;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgb(0, 0, 0);
}

Design #3:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email {
border-color: rgb(0, 0, 0);
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
line-height: normal;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-email-message {
border-color: rgb(0, 0, 0);
padding-right: 5px;
min-height: 100px;
width:265px;
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
overflow: auto;
vertical-align: top;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-submit {
background-image:none;
background-color: rgb(0, 130, 135);
color: rgb(255, 255, 255);
font-family: 'Segoe UI','Open Sans',Verdana,Arial,Helvetica,sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
vertical-align: middle !important;
min-width: 90px;
min-height: 32px;
height: 32px;
border: 1px solid transparent;
color: white;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
text-align: center;
cursor: pointer;
padding: 4px 10px;
position: relative;
outline: medium none;
border-radius: 0px 0px 0px 0px;
}

How To Add Custom Style To Contact Form:

Adding these custom CSS codes into your blog is pretty simple. Some of you are just going to leave this part, since they know how easy it really is. For those who don't know, here you go:

  • Go To Blogger > Template > Edit HTML
  • Search for ]]></b:skin>:
  • Add your favorite form's CSS above ]]></b:skin>
  • Save your template...That's IT!

That was pretty easy! If you're using one of these styles, then please let me know you favorite for future styles. You guys are free to share these styles with your friends and fans, just don't forget to give us credits for our hard work. You can also share your custom styles in the comment section below...

Saturday, 25 May 2013

Solution Of bbPress Error: You do not have sufficient permissions to access this page


Earlier today, I tried to delete a forum from my bbPress, and before I could do so, it showed me following error with a white screen (maybe some grey too):

You do not have sufficient permissions to access this page

I was bit confused over this issues, so I tried to login again to my account. I'm not sure why this error is appearing. However, looks like a developer mode plugin is causing this error, atleast on my WP. I finally found a great and easy solution for this crazy error.

First of all, you can't blame Justin Bieber for this error, since he has nothing to do with your WordPress.

Solution:

First make sure that you are the current admin of your WP (not developer or anything). If it's still not working then try following:

Visit your WP plugin install page and install User Role Editor or you can download it by clicking here. Install and activate this plugin into your WordPress.

Now visit this plugin's settings page (in user menu) and click on reset button to reset all user's capabilities to default. Don't worry, you will not lose any user data. Now visit bbPress and get started with your forum.

Let me know if it worked for you, as this worked for me and lot of other users.

Adding Blogger Contact Form Into Static Page


Earlier today, I posted an article about Blogger's official Contact Form gadget at this link. This contact form is amazingly customizable. You can also add this form into your blog's static page or post with some simple steps. It's a great way to get rid of some extra forms in your drive. You can check this Contact Form in action by clicking here.

I'm going to finish this tutorial really quick, since I'm posting it second time. First post was not save due to an error. It was a huge post, so I'm not going to write it again :'(

Add Contact Form To Your Blog:

You can add this contact form into your blog's sidebar by reading this tutorial. Note: You must have this gadget on your sidebar to add this to your static page.

Hiding Contact Form From Your Sidebar:

Now you must hide this gadget from your site, so it'll only be available on your site's contact page. Here we go:

  • Go To Blogger > Template > Edit HTML
  • Search and paste this code just about ]]></b:skin>:

#ContactForm1{
display: none ! important;
}

Save your template. Now time for final step:

Adding Contact Form To A Static Page:

I'm going to finish this real quick, here we go:

  • Go To Blogger > Posts
  • Click on New Page and select Blank Page
  • Now in your blank page, click on HTML option to switch to html editor mode
  • Now paste following code and publish or update your page:

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

That's it! Don't forget to comment. You all are free to share this post on your blog, but don't forget to give us credits for out work.

Adding Contact Form Widget To Blogger

Blogger has launched a new amazing contact form widget for all of us. I'm using Google Drive contact form to receive all messages, but I'll use this widget soon on my blog. It's a great and must use widget for all blogs.

This widget was first discovered in Blogger's stylesheet by our friend at Stylify Your Blog. This new gadget release comes with the recent updates announced Google I/O 2013 and it looks like Blogger is still a integral part of the Google's Product line.

Features Of Blogger Contact Form:

  • Stylish AJAX form with Google UI.
  • Sending simple text messages.
  • Custom CSS supported. 
  • Message will be delivered right into your inbox.
  • No need of any third-party service.
  • Plain text messages without any attachments.

Adding Contact Form To Blogger:

  • Go To Blogger > Layout > Add A Gadget > More Gadgets


  • Choose Contact Form gadget
Give it a suitable name, and click on save to add this gadget. That's IT!!!

This widget is awesome. However, Google Docs form has more features - like, drop down list, additional fields, select field, more.

In future, I'll tell you how to use this widget on your pages, and also how to customize this widget with some magical CSS.

Tuesday, 21 May 2013

Delete Old Post Revision In WordPress

Post Revisions are a feature introduced in WordPress 2.6. Whenever you or WordPress saves or drafts a post or a page, a revision of that version is automatically stored in your database. Each revision will slowly increase the size of your database. WordPress.com will store the last 25 revisions for each post.

For example, if you have 1 post and it has 10 revisions you could be storing up to 10 copies of older or unused data in your database, which will increase the size of your database for sure. You can learn more about Post Revisions by clicking here.

Now we know that these useless post revisions are just wasting our space. You can't delete these revisions manually, but the oldest revision is automatically deleted if there are more than 25 revisions.

Delete Post Revisions:

Delete Post Revisions is a great plugin to delete all useless post revisions off your database. It is compatible with the latest version of WordPress (3.x). It's coded by me, so don't forget to rate this plugin.

Here is the original description of Delete Post Revisions:

We created a tool which helps you to remove useless post revisions from your database.

Installing Delete Post Revisions:

  • 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, just click on active.

After installing, a new option will appear under the Settings tab. Not here is how to delete old post revisions:

  • Visit Settings > Delete Post Revisions
  • In the bottom, click on "Start" button and it's all done.

WordPress’ database queries don't retrieve revisions, so the number of revisions has no effect on the queries, but it's a great way of keeping your database clean. The only time the revisions are retrieved is on the edit page of the individual post.

Wednesday, 15 May 2013

AJAXify Your WordPress Comments

In previous posts, I shared several AJAX tutorial, which were awesome. In this tutorial, I'll show how to AJAXify your default WP comment  system. It's a great must use tutorial.

AJAX comment enables you and your readers to post and reply to comment instantly without refreshing the page. It saves a lot of time and users are more likely to comment. You can check a live demo by clicking here.

I prefer to use Disqus comment box on my sites, but unfortunately Disqus doesn't works with BuddyPress. I'm not the only person who is facing this problem. I was so disappointment when I had to choose default WP comment box, since it reloads on every activity. So, I found a great plugin to AJAXify my default WP comment box.

To AJAXify your WordPress comments, there is a great plugin call wp-comment-master. Below is official description of this plugin:

an elegant and must-have comment plugin to better satisfy your visitors, it has two main features: AJAX comment posting and comment paginitaion.


Installing wp-comment-master:

  • 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, just click on active and it's done...

Don't forget to leave a comment...

Sunday, 12 May 2013

Easiest Way To Remove WordPress Logo From Admin Bar


Today, I'm going to share the easiest way to remove this annoying WordPress logo/links from your admin bar without using any plugin.

Last month, I tried to remove this whole WP logo menu from my site by editing those hard php files, and I was successful in it. But it was a temporary success, because soon I saw an error message on my dashboard.

Now, let me share two simple ways to remove that annoying thing from your admin bar.

Easiest Way: By Using CSS:

It's funny, but you can also remove that logo menu by adding display:none; CSS property. I know some of you guys are screwed up over this fact. Let me show you how. I'm using this CSS hack on this WP site.

  • Visit your File Manager or FTP from your hosting provides. Mine is from GoDaddy, which looks something like this:


  • Now in your file manger, visit webroot/wp-includes/css/admin-bar.min.css
  • In admin-bar.min.css, add following css code:

li#wp-admin-bar-wp-logo.menupop{display:none;}

  • Save/Update your admin-bar.min.css file and that's it.

Important: You may have to clear your browser's cache to see this change or you can use private window to see this simple css hack.

By Using php:

If you're not satisfied with our css hack, then you can also use php snippet to hide this menu list. Credits for this snippet goes to WP-Snippets.

  • Add this code to your functions.php file to remove the WordPress logo on admin bar:

<?php
function annointed_admin_bar_remove() {
        global $wp_admin_bar;

        /* Remove their stuff */
        $wp_admin_bar->remove_menu('wp-logo');
}

add_action('wp_before_admin_bar_render', 'annointed_admin_bar_remove', 0);
?>

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

Saturday, 11 May 2013

Bulk Delete WordPress Users Based On Their Role


Owning a blog with public registration is a huge mess, especially with all those nasty spammers. It's really hard to get rid of all those nasty spammers. In future, I'll share a very effective way to get rid of all future spam users, but first it's important to delete existing spam users. For that we have to delete all public registered accounts.

You can also use this tutorials for any other thing, since it's always not about spammers. Instead of deleting users of a specific role one-by-one, you can bulk delete them. As always, "Bulk Is Better" - Hardeep Asrani (Me)

As I know, there are five different roles in WordPress, which are admins, developers, authors, editors, contributors and subscribers. You can easily delete users of any of these roles easily by running a very simple code.

How To Bulk Delete All Users Based On Their Role:

  • Go to your WP Dashboard > Appearance > Editor
  • Open the functions.php file from the right sidebar.
  • Add the following lines of code (based on user role) to your functions.php file and publish.

Codes For User Roles:

For Admin:

function remove_administrators() {
    global $wpdb;
    $args = array( 'role' => 'Administrator' );
    $administrators = get_users( $args );
    if( !empty($administrators) ) {
        require_once( ABSPATH.'wp-admin/includes/user.php' );
        $i = 0;
        foreach( $administrators as $administrator ) {
            if( wp_delete_user( $administrator->ID ) ) {
                $i++;
            }
        }
        echo $i.' Administrators deleted';
    } else {
        echo 'No Administrators deleted';
    }
}
remove_administrators();

For Developers:

function remove_developers() {
    global $wpdb;
    $args = array( 'role' => 'Developer' );
    $developers = get_users( $args );
    if( !empty($developers) ) {
        require_once( ABSPATH.'wp-admin/includes/user.php' );
        $i = 0;
        foreach( $developers as $developer ) {
            if( wp_delete_user( $developer->ID ) ) {
                $i++;
            }
        }
        echo $i.' Developers deleted';
    } else {
        echo 'No Developers deleted';
    }
}
remove_developers();

For Authors:

function remove_authors() {
    global $wpdb;
    $args = array( 'role' => 'Author' );
    $authors = get_users( $args );
    if( !empty($authors) ) {
        require_once( ABSPATH.'wp-admin/includes/user.php' );
        $i = 0;
        foreach( $authors as $author ) {
            if( wp_delete_user( $author->ID ) ) {
                $i++;
            }
        }
        echo $i.' Authors deleted';
    } else {
        echo 'No Authors deleted';
    }
}
remove_authors();

For Editors:

function remove_editors() {
    global $wpdb;
    $args = array( 'role' => 'Editor' );
    $editors = get_users( $args );
    if( !empty($editors) ) {
        require_once( ABSPATH.'wp-admin/includes/user.php' );
        $i = 0;
        foreach( $editors as $editor ) {
            if( wp_delete_user( $editor->ID ) ) {
                $i++;
            }
        }
        echo $i.' Editors deleted';
    } else {
        echo 'No Editors deleted';
    }
}
remove_editors();

For Contributors:

function remove_contributors() {
    global $wpdb;
    $args = array( 'role' => 'Contributor' );
    $contributors = get_users( $args );
    if( !empty($contributors) ) {
        require_once( ABSPATH.'wp-admin/includes/user.php' );
        $i = 0;
        foreach( $contributors as $contributor ) {
            if( wp_delete_user( $contributor->ID ) ) {
                $i++;
            }
        }
        echo $i.' Contributors deleted';
    } else {
        echo 'No Contributors deleted';
    }
}
remove_contributors();

For Subscribers:

function remove_subscribers() {
    global $wpdb;
    $args = array( 'role' => 'Subscriber' );
    $subscribers = get_users( $args );
    if( !empty($subscribers) ) {
        require_once( ABSPATH.'wp-admin/includes/user.php' );
        $i = 0;
        foreach( $subscribers as $subscriber ) {
            if( wp_delete_user( $subscriber->ID ) ) {
                $i++;
            }
        }
        echo $i.' Subscribers deleted';
    } else {
        echo 'No Subscribers deleted';
    }
}
remove_subscribers();

For None:

There is also a role in WordPress called "none." Here is the code to bulk delete users with "none" rule. I'm not 100% about this code, so please leave a comment if it's working:

function remove_noroleusers() {
    global $wpdb;
    $args = array( 'meta_key' => 'wp_capabilities','meta_value' => 'a:0:{}','meta_compare' => '=') ;
    $noroleusers = get_users( $args );
    if( !empty($noroleusers) ) {
        require_once( ABSPATH.'wp-admin/includes/user.php' );
        $i = 0;
        foreach( $noroleusers as $noroleuser ) {
            if( wp_delete_user( $noroleuser->ID ) ) {
                $i++;
            }
        }
        echo $i.' Users deleted';
    } else {
        echo 'No Users deleted';
    }
}
remove_noroleusers();

Final Step:

Once you have went to your site go back to your functions file and remove the code. Don't forget to leave a comment.

Friday, 10 May 2013

Using jQuery Autocomplete Widget


The Autocomplete widgets provides suggestions while you type into the field. It's a great way to create search, tags or category form on your niche blog. You can also create some cool forms with this UI. In this tutorial, I'll show how to easily use this autocomplete widget.

1. Create A New Document:

It's a beginner's tutorial so, I'll explain in some very easy language, not going to use all those crappy words. Create a new HTML document, below is basic page structure:

<html>

<head>

</head>

<body>

</body>

</html>

2. Adding jQuery Script And CSS:

Now we'll add magical jQuery script and jQuery UI's stylesheet. Just add following code between your <head> ... </head> in your document:

<link rel=stylesheet href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Save your template. Let's move to our third step where we're going to add our input form:

3. Adding Our Input Form:

It's time to add our input form in your document. Our input form is surrounded by <div> </div> tag to style our form. Just add following mark-up between our document's <body> ... </body> tag:

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>

Remember, our input element's id is tags. We're pretty much done right here. Now, it's time to add our autocomplete text values.

4. Adding Autocomplete Values:

Finally, it's time to add our autocomplete values. First add following script above </head>:


<script>
$(function() {
var availableTags = [
AUTO COMPLETE VALUES HERE
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>

Now, let's replace red text in above document with some available autocomplete values. We're going to add some values like this:

"Basket Ball",
"Baseball",
"Cricket"

Don't add "comma" in last value. Here is full mark-up of this autocomplete jQuery code:

<script>
$(function() {
var availableTags = [
"Basket Ball",
"Baseball",
"Cricket",
"F1",
"Football",
"Hockey",
"Ice Hockey",
"MMA",
"Moto GP",
"Nascar",
"Racing",
"Wrestling",
"Pro-Wrestling"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>

That's it. You can also add scrollable results by adding following css:

<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>

Full Document Mark-Up:

Below is the full mark-up of our document:

<link rel=stylesheet href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>

<script>
$(function() {
var availableTags = [
"Basket Ball",
"Baseball",
"Cricket",
"F1",
"Football",
"Hockey",
"Ice Hockey",
"MMA",
"Moto GP",
"Nascar",
"Racing",
"Wrestling",
"Pro-Wrestling"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>


<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>

Don't forget to leave a comment!

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.

Wednesday, 8 May 2013

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.

Tuesday, 7 May 2013

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.

Monday, 6 May 2013

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.

Saturday, 4 May 2013

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.

Popular Posts

 
Powered by Blogger.