Create a plugin to bookmark favorite posts

Discover in this tutorial how to create a plugin that allows you to mark favorite posts and display a list of them.

You already know that in OsomCode you can bookmark your favorite or most used tutorials to have them just a click away, right?

Well, several subscribers have already asked me how to do it

Are you also interested? Then right here I leave you the code so you can use it or create your own variation.

The idea is simple. A bookmark icon (top right) is shown only to logged in users:

And once they click it, it is bookmarked:

In addition, the users can view all their saved tutorials on a dedicated page:

Shall we start?

Steps to create a plugin for bookmarking posts

1A. Create the structure and the main file of the plugin (Font Awesome icons)

First of all, create the folder structure of the plugin. It would be something like this:

bookmark-favorites
|__ css
  |__ style.css
|__ bookmark-favorites.php

A main folder with the plugin name plus a subfolder called CSS and a style.css file inside.

Create a root file with the same name as the main folder (in this case, bookmark-favorites.php) and add the plugin header:

<?php
/**
 * Bookmark posts as favorites
 *
 * Plugin Name:       Bookmark posts as favorites
 * Plugin URI:        https://osomcode.com/create-plugin-bookmark-favorite-posts/
 * Description:       Add bookmark icon on posts and display list in a shortcode. 
 * Version:           1.0.0
 * Author:            Nahuai Badiola
 * Author URI:        https://osomcode.com/
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       bookmark-favorites
 */
?>

And this is how the header plus the plugin code would look like:

Several functions are performed within it:

• Add/remove favorites (associating it with Font Awesome icons).
• Create a shortcode to display favorite posts.
• Enqueue CSS styles.

If your theme (or a plugin you use) is already enqueueing Font Awesome you don’t have to do anything else.

If not, you have two options.

Option 1: add this snippet to the file above:

Option 2: apply option 1B below.

If you are interested in web performance I invite you to read on.

1B. Create the structure and the main file of the plugin (SVG icons)

If you don’t use Font Awesome in your WordPress installation (neither the theme nor the plugins) I don’t think it’s worth enqueueing the whole library (which weighs +100KB).

It is better to download the icons in SVG version, from Font Awesome or another icon library, and save them inside a plugin folder called /svg/.

The folder structure of the plugin would be something like this:

bookmark-favorites-genesis
|__ css
  |__ style.css
|__ bookmark-favorites.php
|__ svg
  |__ bookmark-regular.svg
  |__ bookmark-solid.svg

In this case the icons are named bookmark-regular.svg and bookmark-solid.svg. You can see that they weigh just over 300 bytes (the sum 0.7KB), considerably less than the option to call the entire Font Awesome library.

And this is how the plugin code would look like:

There you have it, in this case you load the SVG icons directly instead of the Font Awesome library.

The only thing you would have to adapt is the URL of your website (instead of https://yourwebsite.com) and the name of the icon (instead of bookmark-regular.svg or bookmark-solid.svg).

2. Create the style.css

Once you have all the functional part of the plugin you need to style it so that the icon is displayed to the right of the title.

To do this, create the style.css file with the following lines:

Obviously, you can modify whatever you need to adjust it to your needs.

If you use the version with SVG icons (option 1B) use this CSS instead:

If you notice, instead of using color: you use filter: to color the icons. You can use this tool to enter the color in hexadecimal and it will give you the result to apply the filter.

3. Add the shortcode to show the favorite entries

Finally, if you want to add a page that displays the user’s favorite posts, add the shortcode:

[favorite_posts]

You’ve got it. You just need to link that page in the menu (or wherever you want) so that the user can access it easily.

Conclusions

Now you know how to create a plugin that allows the user to bookmark their favorite posts and view them in list format.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂