In this part of the User Follow System tutorial series, we will be writing our function to display follow / unfollow links. These are the links that a logged-in user will click in order to follow or unfollow another user.
The links used to follow or unfollow a user, illustrated here, are displayed via a function we’re going to write called pwuf_follow_unfollow_links(). This function is pretty straight forward and will simply retrieve the output of two sets of links:
- A follow user link and an unfollow user link (hidden until user is followed)
- A unfollow user link and a follow user link (hidden until user is unfollowed)
This function will be used anywhere that we want to output the user follow links, such as at the bottom of a post, the sidebar on an author archive page, etc.
The first thing we need to do is open includes/display-functions.php and then paste the following function into 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 35 36 37 | <?php /** * Retrieves the follow / unfollow links * * @access public * @since 1.0 * @param int $user_id - the ID of the user to display follow / unfollow links for * @return string */ function pwuf_get_follow_unfollow_links( $follow_id = null ) { global $user_ID; if( empty( $follow_id ) ) return; if( ! is_user_logged_in() ) return; if ( $follow_id == $user_ID ) return; ob_start(); ?> <div class="follow-links"> <?php if ( pwuf_is_following( $user_ID, $follow_id ) ) { ?> <a href="#" class="unfollow followed" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">unfollow</a> <a href="#" class="follow" style="display:none;" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">follow</a> <?php } else { ?> <a href="#" class="follow" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">follow</a> <a href="#" class="followed unfollow" style="display:none;" data-user-id="<?php echo $user_ID; ?>" data-follow-id="<?php echo $follow_id; ?>">unfollow</a> <?php } ?> <img src="<?php echo PWUF_FOLLOW_URL; ?>/images/loading.gif" class="pwuf-ajax" style="display:none;"/> </div> <?php return ob_get_clean(); } |
The follow links can be outputted like this:
1 2 3 | <div id="follow-user"> <?php echo pwuf_get_follow_unfollow_links( $user_id_to_follow ); ?> </div> |
A sensible place to add the links would be the bottom of the post content, so let’s open single.php from Twenty Twelve (it’s a good example theme) and place our code there:
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 | <?php /** * The Template for displaying all single posts. * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <nav class="nav-single"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3> <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span> <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span> </nav><!-- .nav-single --> <div id="follow-user"> <?php echo pwuf_get_follow_unfollow_links( get_the_author_meta( 'ID' ) ); ?> </div> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?> |
And there you go! You now have follow/unfollow links at the bottom of all posts. They aren’t functional yet, but we get one step closer to making them functional in the next part when we write the javascript.
Hi,
There seems to be some missing parts in this tutorial/page. Code is not displayed.
Also, are you going to be releasing the next part of this tutorial soon?
Looking forward to seeing how you will hook up the JS to the follow/unfollow links and add AJAX calls.
Thank you! 🙂
Ah, sorry about that. I’ve just fixed it.
I’m hoping to have the next part written later this week 🙂
Hey, Pippin, this guide can be applied to any PHP script or CMS right ?
Or is it tied to wordpress ?
Can i use this guide to develop a user follow system for any other cms ?
The exact code written in this tutorial series applies only to WordPress, but you could easily take the general architecture of the plugin and carry it over to other PHP platforms.
Hi Pippin,
I wanted to ask me, if it is possible to buy the plugin?
Or at what point.
Thank you. greetings Riccarda
No, the plugin will not be sold, but it will be available as a complete download once finished.
Hi Pippin,
You can download it now, or when it will be finished? I’m excited.
Cheers Riccarda
Once it’s finished.
Hi Pippin, super I like to wait. All the best.
Cheers Riccarda
Hi
i thought the point of a plugin was that it was theme independent. Why are we hard-coding the links in the 2012 theme?
Regards
Robert Austin
The links were hard coded simply to show an example of how they can be used.
Out of interest, where would you normally put them?
Regards
Robert Austin
It depends on the implementation you are doing. If you can, adding them from the plugin is best, since it makes the theme and plugin independent of one another, but sometimes that isn’t really possible.
In the case of CG Cookie.com (the site I originally built this functionality for), I put the function calls directly into the theme files but wrapped them in a if( function_exists(…) ) check to ensure that nothing erred if the plugin was deactivated.
Ok, thanks for the explanation
Hi Pippin
I followed the tutorial and Im really new at this, so I downloaded your plugin
but when I put the code in the theme there are not links showing.
What could it be?
Thanks
Are you viewing the page while logged in?
Hi thanks for your Reply Pippin
Tried everything now, I deleted and activated the downloaded version
twenty twelve theme
no more plugins activated
When logged in as user I see the link Follow on the post
but does nothing when clicked
And on the follow links short code the same.
The only thing I don’t know if matters is that im testing on a local server installation
Tried this on twenty twelve theme because on my theme the short codes broke it, I only saw the header and from there down it was blank
Thanks again for your support
Victor
Are there any JS errors on the page?
Also i found out that the file display-functions.php on the download has more code that the explained on this part of the tutorial, so would that matter? which one should be working?
Thanks a lot
Use the version in the downloaded plugin.
Good work, Pippin – just what I needed!
Glad to hear it!
At this point yes i am one of the direct plugin installers. I installed and started reading. 🙂 At this page i added
And it didn’t work for me. Infact it also killed the single.php page.
Than i realized that i learned $post->post_author thing, So i modified the show links snippet like this, (instead of $user_id_to_follow)
post_author ); ?>
Well now there is a button showing up 🙂 But still killing the page if i put it inside the loop (the original snippet) So i put my modified on outside the loop. Reading the next page now, hope i get how to make it work properly 🙂
I am showing the author’s followers count like this
post_author);
echo count($followers_count); //counting the array
?>
It is working but am i doing right? Thanks,
That will work just fine.
As the download plugin is not working I manually created all files on my end but function pwuf_get_follow_unfollow_links is not working for me.
I’m logged as user id 1 and want follow user ID 2 so on my author.php file I added function pwuf_get_follow_unfollow_links(get_the_author_meta(‘ID’)) but the unfollow button appears, not the follow button. What should be wrong?