“WizyLike Wordpress Plugin” Documentation by “WizyLabs” v1.0


“WizyLike Wordpress Plugin Documentation”

Created: 06/09/2010
By: WizyLabs
Email: taha@wizylabs.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.


Table of Contents

  1. Embedding Function
  2. WizyLike Badge Markup
  3. Settings & Options
  4. Sidebar Widget

Embedding Function - back to table of content

Embeding WizyLike in your theme is as easy as inseting one line of code in the theme's loop. E.g.

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

	<!-- post title -->
	<h1 class="entry-title"><?php the_title(); ?></h1>
				
	<!-- wizylikes -->	
	<?php if(function_exists('wizylike')) wizylike('button');  ?>	
	
	<!-- entry content -->
	<div class="content">
		<?php the_content(); ?>
	</div>

<?php endwhile; ?>

The function that you embed the like/unlike Badge with have three parameters. The first one is 'format'. This param give you the choice to get the whole Badge or only the likes count. You can pass either 'button' or 'count'. 'Button' returns the whole Badge and 'count' returns only an intiger with the likes count on the current post. Note that there is no default value for this param so you will have to have a valid value in there to get it working. The code below may explain more.

<!-- for button -->
<?php if(function_exists('wizylike')) wizylike('button');  ?>

<!-- for count -->
<?php if(function_exists('wizylike')) wizylike('count');  ?>

The second param gives you the option to either return or echo out the result. Note that this param is a boolean value which means that you pass in a true or false. By default this param is set to true which will echo out the result by default. Set this param to false to return the result other than echoing it. The code below may explain more.

<!-- for echo -->
<?php if(function_exists('wizylike')) wizylike('button', true);  ?>

<!-- for return -->
<?php if(function_exists('wizylike')) wizylike('count', false);  ?>

Finally, the third param is ragrding a styling option. By default the WizyLike Wigdet is floated to the left and has a <br clear="all"> after it to clear its float. In some cases you might require to have no clearing after the element, if that is required, pass a 'false' value in the third param to get rid of the clearing after the element. The code below may explain more.

<!-- for having a clearing element after the Badge -->
<?php if(function_exists('wizylike')) wizylike('button', true, true);  ?>

<!-- for no clearing after the Badge -->
<?php if(function_exists('wizylike')) wizylike('count', true, false);  ?>


Badge Markup - back to table of content

<div class="wizylike_button [style] [colour]" id="wizylike-post-[post-id]">
	<span class="wizylike_icon" onclick="[processing onclick javascript function]">&nbsp;</span>
	<span class="wizylike_linebreaker first"></span>
	<span class="wizylike_count"> [count] </span>
	<span class="wizylike_linebreaker last"></span>
	<span class="wizylike_like_unlike [loading class]" onclick="[processing onclick javascript function]">[like/unlike text]</span>
</div>

<br clear="all" />

The code above is identical to the Badge mark in the plugin. Its wrapped in a left floated div with class wizylike_button. This div has and id of wizylike-post- then followed by the post id. This can be useful if you want to have a different styling for certain posts. Please DO NOT edit this markup at all. It is very flexible in terms of custom styling it. The span with class wizylike_like_unlike holdes the like/unlike text depending on the current action. It will also act as a ajax loading image while the script is processing its script. When a user clicks like or unlike, jquery adds a class of wizylike_loading to that element which gets rid of the inline text and adds a ajax image as the element's background image.

Depending on your chosen style and colour in the settings page, the [style] and the [colour] classes gets replaced with the chosen option. Below there are two lists, one for the style classes and other for the colour classes that gets added to the main wrapper for styling the Badge. Note that this is done dynamically from the settings page, you are not required to add any classes.

Styles classes

Colour classes

Note that the markup above is the same one used for all styles.


Settings & Options - back to table of content

Below, there is a screenshot of all options avaliable for this plugin. In the plugins options panel (found under the settings menu in the wordpress admin panel) you can control wether users or every one can like your posts. You can set the colour and style of the WizyLike Badge and finally, you can add the like and the unlike text. Those text are the ones that you user clicks on to wether like or unlike the post. All the default values are the ones that you can see in the screenshot below.




You can also disable WizyLike on single posts. On every post a checkbox will be viewed to ask you wether to disable it on the this post or not. By default, WizyLike is enabled on all posts.




Sidebar Widget - back to table of content

Since WizyLike 1.4, a sidebar widget has been added after it has been requested by many of the buyers. You can find the widget in Appearance > widgets. Drag and drop it in the desired sidebar area and here you go. Its done :).

Widget Markup

Using the widget default markup satup by the theme (before title, after title etc...), in the widget content markup WizyLike Widget creates an unordered list with the ID of 'wizylike_mostliked' and posts are in list items with the ID of 'mostliked_post-{post-id}'. Posts are sorted in the descending order of the likes count. In a single list item, the posts title is displayed in a h4 tag with an class of 'mostliked_post_title'. Below that is the like count + the like count text spacefied in the plugin settings page. All wrapped in a span with class of 'mostliked_like_count'. The markup looks like the following

<ul id="wizylike_mostliked">
	<li id="mostliked_post-[.. post id ..]">
		<h4 class="mostliked_post_title">
			<a href=" [.. post permalink ..] " title=" [.. post title ..] "> [.. post title ..] </a>
		</h4>
		<span class="mostliked_like_count"> [.. like count ..] [.. Likes count txt e.g. 'Likes' ..] </span>
	</li>
</ul>

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Taha Hesham from Wizy Labs

Go To Table of Contents