How to create a Blogger Card plugin that can be used to display WordPress user’s information on the front-end.
In this tutorial, I will show you how to create a Blogger Card plugin that can be used to display WordPress user’s information on the front-end.
Then, we will create a Bloggers page where we will display all authors and subscribers using a shortcode.
You can easily change/update the code and make fit your needs. You can even make it show a single user card in individual blog posts.
You can extend the plugin code as you wish or even integrate the same approach within your theme functions.php file.
To get a bit fancy we will use Web Components and create a reusable custom element called <user-card />.
You can learn more about Web Components on the Mozilla Web Docs site. This will give us some code separation (client vs server-side) so, we can then easily extend and maintain our code if we had a larger size project with many features and components.
Let’s not waste any more time and dive into it.
Note: To keep the tutorial focused on WordPress I am not going to discuss in much detail the JS and CSS code. If you have any questions ask them in the comments below.
As I mentioned in the intro we will create a Blogger Card plugin that will select all users with author and subscribe roles and display their information in a user styled card.
To display our users we will create a shortcode that can be included in any page or post using the Gutenberg shortcode block.
First, in our main plugin file, we need to load all the style and script files.
There is nothing other out of the ordinary and if you have a bit of experience with PHP and WordPress you can understand the code below easily. Even if you decide to extend the Blogger Card plugin you will probably keep the contents of this file the same.
Next, let’s take a look at the template file for our Blogger Card plugin. This is where you can extend, customize or change the user card structure.
For the current example, I have a grid and as I mentioned in the intro a custom element for our user cards.
Note: If you are not comfortable with Web Components you can easily recreate this with plain HTML, which will eliminate the JS code inside assets/
Not much to explain here as well.
We get all the author and subscriber users and then use a foreach loop to display our custom user card Web Component. Since we don’t have access to the image within the users object we need to call the get_avatar_url() function to get the URL for each user’s profile avatar image.
Inside, the assets/ directory you will find 2 files.
The first one is a very simple CSS file where I define some root (global) variables and add the styling for our main grid element.
The second file contains everything we need for our Web Component. CSS styles, creation, manipulation, and interaction within our card component.
Lastly, as you remember we used add_shortcode() function in our main Blogger Card plugin file. This gives us the ability to use Gutenberg shortcode block to load our gird with cards.
To that simply go to Blocks > Widgets > Shortcode within Gutenberg and then add [display_users] on any page or post you want to display the users component.
Hopefully, you got the general idea of how to approach this problem but I also hope that I showed you how to separate your client and server-side code using Web Components.
The same approach and implementation can and will be very useful for larger projects that have numerous features. This will come handy when you decide to extend your plugin or a theme.
‘Till the next one.
* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!