Everyone is familiar with the “Like” button from Facebook, as well as many of its spin offs from other social networks. In this tutorial, we’re going to create our own version of the “like” button, but it is going to be a “love it” button and also specific to our website. Our plugin is going to use ajax to process the “love it” button clicks, it will display the total number of loves, and it will also have a widget to display the most loved items.
Demo of What We are Creating
A Pro version of this plugin is available for download and purchase.
The plugin itself is not overly complicated, but it may appear that way if you’re not really familiar with some of the methods I’m going to use. There are two primary methods I’m going to use in this tutorial that can seem complex, but are really pretty simple. One, I will use the post meta options and the user meta options to store information about “loves”. Two, since all of our processing is done via ajax when a “love it” button is clicked, we are going to be using the WordPress ajax API, which can be very confusing if you don’t know how it works.
As with all my plugins, the plugin will be broken up into individual files. Each file will serve a specific purpose. The files we will create are as follows:
- love-it.php – main plugin file
- display-functions.php – for displaying the love it button
- love-functions.php – for processing loves and similar actions
- scripts.php – for loading our jQuery scripts
- love-it.js – jQuery for sending ajax requests
- widgets.php – for registered our “most loved” widget
We will start with the main plugin file, which lives inside of the folder called “love-it”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php /* Plugin Name: Love It Plugin URI: https://pippinsplugins.com/write-a-love-it-plugin-with-ajax Description: Adds a "Love It" link to posts, pages, and custom post types Version: 1.0 Author: Pippin Williamson Contributors: mordauk Author URI: https://pippinsplugins.com */ /*************************** * constants ***************************/ if(!defined('LI_BASE_DIR')) { define('LI_BASE_DIR', dirname(__FILE__)); } if(!defined('LI_BASE_URL')) { define('LI_BASE_URL', plugin_dir_url(__FILE__)); } /*************************** * language files ***************************/ load_plugin_textdomain( 'love_it', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); /*************************** * includes ***************************/ include(LI_BASE_DIR . '/includes/display-functions.php'); include(LI_BASE_DIR . '/includes/love-functions.php'); include(LI_BASE_DIR . '/includes/scripts.php'); include(LI_BASE_DIR . '/includes/widgets.php'); |
This file simply defines our plugin name, the author, plugin URL, etc; all of that stuff we are so used to creating by this time 😉
We also take a moment to define a couple of constants: one for the directory path to our plugin folder, and one for the URL to our plugin folder. The LI_BASE_DIR constant will be used for including our other plugin files into our main plugin file, and LI_BASE_URL will be used for loading script files (and CSS if you decide to add them).
After we define our constants, we load our language files. This is for our non-English speaking friends. If you’re not familiar with how to translate your plugins, read through my tutorial on the subject.
Lastly, we include each of our other plugin files into the main file using include().
That’s it for the main file.
Displaying the “Love It” Button
We are going to write one function now that will display the “love it” link after our item content when we are viewing a singular post, page, or custom post type. This function goes in display-functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // adds the Love It link and count to post/page content function li_display_love_link($content) { global $user_ID, $post; // only show the link when user is logged in and on a singular page if(is_user_logged_in() && is_singular()) { ob_start(); // retrieve the total love count for this item $love_count = li_get_love_count($post->ID); // our wrapper DIV echo '<div class="love-it-wrapper">'; // only show the Love It link if the user has NOT previously loved this item if(!li_user_has_loved_post($user_ID, get_the_ID())) { echo '<a href="#" class="love-it" data-post-id="' . get_the_ID() . '" data-user-id="' . $user_ID . '">' . __('Love It', 'love_it') . '</a> (<span class="love-count">' . $love_count . '</span>)'; } else { // show a message to users who have already loved this item echo '<span class="loved">' . __('You have loved this', 'love_it') . ' (<span class="love-count">' . $love_count . '</span>)</span>'; } // close our wrapper DIV echo '</div>'; // append our "Love It" link to the item content. $content = $content . ob_get_clean(); } return $content; } add_filter('the_content', 'li_display_love_link'); |
There seems to be quite a bit going on in this function, but it’s really pretty simple. First we check to make sure the user is logged-in (to make this tutorial simpler, we’re only allowing logged-in users to Love items) and that we are on a singular page. The check for the singular page prevents the Love It button from being outputted on archive and search results page.
Once we have determined that we should be displaying the Love It button, we use our li_get_love_count() function, which we will write a moment, to retrieve the total number of loves this item has, or the number of times the Love It button has been clicked.
Next, we setup a DIV wrapper for our button. This makes it easier to style and makes our markup a bit cleaner and compatible with more themes.
Inside of our DIV wrapper, we check quickly to see if the user has already loved this item or not by using the li_user_has_loved_post() function, which we will also write in a moment. If the user has not loved the item, then we display the button, but if they have, we display a message telling them they have already loved the item.
Take a good look at the anchor tag element that we create for users who have not loved the current post or page. It has several custom “data” attributes. These will be read by our jQuery so that the function that processes the ajax requests knows which post/page ID is being loved, and which user is loving the item.
At the end of the function we simply append our new link (which is contained in the output buffer) to the item’s $content.
Writing Our Processing Functions
It is now time to write the functions that will check whether a user has loved an item, will mark an item as loved, and will retrieve the total loves an item has received.
These functions all go in the love-functions.php, which is located inside of the includes/ directory.
First we will create the function to check if a user has already loved a post.
1 2 3 4 5 6 7 8 9 10 | // check whether a user has loved an item function li_user_has_loved_post($user_id, $post_id) { // get all item IDs the user has loved $loved = get_user_option('li_user_loves', $user_id); if(is_array($loved) && in_array($post_id, $loved)) { return true; // user has loved post } return false; // user has not loved post } |
All post/page IDs loved by a user are stored in the user meta table, and so to check whether a user has loved a post, we need to retrieve the option for our specific user ID. This is done with the get_user_option() function. Note that I am not using the get_user_meta(). This is because get_user_meta() will retrieve the meta value for the user from across the entire network, when using WordPress multi site. Since we want to make sure that we support sites that on a network install and those that are not, we use get_user_option() instead.
If get_user_option() returns a value, it will come back as an array, so we use is_array() and in_array() to check to make sure that the option is an array and that our post ID, which we passed to the function, is held in that array. If both conditionals validate as true, we return the function as true. Otherwise it is returned as false.
We are now able to detect when a user has loved a post, but now it’s time to write the function that will store a post ID as loved for the current user.
1 2 3 4 5 6 7 8 9 10 | // adds the loved ID to the users meta so they can't love it again function li_store_loved_id_for_user($user_id, $post_id) { $loved = get_user_option('li_user_loves', $user_id); if(is_array($loved)) { $loved[] = $post_id; } else { $loved = array($post_id); } update_user_option($user_id, 'li_user_loves', $loved); } |
This one is really simple. The function takes two parameters, just like our previous function: one for the user ID and one for the post/page ID.
We use get_user_option() again to retrieve all of the IDs the user has already loved. If the user has loved at least one item, get_user_option() will return an array, so we simply append our current post ID to the array using $loved[] = $post_id;. If the user has never loved an item, get_user_option() will not return an array, so we setup a simple array and place the $post_id as the only key in it.
Once we have added our post ID to the array, either as an additional key or as a new array, we use update_user_option() to store the array in the user’s meta.
Those are the only two functions needed for recording a post as loved for users, but now we need to store posts as loved in the meta of the post that is loved. This allows to keep track of and record “love counts”.
When a “Love It” button is clicked on a post, the total number of times the post has been loved is incremented by one, so the function we are going to write now we do a couple of things:
- Check if the post has ever been loved before
- Increase the love count by 1 if it has been loved
- Set the love count to 1 if it has never been loved
- Store the final, updated love count so it can be retrieved at any time
- Store the post ID in the user’s meta who loved the post with li_store_loved_id_for_user()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // increments a love count function li_mark_post_as_loved($post_id, $user_id) { // retrieve the love count for $post_id $love_count = get_post_meta($post_id, '_li_love_count', true); if($love_count) $love_count = $love_count + 1; else $love_count = 1; if(update_post_meta($post_id, '_li_love_count', $love_count)) { // store this post as loved for $user_id li_store_loved_id_for_user($user_id, $post_id); return true; } return false; } |
This function works nearly identical to the li_store_loved_id_for_user(), except we are using it with the get_post_meta() instead of get_user_option().
When a post’s love count has been successfully incremented, we also use the function we wrote just before this, li_store_loved_id_for_user(), to store the post ID in the user’s meta, ensuring that they are not able to love a post more than once.
This li_mark_post_as_loved() function will be called by our ajax function that runs when the “love it” button is clicked.
Now we need to write the function that retrieves the number of times a post has been loved. This one is really easy:
1 2 3 4 5 6 7 | // returns a love count for a post function li_get_love_count($post_id) { $love_count = get_post_meta($post_id, '_li_love_count', true); if($love_count) return $love_count; return 0; } |
If there is a record of loves, the number is returned, otherwise 0 is returned because the post has never been loved.
There is just one more function to write in this file, and that is the function that listens for our ajax requests and then calls the function that marks a post as loved.
1 2 3 4 5 6 7 8 9 10 11 12 | // processes the ajax request function li_process_love() { if ( isset( $_POST['item_id'] ) && wp_verify_nonce($_POST['love_it_nonce'], 'love-it-nonce') ) { if(li_mark_post_as_loved($_POST['item_id'], $_POST['user_id'])) { echo 'loved'; } else { echo 'failed'; } } die(); } add_action('wp_ajax_love_it', 'li_process_love'); |
This function uses the WordPress ajax API to process the ajax request sent from our jQuery file (which we haven’t written yet).
When a request is sent from the jQuery, we check to make sure that the ID of the post being marked as “loved” is sent, and also that the nonce (for security) checks out. If everything validates, and our li_mark_post_as_loved() function returns TRUE, then we echo out “loved”. This tells jQuery that everything worked fine and it can do whatever it needs to do (such as dynamically increasing the love count displayed on the page). If something goes wrong, we echo “failed” so that jQuery can tell the user something went wrong.
If you need more help understand what we are doing here, then consult my tutorial on processing ajax requests in plugins.
We are now done with the love-functions.php file. Time to move onto our scripts.php.
Loading the jQuery Scripts
The scripts.php file only contains one function, and it is used to load our jQuery file (for sending ajax requests), and also for defining some variables that will be available to our jQuery script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function li_front_end_js() { if(is_user_logged_in() && is_singular()) { wp_enqueue_script('love-it', LI_BASE_URL . '/includes/js/love-it.js', array( 'jquery' ) ); wp_localize_script( 'love-it', 'love_it_vars', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce('love-it-nonce'), 'already_loved_message' => __('You have already loved this item.', 'love_it'), 'error_message' => __('Sorry, there was a problem processing your request.', 'love_it') ) ); } } add_action('wp_enqueue_scripts', 'li_front_end_js'); |
Since our “Love It” button is only displayed on singular pages when the user is logged in, we only load our jQuery script when on singular pages and our user is logged-in. Remember, we want to be careful to only load our jQuery scripts when they are needed; no other time.
You should be familiar with wp_enqueue_script() by now, but you might not recognize wp_localize_script(). This function is used for making variables (which can be defined in PHP) readable by the jQuery. When we use wp_localize_script(), whatever we pass as the name in the second parameter will be created as an object, and then each of the elements inside of the array, passed as the third parameter, are created as items in the object. When the page is loaded, it will look like this:
love_it_vars {
'ajaxurl' : 'http://yoursite.com/wp-admin/admin-ajax.php',
'nonce' : 'nonce_value_here',
'already_loved_message' : 'Message here',
'error_message' : 'Message here'
}
This is really cool because it allows us to access each of these variables from our jQuery, but define them in the PHP. Why is this really cool? Well, for one it allows us to define the messages with localization so that any messages displayed through javascript alerts can still be translated. There are a lot of other reasons as well.
Our function is attached to the “wp_enqueue_scripts” action, which loads our files and variables onto the page.
Alright, that’s it. Time for the jQuery.
Writing the jQuery
The jQuery is going to be written in our love-it.js file, which is stored in the includes/js/ directory.
While it might look a little complex, the jQuery is really pretty straight forward. We are going to listen for when the “love it” button is clicked, then we will setup a couple of variables for the user ID and post ID (which you should recall were set with the custom “data” attributes in our display function), and then we will send the data via POST so it can be processed with PHP. There are a couple of other minor things happening, but I’ll explain them in a moment.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | jQuery(document).ready( function($) { $('.love-it').on('click', function() { if($(this).hasClass('loved')) { alert(love_it_vars.already_loved_message); return false; } var post_id = $(this).data('post-id'); var user_id = $(this).data('user-id'); var post_data = { action: 'love_it', item_id: post_id, user_id: user_id, love_it_nonce: love_it_vars.nonce }; $.post(love_it_vars.ajaxurl, post_data, function(response) { if(response == 'loved') { $('.love-it').addClass('loved'); var count_wrap = $('.love-count'); var count = count_wrap.text(); count_wrap.text(parseInt(count) + 1); } else { alert(love_it_vars.error_message); } }); return false; }); }); |
At the top of the jQuery, we check to see if the button has the “loved” class (meaning it has already been loved); if it does, we return false to prevent the ajax request from firing when it’s not needed.
Next, we setup the variables for the user and post IDs. These are retrieved from the custom “data” attributes. Once we have both of those, we setup a “post_data” object that contains everything that we are sending to PHP. This includes an “action”, which is required by the WordPress ajax API, an item ID (the post ID), a user ID, and a nonce value (for security). Note that the nonce value is retrieved using love_it_vars.nonce; this is how we access the variables we defined with wp_localize_script() in the previous section.
As soon as we have our “post_data” object setup, we use the jQuery $.post function to send the data to WordPress. All of the data is sent to the li_process_love() function, which was the last function we wrote in the love-functions.php file.
Recall in the li_process_love() function we echoed out “loved” or “failed”, depending on whether the “love” was processed successfully or not. This echo is interpreted by jQuery as the response (and the third parameter) of our $.post function.
We use the response to know if the post was successfully loved; if it was, then we add the “loved” class to our button and increase the count displayed in the parentheses. If “response” comes back as “failed”, then we alert the user that there was a problem processing their request.
That’s it! You should have a fully functional “love it” button that you can use to mark any post/page/custom post type as “loved”.
There is just one more thing to build: a widget to display the most loved items.
Building the Most Loved Widget
We are going to make a widget now that will allow us to display a specified number of the most loved items from our site. The most loved items will be displayed in descending order, meaning that those items with the most loves are displayed first.
The widget is pretty simple, though I’m not going to show you how to actually write the whole widget. I’m going to demonstrate how to setup the most loved query; if you need help setting up the widget itself, then consult the tutorial series I wrote on building widgets.
To query the most-loved items, we need to use the meta_key parameter to only pull in items that have been loved at least once. We also tell get_posts() to order the items by meta_value; posts with a higher love count have a higher meta value.
The query looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="most-loved"> <?php $args = array( 'post_type' => 'any', 'numberposts' => $number, 'meta_key' => '_li_love_count', 'orderby' => 'meta_value', 'order' => 'DESC' ); $most_loved = get_posts( $args ); foreach( $most_loved as $loved ) : ?> <li class="loved-item"> <a href="<?php echo get_permalink($loved->ID); ?>"><?php echo get_the_title($loved->ID); ?></a><br/> </li> <?php endforeach; ?> </ul> |
When combined with our widget code, which is placed in includes/widgets.php, everything together looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <?php /** * Most Loved Widget Class */ class li_most_loved_widget extends WP_Widget { /** constructor */ function li_most_loved_widget() { parent::WP_Widget(false, $name = __('Most Loved Items', 'love_it'), array('description' => __('Show the most loved items', 'love_it'))); } /** @see WP_Widget::widget */ function widget($args, $instance) { extract( $args ); $title = apply_filters('widget_title', $instance['title']); $number = strip_tags($instance['number']); echo $before_widget; if ( $title ) echo $before_title . $title . $after_title; ?> <ul class="most-loved"> <?php $args = array( 'post_type' => 'any', 'numberposts' => $number, 'meta_key' => '_li_love_count', 'orderby' => 'meta_value', 'order' => 'DESC' ); $most_loved = get_posts( $args ); foreach( $most_loved as $loved ) : ?> <li class="loved-item"> <a href="<?php echo get_permalink($loved->ID); ?>"><?php echo get_the_title($loved->ID); ?></a><br/> </li> <?php endforeach; ?> </ul> <?php echo $after_widget; } /** @see WP_Widget::update */ function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['number'] = strip_tags($new_instance['number']); return $instance; } /** @see WP_Widget::form */ function form($instance) { $title = esc_attr($instance['title']); $number = esc_attr($instance['number']); ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /> </p> <p> <label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Number to Show:'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" /> </p> <?php } } add_action('widgets_init', create_function('', 'return register_widget("li_most_loved_widget");')); |
Place the newly registered “Most Loved Items” widget in a widgetized sidebar and see the effect.
Concluding Thoughts
This plugin works really, really well for tracking items that the most loved across your website. It is also really great for giving your users an easy way to provide positive feedback, without requiring that the need enter any information.
There are certainly some areas it can be improved:
- Update the plugin so that users who are not logged-in can “love” items as well
- Style “love it” buttons to be visually appealing, instead of plain links
- Add options to the plugin to allow users to adjust where the “love it” button is displayed
Sometime in the coming weeks, I will be releasing an enhanced version of this plugin that includes the suggested improvements above.
Note, you can also see the exact effect created with this plugin at the bottom of this post. See the “Love It” link? Click it 🙂
The complete, Pro version of this plugin is now available.
Download the PluginEnjoy!
Nice feature, and well explained! Just a question, how do you get the “Switch to” link in users list ?
Thanks! It’s a plugin called “User Switching”: http://wordpress.org/extend/plugins/user-switching/
I always find it helpful having an explanation broken down into bite-size chunks like this. I learned a few nice techniques that will certainly help in my own coding. In fact, I have a project where I need a star rating for a custom post type and I’m not happy with any of the available ratings plugins. I may end up building on what you’ve described here for that purpose. So thanks for the timely tutorial.
Glad to help!
Sounds exactly what I’ve been looking for. Any chance you can make it so it works with Cube points (ie users get points for liking items?)
Thanks in advance.
Kate
No, I probably won’t make it work with Cube points, but I might at some point build a point system into it.
Hi Pippin
Can you display my love it list in author.php ?
Are you wanting it each post in the author archive, or just for the author page in general?
just author.php
wordpress homepage register own user each Love It post
Sorry, this is possible with this plugin.
Hi, Pippin. Love it! 🙂 What about enhanced version?
Right here: https://pippinsplugins.com/love-it-pro/
Oops. I missed it 🙂 Thanks! 🙂
Wow, I just got this to work. It’s great!
Can you elaborate on this syntax?
__(‘You have loved this’, ‘love_it’)
How does the message get interpreted by ‘love_it.js’?
‘You have loved this’ never appears when you click again on the Love It button. Only the designated ‘already_loved_message’. Does this mean that the first parameter is just a note to the developer?
In the section where we loaded the jQuery scripts, there is a function called wp_localize_script(). This function allows us to map information from PHP to Javascript.
Read through my tutorial on wp_localize_script and it should make perfect sense.
I’m still confused. In your wp_localize_script tutorial, you use this syntax:
‘alert’ => __(‘Hey! You have clicked the button!’, ‘pippin’)
But why not just: ‘alert’ => ‘Hey! You have clicked the button!’;
What does ‘pippin’ refer to? I don’t see it referenced anywhere.
Alex the reason for it is so that the text “Hey! You’ve clicked the button!” can be translated into other languages. The “pippin” part refers to the text domain. See my tutorial on localizing and translating plugins for more info: https://pippinsplugins.com/localizing-and-translating-wordpress-plugins/
There are many more applications for this function, but this is a simple example.
Thanks Pippin.
I’m building my own plugin around this framework. One thing that would definitely sell me a subscription to your site is if you added an advanced tutorial to add an additional layer of AJAX:
1st Layer – Love it. yes/no recorded in database
Second Layer – What do you love about it? text field pops up and allows the user to write some feedback and execute another action. I’m not sure how this is done but I’m guessing the wp_localize_script has to be called again perhaps on a newly created class from the first AJAX call. Am I on the right track?
Hmm, that is a cool idea and is absolutely possible. If I can think of a good way to showcase it, I’ll look into doing it.
Nice tutorial, but I have one notice:
Sending user-id to ajax-processor function through html isn’t good. It can be easily replace by any user using a simple Chrome’s Inspector.
It will be much better and easier to use wp_get_current_user() function in li_process_love(). It will work there.
or even:
global $current_user;
$current_user->ID;
Yes, that is true, it would be better to do that 🙂
Hey Pippin, how’s it going? pretty awesome plug in that you showed.I have got a little question. I followed all the directions of yours but somehow the widget doesn’t show up anywhere in the widgets page of wordpress, what would you suggest or think seems to be the problem? Also the love-it link that is at the end of the post or page, does it show up when i have finished the final step or do i see it somewhere along the code?
Sounds like there is an error somewhere in your widget code. Can you show me the complete code? paste it into snippi.com and share the link.
The Love It links will show up on every post / page as long as you are logged in.
Hey, thanks a lot for the response. I have created 6 links for you. Each of them have a description in them on the top of the page to tell where exactly the file was along with the code. I really appreciate the help 🙂
http://snippi.com/s/oz5qwce
http://snippi.com/s/ynu1vll
http://snippi.com/s/gp9r9w4
http://snippi.com/s/whmddt7
http://snippi.com/s/nwapuhh
Does the plugin activate okay without error?
sorry for the double post. The page refreshed and didn’t show me the post/reply so i thought it didn’t work
yeah, the plugin seems to work just fine but my boss says he doesn’t want the plugin because how plugins slow down the website. He wanted to work on the widget for that reason.
Your boss is 100% wrong. There is absolutely nothing different in terms of performance between using the plugin and having the code placed inside your theme. It is identical.
i see. There is also the case of having too many plugins and he doesn’t really want that either. He wants me to somehow find out the way to add this php code into the main place so we can see the love it widget. If you didn’t find any problems with the code, is there something that you would like to suggest then?
The idea of having too many plugins incorrect as well, assuming your plugins are all good quality. In this case, there really is zero difference between placing this code in your theme or in the plugin. The code in the tutorial is nearly identical to the plugin code, so just use the plugin. If you’d like a more technical reason to why there is no difference, I’ll be more than happy to give one 🙂
hey, a quick question, i am not sure if it actually or not, but many of your files start with
“<?php…" but you never close them at the end or so i believe. Does this have any effect on the overall widger? Could this be a posisble reason why it is not showing up? Thanks
The ?> is not needed when at the end of files, so no, it’s not causing any problems.
Hey, thanks a lot for everything. I can’t seemed to figure out then why is it not showing on the website then. Hopefully we’ll end up using the plugin since you say there is really no difference in performance. Not that is really necessary but if you don’t mind, you can tell me why there is no difference for just for information, that would be great. Thanks for everything 🙂
Where did you place all of the code? Did you put all in your theme’s functions.php?
hey, so a last thing i need your help on.
1. when i use the plugin, and click the love it, then refresh it, it stays saying you’ve already loved this item. I believe according to your demo tutorial, it wasn’t supposed to do that and was supposed to refresh. i thought that this would be because of having too many folders of love it in the themes folder, i deleted them, deleted the plugin, installed again and still the same problem.
example: http://consejosparahacerelamor.org/blog/2011/01/12/hello-world/?trashed=1&ids=1
2. I was trying to find out how to use an image. I copied the code of the person on the other post of ” love it pro by the name of ricardo guilliani i believe, and added my link, but can’t seemed to understand why it wouldn’t work.
CSS: http://snippi.com/s/d27shnq
am i making a mistake somewhere? its in the themes\thesis\custom\ directory
Thanks 🙂
1. Is this problem with the unchanged plugin or with the “theme” version you have made?
2. Did you place that CSS into a .css file that is loaded by the theme?
Hey, all of the code was placed in the custom_functions.php. Boss said not to mess with functions.php
in the other side with the widget refresh problem
1. The problem is with both. Its with the plugin and with the widget itself.
2. so this is what i did. I uploaded the image that i wanted, then i took the link of the file/pic from the website, and added that link to the .css file that was in the themes folder. i checked the code multiple times and kinda was getting an idea from someone else but i still don’t see the problem.
Thanks for all the help
Abdul
Did you adjust the file URLs used in the plugin code to reflect the file structure around your custom_functions.php?
I apologize but can you elaborate more on exactly what you are referring? I am not aware that i was to adjust something, if you can point me to the right direction, that’d be great.
The code in this tutorial is separated into multiple files and the URLs used to include each file refers to a location based on the plugin’s location, but since you have the code placed into a theme file, those file paths will break, unless you have modified them.
I’m going to advise you again to just activate this as a plugin. Really, it will save you a ton of trouble.
yeah, i kinda told my boss the final thing was to use it as plugin but i doubt he’s gonna stop there. I appreciate all your help, i don’t think i am going to work on that more.
in terms of your response, no sorry, i wasn’t aware of that. If i have some time tomorrow, i will try to see if i had to fix any links. i didn’t modify any, wasn’t sure about it. Tomorrow is my final day as an intern so if i can, i will try to do what i can otherwise, i had given my best on this. I appreciate all your help as usual
Abdul
OK, let me know if there is anything else I can do for you.
Hi, is there a chance to can love only register user.. and I want to create page Posts I love, with posts where will show only posts that this user love it.. Can this be done?
It would not be hard to do at all, though is beyond the scope of this tutorial. Are you familiar with custom post queries in WordPress?
Thanks for this plugin…just got the enhanced version today.
Quick question: I’m trying to separate the love count from the button action. I’ve managed to display the link text (which I made into a button) and have hidden the count next to the button. So I’m displaying the count elsewhere on the page. The problem is that clicking the button doesn’t update the count. Any advice on how to achieve this?
Thanks in advance for any help.
Can you show me the exact markup you’re using for the count?
Hi. Thanks for responding so quickly!
This is for a work-related project and I’m modifying a bit of your code to make it work. I want to display a heart next to the count in a “stats” area about the post. In that area, I’ve got something like this:
$tmp = lip_get_love_count($post_id);
echo ”.$tmp.”; And the number appears next to a heart icon.
Then a bit lower on the page where all the “actions” are I’m doing this: And then I’ve modified the lip_love_it_link to be a button.
Seems fine on the front end, but clicking the link button doesn’t increment the counter. It does increment the loves, b/c on page refresh the counter increments. What I’m hoping for is that clicking the link button will increment the counter via ajax.
Thanks for your help!
By default, the plugin wraps the count in a SPAN.love-count container. In the JS, this is used to determine where the counter is located: var count_wrap = $this.next();
Simply change the count_wrap var to point to your custom container.
Do you know how to do that?
Thanks! I’m not experienced with JS so I couldn’t figure out how to target my container. Thank you so much! Cool plugin.
A probably simpel question.. I try to use the widget whit the counter for pages which are liked. There is the posebility to choose the pages which are liked by giving the page number. But only page 1 words, do I have to use a , or a ; ore something between the numbers of the pages? Thanks for helping me out.
Use a comma between the page IDs.
Hi Pippin,
Thanks for the awesome tutorial!
I’ve got two questions about it:
1. I would like that every visitor can like posts, if they are logged in or not. I’ve tried to remove the
is_user_logged_in, and replace of remove them. But then I’m getting this error message: “Sorry, there was a problem processing your request”. Is this only possible in the Pro version?2. Is it possible to display the like count on a custom place in my website? For example: I would like to display the like count not at the bottom of the content, but below the date of the post.
Thanks in advance!
1. You will have to update more than just the is_user_logged_in(). The Pro version does have support for both logged in and logged out users.
2. Yes, absolutely. Do you see the function that outputs the count?
Thanks for your reply.
1. Do I have to update a lot of code? Like the structure of the code?
2. Yes, the function “li_love_link” and “li_display_love_link”. Is that correct?
1. There’s not a ton to update, but more than I can show you here in the comments.
2. No, li_get_love_count( $post->ID );
Thanks again for your quick reply.
1. Is it possible to mail the code or is it too much you’ve got to edit? I would really appreciate it! Because for me the Pro version has too much options. I’m only looking for a “simple” like/love plugin, without options for the user.
2. Ok, I see the function!
1. No, sorry, you’ll need to purchase the pro version if you want it. The ability to have it for logged-in and out users is really the main feature of the pro one. The only other big difference is the granular control over where the links are shown.
Ok, no problem! I’ll purchase the pro version.
Thanks for all your help!
Hello, Pippin!
First, great plugin, i like it so much!
Second, i want to tell me, please, how to intregrate (fit in) this plugin in front page, not only in single page. Now your plugin is display it only in single page.
More accurate, i want to display it to “post meta” ( near to caregories, admin etc ).
Can you tell me, please, how to do that?
Thank you!
Are you comfortable editing your theme’s template files?
I can try. :))
Just tell me, please.
Thanks!
You will place the li_love_link() function into your theme template files, like this:
echo li_love_link();
Make sense?