How To Create A Simple WordPress Widget (in 5 steps)

2 comments

Widgets do play a very vital role in your WordPress blog/site and therefore they need to be given high priority. There are hundreds, or maybe thousands, of developers around the world who have built thousands of widgets. These range from simple ones (like we’re going to learn in this tutorial) to advanced widgets (often made for custom products such as themes, plugins etc.). How To Create A Simple WordPress Widget (in 5 steps)

Before creating any WordPress widget, it is a must that you know some basic PHP codes because you might want to achieve something that will, of course, be using PHP to execute the result on the frontend. Once you’re introduced to some basic PHP code, you shouldn’t have a very hard time creating a custom WordPress widget. Assuming you’re done with that, let’s begin.

*Note – The widget we’re going to create here will add an option for the user to enter some text, and if the field is left blank, a default text will appear. This is similar to the “Text Widget” by WordPress, but honestly, I haven’t even had a look into its source code. Therefore, this tutorial is based on my knowledge.

Step 5 contains the final code which is to be injected into the theme’s functions.php.

Step 1 – Introduction Of The Widget

The very first step of creating any WordPress widget is to name it and give it a description. The following lines of code will do it for us.

class my_custom_widget extends WP_Widget {

function my_custom_widget() {

$widget_ops = array('classname' => 'my-widget-class', 'description' => __('Your Custom Widget Description Goes Here.', 'mydomain'));

$control_ops = array('id_base' => 'my_custom_widget');

$this->WP_Widget('my_custom_widget', __('My Widget Title Goes Here', 'mydomain'), $widget_ops, $control_ops);

}

Step 2 – Adding Widget Options

These options will be the widget title and the text area for the user to enter some text in it.

function form($instance) {

$defaults = array('text_area' => "The Default Text Goes here");

$instance = wp_parse_args((array) $instance, $defaults); ?>

<p>

<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'mydomain'); ?></label>

<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php printf('%s', esc_attr((string)$instance['title'])); ?>" class="widefat" type="text" />

</p>

<p>

<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Text Area:', 'mydomain'); ?></label>

<textarea id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>" class="widefat" rows="3" cols="8"><?php printf('%s', esc_textarea($instance['textarea'])); ?></textarea>

</p> }

Description
  • Where it says “The Default Text Goes Here” – that text will be displayed when the user leaves the “Text Area” filed blank.

Step 3 – Widget In The FrontEnd

It’s time to put the code that will be executed in the frontend i.e. when the widget is placed in the widgetized area.

function widget($args, $instance) {

extract($args);

$title = apply_filters('widget_title', $instance['title']);

$textarea = $instance['textarea'];

/* Widget In The Frontend */

?>

<? echo $before_widget; ?>

<? if (!empty($title))

echo $before_title . $title . $after_title;; ?>

<p> <? echo $textarea; ?> </p>

<? echo $after_widget; ?>

<?

}

Step 4 – Widget Update Functions

When the widget is saved after any changes, the changes need to be noticed by WordPress. The following will carry that out.

function update($new_instance, $old_instance) {

$instance = $old_instance;

$instance['title'] = sprintf('%s', strip_tags(stripslashes($new_instance['title'])));

$instance['textarea'] = $new_instance['textarea'];

return $instance;

}

Step 5 – Registering And Finalizing The Widget (Full Code)

The above codes were in pieces, and therefore they have to be put together. Therefore, the following snippet contains the full code (as it should be) and the function to register it.

class my_custom_widget extends WP_Widget {

function my_custom_widget() {

$widget_ops = array('classname' => 'my-widget-class', 'description' => __('Your Custom Widget Description Goes Here.', 'mydomain'));

$control_ops = array('id_base' => 'my_custom_widget');

$this->WP_Widget('my_custom_widget', __('My Widget Title Goes Here', 'mydomain'), $widget_ops, $control_ops);

}

function widget($args, $instance) {

extract($args);

$title = apply_filters('widget_title', $instance['title']);

$textarea = $instance['textarea'];

/* Widget In The Frontend */

?>

<? echo $before_widget; ?>

<? if (!empty($title))

echo $before_title . $title . $after_title;; ?>

<p> <? echo $textarea; ?> </p>

<? echo $after_widget; ?>

<?

}

/* Widget Update Functions */

function update($new_instance, $old_instance) {

$instance = $old_instance;

$instance['title'] = sprintf('%s', strip_tags(stripslashes($new_instance['title'])));

$instance['textarea'] = $new_instance['textarea'];

return $instance;

}

/* Widget Options */

function form($instance) {

$defaults = array('textarea' => "The Default Text Goes here");

$instance = wp_parse_args((array) $instance, $defaults); ?>

<p>

<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'mydomain'); ?></label>

<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php printf('%s', esc_attr((string)$instance['title'])); ?>" class="widefat" type="text" />

</p>

<p>

<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Text Area:', 'mydomain'); ?></label>

<textarea id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>" class="widefat" rows="3" cols="8">

<?php printf('%s', esc_textarea($instance['textarea'])); ?></textarea> </p> <?

}

}

/* Registering The Widget */

$widgets = array('my_custom_widget');

foreach ($widgets as $widget)

register_widget($widget);

Final Output

This is the final output of the widget on the dashboard. The output in the frontend, at least for this widget, is quite obvious and therefore there’s no need to show it.

 

How To Create A Simple WordPress Widget (in 5 steps)

 

Conclusion

I hope it was easy enough for you now to create a WordPress widget (a very simple one, though!). Any questions/doubts etc. will be answered in the comments area.

Read More

How To Fix (and avoid) The “500 Internal Server Error” On Your Site

Leave a Comment

How To Fix (and avoid) The “500 Internal Server Error” On Your SiteWeb-masters like you and me are ever online – maybe from several different devices. Therefore, the site has to be live and it’s the web-host’s duty. However, there are may sites that suffer the “500 Internal Server Error” several times during the day. Most of the web-masters think that it is the host’s fault (or weakness) that such messages are displayed and the site is put down. Although these errors don’t last for a long time, they do annoy the readers and especially the administrator of the site. It doesn’t matter what platform (e.g. WordPress, Joomla, Drupal etc.)  you’re using to set up the site because it doesn’t really have to do anything with the platform. I can say that because recently, I had a conversation with my web-host’s support staff and it was something (not exactly) like the following.

Me: …actually I have a lot of WordPress installations on my server, so can that be the reason why I’m facing too many 500 Internal Server Errors? Staff: …No, the error has nothing to do with the number of installations of any CMS or software.

Well, then what exactly is the issue? Let’s find out!

The Main Cause Of a 500 Internal Server Error

The main reason is the number of email accounts being run from that server. Yes, that might sound weird but it is the case. Most, if not all, of us run our custom email accounts through the same server where we host our site(s). Now, for every server, there is limit to the number of server requests being on at the same time. When the email accounts are used on third party devices i.e. anywhere except the live online mail, the number of server requests increase. The best example is your laptop/computer. If you’ve set up all your email accounts in iMail or Outlook, the number of server requests will simply increase.

The Fix To a 500 Internal Server Error

The fix is really simple – most email platforms (even on smartphones) have an option of ‘Push Mail’. This means that the mail client is constantly sending server requests to the host asking whether there’s an email or not. Therefore, if you believe that you have a lot of email accounts running at the same time (number can be 5+), then you should consider avoiding the “Push Mail” feature and manually setting the time for the mail clients to refresh. The appropriate time can be 5-10 mints. This will definitely reduce the number of server requests, also called IMAP or POP server requests, sent to the host.

Recommended Hosts To Avoid the 500 Internal Server Error

Although it relies much on your usage, the hosts do play some part in handling the error because the limit to the number of server requests at once is decided and set by the host. I would personally recommend the Hostgator host to get less chances of a server error.

 

Read More

How To Make An Eye Catching Blogger Blog?

Leave a Comment

How To Make An Eye Catching Blogger Blog?After publishing a Stylish Social Media Connect Widget For Blogger I am coming with a different topic and different post “How to make an eye catching blog”. Last two days I am was busy with my university exams. Any way today we are discussing about how to make your blog perfect and eye catching one. Everyone knows that Blog design play an important role in consistent traffic. If your blog look very bad, readers do not visit your blog again. You must make your blog simple and well designed. So, in this post here I’m Explaining Some Crucial Tips To Make an eye catching blog.

 

Choose a Perfect Blogger Template

As Blogger Provides Some Blogger Templates by Default To Every Users but They Didn’t Look Like Professional and Are Not Optimized with SEO. So Choosing a Better Blogger is required. Here, Are Some Tips To Choose Better Blogger Templates. Things to have in Mind While Choosing a Blogger Template .

Template Should Be Clean, Simple And Professional Looking.

  • SEO Optimized Template.
  • Page Loading Time Should be Less.
  • Cross Browser Compatibility.
  • Enough Space for Advertising
  • Will be Better if Template is Responsive .
  • Easy Navigation.

Removing Excess of Advertisements

Are You Using Excess Of Advertisements on Your Blog ? Putting Excess Of Advertisements Can Distract Your Blog Visitors And Can Badly Hurt Your Blog Design. So Removing Excess of Advertisements Can Help Making Blog Design Much Better.

There’s No Problem With Text Advertisements & Banner Advertisements, Because They Didn’t Affect Blog Design Too Much But If You Had Pop Up Advertisements Please Try To Remove Them, Because They Affect Blog Design Too Much as Well As Tremendously Drive Your Blog Visitors Out From Your Blog !

Selection of Widgets 

Don’t fill your sidebar with widgets try to put some relevant widget. Make Sure You Have Only Some Essential Widgets on Your Blog. Some of the important widgets given bellow.

These are the major tips to make your blog perfect and eye catching one. I hope this would help you somehow designing your blog much better than before.

Don’t forget to use the comment box for your valuable thoughts.

At last have a nice day…

Read More

Stylish Social Media Connect Widget for Blogger

Leave a Comment

Social media connect widget is an important element of a professional blog site. You can stay connected your blog visitor by using this widget. Some people are use lower stylish social connect widget, that cannot attract their blog visitor/reader. That’s way they are not get enough social media followers. For this kinds of blogger we are created a social connect widget, that can easily attract any visitor. This widget created with Facebook, Twitter, Google Plus, LinkedIn, StumbleUpon and RSS icons. You can see how this widget is on Bellows screenshot.  You also can see live demo by clicking hare.

Stylish Social Media Connect Widget for Blogger

 

Recommended article:

  1. Unique Sidebar Social Widget For Blogger Blog
  2. Simple Social Following Widget For Blogger And Wordpress

How to add this Social Profile Icon Widget to your blogger blog

  • step 1: Go to blogger blog dashboard> Layout
  • step 2: Click on “Add a Gadget”
  • step 3: Chose a “Html JavaScript” Gadget
  • Step 4: Copy all bellows code and past inside the “Html JavaScript” Gadget

<style>
/***** Social Profile Icon Widget CSS *****/
.social-profile-icons { margin: 20px 0 0; overflow: hidden; }
.social-profile-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; }
.social-profile-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; }
.social-profile-icons ul li a, .social-profile-icons ul li a:hover { background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; }
.social-profile-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; }
.social-profile-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; }
.social-profile-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; }
.social-profile-icons ul li.social-linkedin a { background-color: #007bb6; background-position: -125px 3px; }
.social-profile-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; }
.social-profile-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; }
.social-profile-icons ul li a:hover { background-color: #333; }
</style>

<div class="social-profile-icons">
<ul>
<li class="social-facebook"><a href="#" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="#" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="#" title="Google+">Google+</a></li>
<li class="social-linkedin"><a href="#" title="LinkedIn">Linkedin</a></li>
<li class="social-pinterest"><a href="#" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="#" title="RSS">RSS</a></li>
</ul>
</div>

  • Step 5: Click on “Save”
  • Step 6: You are done!

Now you need a simple customization:

  1. Replace the red highlighted # symbol with your Facebook fan page or profile url.
  2. Replace the green highlighted # symbol with your Twitter profile url.
  3. Replace the blue highlighted # symbol with your Google+ page or profile url.
  4. Replace the vibrant purple highlighted # symbol with your LinkedIn profile page url.
  5. Replace the pink highlighted # symbol  with your Pinterest profile url.
  6. Replace the vibrant green highlighted # symbol with your blog RSS url.
Read More

5 Best ways to Make Your Blog Visible To Search Engines

1 comment

Today we discussing about how to make your blog visible to the search engine. It is very important to know how to get your blog noticed by search engine. If your blog is not that much of visible to the search engine then you don’t have readers from search. Below are some of tips I’ll be sharing on making your blog easily visible to search engines, so it’s easier for you to increase your audience.

5 Best ways to Make Your Blog Visible To Search Engines

Submit your blog Search Engines

It’s one of the simplest ways to effectively increase visibility to your readers. Submit your blog to popular search engines like Google, Bing, yahoo etc. You can also create sitemaps.

Update your blog regularly

If your blog has been noticed already by viewers, you need to populate it with fresh updates on a regular basis so people will always be looking forward to visiting it.

Select an attractive and unique blog template.

The site’s appearance is the first thing a visitor will ever see, so by having a beautiful, clean and sleek design, you can attract more followers. But be careful in selecting a design. Pick the theme that will mostly help convert your posts. Go for a more professional look if you want to promote your brand.

Interact with your readers.

Constant interaction and activity with your audience is a must if you want your blog to get noticed. Allow readers to post comments on your posts and reply to them. This increases your blog’s chances of being visible because of keywords written by your readers.

Use Social Networking and bookmarking sites

Social networking and bookmarking sites have the power to connect to a lot of people all over the globe, so use them to your advantage. Sites like Facebook, Twitter, Google+, etc. are especially useful tools in expanding your network.

 

Recommended Post: How To Get Traffic From Facebook For Your Website

 

That’s all…Don’t forget to use the comment box for your valuable thoughts…

At last have a nice day…

Read More

5 Things To Do After Publishing A Blog Post

Leave a Comment

Many bloggers believe that their job ends at pressing the ‘Publish’ button, which is not true at all. A blog post needs many things to be done after it has been published. This article will discuss five things that one must do after publishing a blog post. Note that not all might be applicable for your blog conditions and environments, thus you’re advised to carefully analyze before following all the things mentioned below.5 Things To Do After Publishing A Blog PostAlso make sure that your post is already in its best form i.e. it contains relevant interlinks, the on-page SEO is up to the mark and is formatted in the best way possible. If all is done, then you’re free to publish the post and then quickly follow the tips mentioned in this post.

01) Ping Your Blog

It is always recommended to quickly ‘ping’ your blog to the search engines so that the new posts can be indexed as soon as possible. A very easy way to ping your blog is by using an online tool known as Ping-o-Matic, which pings and updates your blog in the eyes of major search engine services.  Although there are hundreds of such services out there, Ping-o-Matic focuses on the important ones.

It also provides a direct bookmark, which when clicked will automatically ping your blog. Therefore, you’ll not have to write the details again and again.

02) Manual Tweeting

Although your blog might be automatically shared on social networks, there is something which is different when you do it manually. For example, if you tweet a post manually, you can add your own desired hashtags, @mention people (the author, for example) etc. Sharing your posts manually is always a different aspect than to have it being done automatically.

03) Manual Updating On Facebook

Just like in the case above, there are several tools which can automatically post updates on Facebook for your new blog posts. But again – doing it manually just makes things better. For example, you might want to share the link along with an image. Such activities are not done by the automatic tools.

You can also promote your updates by paying a small fee to Facebook. Promotions guarantee a wide reach to the fans, and their friends. Normal fees to promote a single post are $5-10.

Recommended post: How To Promote Your Blog ?

04) Social Bookmarking

There are social sites from where you might not get much traffic, but yet sharing on such sites is vital because you get the backlinks. Be it dofollow or nofollow, you are getting the backlinks. Social bookmarking sites such as Delicious, Reddit, Stumble Upon, ScoopIt etc. posses a very high page rank, therefore the backlinks that your blogs get are quality.

Recommended post: 6 Social Media Tips That Help Your Blog

Remember that backlinks will be responsible for increasing the organic traffic of your blog. If not now, then definitely later.

05) Asking Friends To Share

Asking your friends to share your blog posts, if the posts are worth it, has never been a harm and will never be one. If you believe that your posts deserve a share, why not ask for one from your friends. You can also tag them, which will influence them to share the posts without being asked directly.

Read More

Add Tabbed Style Sitemap Widget to Blogger

Leave a Comment

Hello Reader! hope you are everyone is well. After a long time working now I am come with an awesome blogger table of content/Sitemap widget for you. This sitemap widget is totally different form other older style sitemap. This sitemap is tabbed style and made with some new JavaScript codes, that’s make this widget is totally unique and look much attractive. This widget’s is tested on responsive template, and working very well. However now we will see that how to add this widget on your blog.

Read Also: How To Create A Beautiful Clean Sitemap Or Table Of Contents Page For Blogger?

Add Tabbed Style Sitemap Widget to Blogger

Live Demo

How to add Setup Sitemap to Blogger Blog?

  Follow our instructions and screenshot's  carefully to setup it on your blog perfectly.

1. First Go to Blogger > Pages

Add Tabbed Style Sitemap Widget to Blogger

2. Now Click On New Page "Blank Page"

Add Tabbed Style Sitemap Widget to Blogger

3. Now Select "HTML" page

Add Tabbed Style Sitemap Widget to Blogger

4. Now Copy the Code Given Below and Paste it to Here

<style>
/*Sitemap
----------------------------------------------- */
#tabbed-toc{-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);background-color:#111;box-shadow:0 1px 3px rgba(0,0,0,.4);color:#333;margin:0 auto;overflow:hidden;position:relative;width:99%;}
#tabbed-toc .loading{color:#FFF;display:block;font:normal bold 10px Arial,Sans-Serif;padding:5px 10px;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{list-style:none;margin:0;padding:0;}
#tabbed-toc .toc-tabs{float:left;width:20%;}
#tabbed-toc .toc-tabs li a{color:#ccc;cursor:pointer;display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;padding:0 12px;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;}
#tabbed-toc .toc-tabs li a:hover{background-color:#444;color:#FFF;}
#tabbed-toc .toc-tabs li a.active-tab{-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);background-color:#e74c3c;box-shadow:-2px 2px 2px rgba(0,0,0,.5);color:#FFF;margin:0 -1px 0 0;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background-color:#FFF;border-left:5px solid #e74c3c;box-sizing:border-box;float:right;width:80%;}
#tabbed-toc .divider-layer{-moz-box-shadow:0 0 7px rgba(0,0,0,.7);-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);display:block;float:none;position:absolute;right:0;top:0;}
#tabbed-toc .panel{font:normal normal 10px Arial,Sans-Serif;position:relative;z-index:5;}
#tabbed-toc .panel li a{color:#333;display:block;font-size:11px;font-weight:700;height:30px;line-height:30px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-decoration:none;}
#tabbed-toc .panel li time{color:#666;display:block;float:right;font-size:10px;font-style:italic;font-weight:400;}
#tabbed-toc .panel li .summary{border-bottom:4px solid #275827;display:block;font-style:italic;overflow:hidden;padding:10px 12px;}
#tabbed-toc .panel li .summary img.thumbnail{background-color:#fafafa;border:1px solid #dcdcdc;display:block;float:left;height:72px;margin:0 8px 0 0;padding:4px;width:72px;}
#tabbed-toc .panel li:nth-child(even){background-color:#f1f1f1;color:#fff;font-size:10px;}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:#FFF;outline:none;}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222;}
@media max-width700px {
#tabbed-toc{background-color:#fff;border:0 solid #888;}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{display:block;float:none;overflow:hidden;width:auto;}
#tabbed-toc .toc-tabs li{display:inline;float:left;}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);background-color:#111;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#ccc;}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#DF1010;color:#fff;}
#tabbed-toc .toc-content{border:none;}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none;}
}
</style>
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://www.mybloggerblog.com/",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "",
monthNames: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true,
maxResults: 99999,
preload: 0,
showNew: 7,
newText: " - <em style='color:red;'>New!</em>"
};
</script>
<script type="text/javascript" src="http://yourjavascript.com/24184422821/tabbed-toc.js"></script>
<small><div style="font-size:50%; text-align:right;"><a href="http://www.mybloggerblog.com/2014/08/add-tabbed-style-sitemap-widget-to_28.html" target="_blank" title="Get This Widgets">Widget by MyBloggerBlog.Com</a></div></small>

Add Tabbed Style Sitemap Widget to Blogger

Replace http://www.mybloggerblog.com/ With Your Website URL

5. Now Click on "Publish" Post

You are done.

Read More
Previous PostOlder Posts Home