A WIDGET FEATURE () – PART 2 : DATA PRESENTATION HTML

After we all uptight values ??in variables , we have to print the widget through PHP but we have the fix HTML and CSS and give them a more beautiful air with icons describing visually what each number means. Here’s our HTML:




<div class=”ewp-social-counter-icon ewp-social-counter-rss”>
    <a href=”http://feeds.feedburner.com/<?php echo $instance[‘feedburner’]; ?>” target=”_blank”>
        <img src=”<?php echo plugins_url( ‘user_rss_32.png’, __FILE__ ); ?>” alt=”Subscribers no RSS” />
    </a>
    <br />
    <small> Subscribers</small>
    <h3><?php echo $rss_counter; ?></h3>
</div>
<div class=”ewp-social-counter-icon ewp-social-counter-twitter”>
    <a href=”http://www.twitter.com/<?php echo $instance[‘twitter’]; ?>” target=”_blank”>
        <img src=”<?php echo plugins_url( ‘user_twitter_32.png’, __FILE__ ); ?>” alt=”followers no Twitter” />
    </a>
    <br />
    <small>followers</small>
    <h3><?php echo $twitter_counter; ?></h3>
</div>
<div class=”ewp-social-counter-icon ewp-social-counter-facebook”>
    <a href=”http://www.facebook.com/<?php echo $instance[‘facebook’]; ?>” target=”_blank”>
        <img src=”<?php echo plugins_url( ‘user_fb_32.png’, __FILE__ ); ?>” alt=”Facebook fans” />
    </a>
    <br />
    <small>Fans</small>
    <h3><?php echo $fb_counter; ?></h3>
</div>
<div class=”ewp-social-counter-icon ewp-social-counter-comments”>
    <img src=”<?php echo plugins_url( ‘users_32.png’, __FILE__ ); ?>” alt=”Comments” />
    <br />
    <small>Comments</small>
    <h3><?php echo $comments_counter; ?></h3>
</div>
Once all div are equal, we explain only one of the code portions. I assume that you understand and know each of the tags and attributes in HTML. therefore what I will explain is the use of plugins_url function () native WordPress.
This function returns the URL relating to his blog to the data file in its first parameter, from the location of the second parameter file, i.e., in this case, using the constant __FILE__ we mean the function to use the current file located http: //your-domain/wp-content/themes/your-theme/functions.php as the way selector, so looking for the file at http: // your-domain/wp-content/themes/your theme/.
It is here that you should give wings to your imagination and try to make your widget as best you can.

DOWNLOAD PLUGIN FREE

As usual we provide here the widget in the form of plugin, ready to be able to install all right. After installation will have to go to “Presentation”> “Widgets”, select the Widget “Social EWP Counter” and configure it with the user name of Twitter, the ID of the Facebook fans page and your FeedBurner name.

{1} = FileLink
For those who follow this tutorial: recommend an analysis of how the widget is implemented.
For those who use this plugin: share and disclose your social networks with your friends helping to publicize the School WordPress also! Do not remove please Plugin credits !!
I hope this article has helped to give the first steps in creating your first widget. Suggestions? Leave your comment below. Created a widget from this article? Publicize it here!




LEAVE A REPLY

Please enter your comment!
Please enter your name here