Create a Complete WordPress Blogger Card Plugin Using Web Components

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.

Download the Blogger Card plugin code available on GitHub.

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.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

The Plugin

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.

The Template

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.

The Assets

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.

If you get overwhelmed by the JavaScript code and you don’t have any experience with Web Components you can simply recreate the template using plain HTML, then grab the CSS from the JS file and add it into the card.css.

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.

How to display blogger card with shortcode and web components

What’s Next?

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.

Download the Blogger Card plugin code available on GitHub.

‘Till the next one.

* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!

Related Content

Track your WordPress.org Plugin Stats on Your Site

How to track your WordPress.org plugins statistics and display them as a widget within your own theme.

READ MORE...

Adding License Key Feature to Your Premium WordPress Theme or Plugin (2/3)

How to set up our API server and link up the previously created functions with our server app.

READ MORE...

Override Gutenberg Blocks & Create Gallery Modal Window

Have you ever wondered how to extend and override a default/existing Gutenberg block?

READ MORE...

Leave a Reply

Your email address will not be published. Required fields are marked *

Easy Custom User Role Feature Without a WordPress Plugin
How to Add a Simple Plain HTML Search with Autocomplete in WordPress

Thank you for reading our content. Use the buttons below to spread the love and share Override Gutenberg Blocks & Create Gallery Modal Window with your followers.