In this final part of the User Follow System tutorial series, we will create two short codes, one for displaying a follow/unfollow link for a user and one for displaying a list of recent posts from users you (the currently logged-in user) follow. We will wrap up the series by also showing a few areas the plugin could be improved to create a more complete plugin.

The first short code we will write is the one to output the follow / unfollow links.

In one of the previous parts, we wrote a function called pwuf_get_follow_unfollow_links(), which allows us to retrieve the follow / unfollow links for a specific user. Our short code, which we will call [follow_links], will simply be a wrapper of this function. Go ahead and open includes/shortcodes.php and place the following in it:

/**
 * Shows the links to follow/unfollow a user
 *
 * @access      private
 * @since       1.0
 * @return      string
 */
 
function pwuf_follow_links_shortcode( $atts, $content = null ) {
 
	extract( shortcode_atts( array(
			'follow_id' => get_the_author_meta( 'ID' )
		),
		$atts, 'follow_links' )
	);
 
	return pwuf_get_follow_unfollow_links( $follow_id );
}
add_shortcode( 'follow_links', 'pwuf_follow_links_shortcode' );

This short code is really quite simple. The first thing we do is allow the site admin to pass an attribute to the short code called follow_id. This is the user ID we want to output follow / unfollow links for. If the attribute is left blank, we default to retrieving the author ID of the current post.

Once we are finished retrieving the short code attributes, we simply return the pwuf_get_follow_unfollow_links() function (note that we have passed in $follow_id).

That’s it for our first short code. If you place it on a page or post and then view that post or page while logged into another user account (cannot be the same as the post author), you will see the follow link and it will be fully functional.

Now lets write our short code that displays recent posts published from the users we follow. This short code is a little more complex, but still pretty simple, thanks to the helper functions we wrote in the previous parts of this series.

We will start with a shell function:

/**
 * Shows the posts from users that the current user follows
 *
 * @access      private
 * @since       1.0
 * @return      string
 */
 
function pwuf_following_posts_shortcode( $atts, $content = null ) {
 
	// Make sure the current user follows someone
	if( empty( pwuf_get_following() ) )
		return;
 
	$items = new WP_Query( array(
		'post_type'      => 'any',
		'posts_per_page' => 15,
		'author__in'     => pwuf_get_following()
	) );
 
	ob_start();
 
       // output will go here.
 
	return ob_get_clean();
 
}
add_shortcode( 'following_posts', 'pwuf_following_posts_shortcode' );

We are doing a few things here:

1. We check to ensure the current user is following at least one user.

2. We setup a WP_Query to retrieve items from users we follow. Notice that we pass pwuf_get_following() to the author__in parameter. This parameter expects an array of user IDs, which is exactly what pwuf_get_following() gives back to us.

3. We setup an output buffer, which is where we will create the actual output of the short code.

The output will be a simple unordered lists of post titles linked to their respective single views.

Here’s the complete short code:

/**
 * Shows the posts from users that the current user follows
 *
 * @access      private
 * @since       1.0
 * @return      string
 */
 
function pwuf_following_posts_shortcode( $atts, $content = null ) {
 
	// Make sure the current user follows someone
	if( empty( pwuf_get_following() ) )
		return;
 
	$items = new WP_Query( array(
		'post_type'      => 'any',
		'posts_per_page' => 15,
		'author__in'     => pwuf_get_following()
	) );
 
	ob_start(); ?>
<ul>
<ul><?php if( $items->have_posts() ) : ?> <?php while( $items->have_posts() ) : $items->the_post(); ?>
	<li class="pwuf_following_post"><?php the_title(); ?></li>
</ul>
</ul>
<?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else : ?>
<ul>
<ul>
	<li class="pwuf_following_post pwuf_following_no_results"><?php _e( 'None of the users you follow have posted anything.', 'pwuf' ); ?></li>
</ul>
</ul>
<?php endif;
	return ob_get_clean();
 
}
add_shortcode( 'following_posts', 'pwuf_following_posts_shortcode' );

The way we are using WP_Query in this short code is pretty standard, so I won’t go into an explanation of everything in the post loop, but feel free to ask questions if you are unsure of any part of it.

We now have two fully functional short codes, and with that our plugin is complete! Users can be followed, unfollowed, and recent items from users you follow can be viewed. We have also laid the ground work for a much larger set of functionality, such as incorporating a follow system into a site like CG Cookie.com

Though our plugin is complete, there are still several areas it could be improved.

1. We could add options to [following_posts] short code to determe the number of items displayed, the post types items are pulled from, and even things like pagination support.

2. We could add a complete template file engine that would allow site owners to easily modify the output of the functions and short codes without ever modifying the core plugin.

The completed plugin can be downloaded below.

Download Plugin

Join now to gain access to this tutorial and more.

Join Now
  1. Burak Birer

    Any luck with the pagination? It is really important. I am trying to add it like about 4 hours and no luck πŸ™

    • Pippin

      Could you show me what you have tried?

    • Burak Birer

      Oh yes πŸ™‚ Thank you for your reply,

      First i used the query directly in the page template for newsfeed page. Instead of shortcode, (i figured our it would be easier to control with one loop) Here it is

      YENΔ° GELENLER

      NEWS FEED

      <?php

      $following = pwuf_get_following();

      if( empty( $following ) ) {

      echo '

      You're not following anyone!

      ';
      return;

      }

      $items = new WP_Query( array(
      'post_type' => 'post',
      'posts_per_page' => 20,
      'paged' => $paged,
      'author__in' => pwuf_get_following()
      ) );?>

      have_posts() ) : ?>

      have_posts() ) : $items->the_post(); ?>

      ID ), 'large' ); ?>

      <div class="myclass" id="post-">

      <a href="" class="justa__link">
      <img src="" class="responsive_image">

  2. Burak Birer

    Did you get the code i replied for pagination?

    • Pippin

      Where did you send it?

  3. Mamun Hoque

    How to show my following user in a page?

  4. Mamun Hoque

    individual users to be able to see his or her followers just by clicking the tab. For example, mamun would click 12,345 followers and be able to see and connect to their page.

    example link : http://cgcookie.com/followers/3pointedit

    • Pippin

      You could create another short code for that and use the get_followers() function to retrieve a list of user IDs. Once you do that, it’s just a matter of looping through the IDs and displaying their names and information.

  5. Burak Birer

    It would be great to get a part 8 or extended tutorial for these must haves like pagination support and followers list, following list. I subscribed just for this very tutorial and did not unsubscribe but it really would be great to have some new updates on the topics. Thanks for your understanding,
    Best,

    • Pippin

      Thanks for the suggestion.

      Are there specific parts of building those features you are unsure about?

  6. Raymond Moore

    I also subscribed for this.. I guess I am unclear why the name of the user we are following cannot be displayed. Just a list of items. It would be nice to see an update on this. Although, I’m not sure how in depth it would be to add this feature. As for a follower plugin this portion missing in the code this is necessary. Also, would be a good way to show end users how to loop through posts using get_followers() and display the user_id with the list of items. Anyways, thanks Pippin for a wonderful start and a thorough explanation.

    • Pippin

      It certainly can be, it’s just not done by default in the plugin as is. This tutorial series is meant to provide you the framework you need to understand how to build this type of plugin. Displaying the name of the user would be quite simple since you have the user ID.

  7. David Horn

    Hi – on this part, Part 7, I don’t see any of the tutorial. I’m logged in, and I get the intro paragraph talking about what we’re going to cover (shortcodes), but then it goes straight into the comments.

    On viewing the inspector, it looks like you have a mis-formatted tag – it is written

  8. David Horn

    … sorry, looks like my code was commented out. You have a ‘more’ tag that is preceded by the ‘hide all html’ tag … you’ll see what I mean! Thanks.

    • Pippin

      Fixed!

  9. Gabriel

    Hi Pippin,
    Thank you so much for the tutorial series!
    I’m looking into doing something like this for a project and came across this series.
    I noticed it started back in 2012 and I just thought I’d ask what are your thoughts in regards to using wordpress for such systems?
    Is the CG site still using this same system to this day as well?
    Looking forward to hearing back from you.
    Thank you

    • Pippin

      WordPress can work very, very well for this!

      CG Cookie is still using this system, though there version has seen numerous updates since it was originally built.

    • Gabriel

      Fantastic!
      Thanks for such a quick reply Pippin.
      I’m also having a look at your “Love Post” plug in. Looks great!
      Basically we are looking into having a lot of similar capabilities to something like instagram (still not a clone).
      Have you ever custom-built a similar notification system?
      Or user @mentions in comments etc attached to notifications?
      Any light you could shed (maybe a tut πŸ™‚ would be greatly appreciated!
      It’s soooooo hard finding any resources when looking into extending wordpress in that direction.

  10. mike mzer

    How may I Get the following or followers count for a user to display in addition to the follow/unfollow links? Kindly provide a clue. Thanks

    • mike mzer

      I figured this out already as shown below:

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match