{"id":36589,"date":"2022-04-12T15:00:38","date_gmt":"2022-04-12T13:00:38","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=36589"},"modified":"2022-04-11T17:09:45","modified_gmt":"2022-04-11T15:09:45","slug":"how-to-allow-users-to-add-favorite-posts-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-allow-users-to-add-favorite-posts-in-wordpress\/","title":{"rendered":"How to Allow Users to Add Favorite Posts in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]A post can be favorited for a multitude of reasons: to bookmark the post, as a form of rating the content, to show appreciation towards the content author, or as a response, if you are mentioned in the post. It requires less effort than posting a comment, making your visitors more inclined to do it. Moreover, it <strong>increases your website\u2019s engagement<\/strong> and gives you <strong>insight into what kind of content your visitors prefer.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And, while this feature might not be suitable for some websites, it is generally helpful for most WordPress websites. Specifically, it is <strong>a must-have for WordPress websites which rely heavily on custom post types<\/strong> like movies, recipes, or listings. Unfortunately, as this feature isn\u2019t part of WordPress by default, webmasters often struggle to add it to their websites, even today. This is why we have decided to create this article, explaining how you can allow users to favorite posts in WordPress easily.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let us begin. This is what we will be covering:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-wp-favorite-posts-plugin\">The WP Favorite Posts Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-enable-the-add-to-favorites-link\">How to Enable the Add to Favorites Link<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-display-favorite-posts-using-widget\">How to Display Favorite Posts Using a Widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#advanced-functionalities-of-the-wp-favorite-posts-plugin\">Advanced Functionalities of the WP Favorite Posts Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-wp-favorite-posts-plugin\"><\/a>The WP Favorite Posts Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Since<strong> some themes do offer the ability to favorite posts<\/strong>, both the regular and custom ones, you should always inspect the functionalities of your current theme first. If such a feature isn&#8217;t part of your theme, you should turn to WordPress plugins. For this article, we have thoroughly researched the WordPress plugin repository and decided to showcase <strong>a free plugin called WP Favorite Posts<\/strong> as it is perfect for this purpose.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/wp-favorite-posts\/\" target=\"_blank\" rel=\"noopener\">WP Favorite Posts<\/a> plugin seems like a simple plugin at first glance. It <strong>allows users to favorite posts using a link<\/strong> the plugin provides. The plugin data is stored in the database or the browser cookies, depending on whether you choose to restrict favoriting to registered users only. To display this data to your visitors, you can use the two widgets the plugin provides for displaying the website\u2019s most favorite posts, as well as the favorite posts of a given user. We will explain how you can use them below.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-enable-the-add-to-favorites-link\"><\/a>How to Enable the Add to Favorites Link<\/h2>\n<p>[\/vc_column_text][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing and activating<\/a> the plugin, <strong>navigate to the Settings &gt; WP Favorite Posts section<\/strong>, where you will see all the relevant plugin options. On this page, you will see several subsections. The two named <strong>Options and Label Settings are the most important ones<\/strong> and ones which we will focus on in this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To enable the favorite functionality on your posts and custom post types, you will need to adjust several settings in the Options subsection. These include <strong>placement of the favorite link<\/strong> by default, <strong>choice of the image forming part of the link<\/strong>, and whether to <strong>limit the ability to add favorite posts<\/strong> only to logged-in users. As noted below, for this article, we have opted not to restrict this functionality to logged-in users only. Additionally, we chose to place the link before the post content, preceded with a heart icon. Of course, you can adjust the settings to your preferences. Having done that, <strong>click the \u201cUpdate options\u201d button<\/strong> to save your settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"673\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Settings-WP-Favorite-Posts.jpg\" class=\"attachment-full size-full\" alt=\"Settings WP Favorite Posts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Settings-WP-Favorite-Posts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Settings-WP-Favorite-Posts-300x208.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Settings-WP-Favorite-Posts-768x533.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Settings-WP-Favorite-Posts-620x431.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, <strong>scroll down to the Label Settings subsection<\/strong>, where you can enable and adjust the relevant labels. For this article, we will be focusing on the first four options in this section which concern the process of adding and removing favorite posts. You can choose whether to <strong>show the add and remove link, as well as which labels it will show<\/strong>. In this case, we have opted to show both variations of the links, while using the default labels set by the plugin. But, as in theo the previous section, you can adjust these options to your liking. Having done that, <strong>press the \u201cUpdate options\u201d button<\/strong> to save your settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Label Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>check the result<\/strong> by opening one of your posts on the front end. Of course, make sure that you are viewing it while logged in if you have set a restriction that only logged-in users can favorite the post.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin has a predefined stylization acceptable for most websites. However, in some cases, <strong>additional stylization might be added<\/strong> in the form of custom <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-css-guide\/\">CSS code<\/a>. As this is done on a case-by-case basis, we can\u2019t suggest any that would work for all websites. Instead, we will include the snippet that was sufficient in our case.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.wpfp-span {\r\ndisplay: inline-block;\r\nmargin-bottom: 15px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Such a CSS snippet can be added to the <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> section of the WordPress customizer or into a suitable CSS-inserting plugin. In our case, after inserting the CSS, we have gotten the following result.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-favorites-Result.jpg\" class=\"attachment-full size-full\" alt=\"Add to favorites Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-favorites-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-favorites-Result-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-favorites-Result-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-favorites-Result-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-display-favorite-posts-using-widget\"><\/a>How to Display Favorite Posts Using a Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]Apart from the ability to favorite a certain post using a link,<strong> this plugin provides you with two widgets used for tracking and displaying your favorite posts<\/strong>. More precisely, these are <strong>Most Favorited Posts<\/strong> and <strong>User\u2019s Favorites<\/strong> widgets. The former shows the most favorite posts on the website, while the latter shows the posts favorited by the user accessing the website. For logged-in users, the info is stored in the database, while, for the rest, it is stored in the cookies of their current browser.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, <strong>before looking at the widgets, we suggest checking some of the options tied to them<\/strong>. By that we mean you need to<strong> enable the most favorited posts statistics option<\/strong>, as it is a prerequisite for the widgets to function properly.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Most-favorited-posts-statistics.jpg\" class=\"attachment-full size-full\" alt=\"Most favorited posts statistics\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Most-favorited-posts-statistics.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Most-favorited-posts-statistics-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Most-favorited-posts-statistics-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Most-favorited-posts-statistics-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having ensured that the statistics option is enabled, <strong>navigate to the Appearance &gt; Widgets section<\/strong> and <strong>find the two widgets previously mentioned<\/strong>. If you aren\u2019t able to find them in the Available widgets subsection,<strong> try looking in the Inactive Widgets<\/strong> one. After finding the widgets, you can add them to the widget area you plan on using for displaying your favorite posts or the website\u2019s most favorite posts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Both widgets have only two options \u2013 <strong>the widget title and the number of posts that you can show<\/strong>. In the case that the title field was left empty, the default titles (widget names) will be used. That said, <strong>after entering the title and number of posts<\/strong>, make sure to <strong>click the \u201cSave\u201d button<\/strong> below to save your settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Most-Favorited-Posts.jpg\" class=\"attachment-full size-full\" alt=\"Widgets Most Favorited Posts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Most-Favorited-Posts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Most-Favorited-Posts-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Most-Favorited-Posts-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Most-Favorited-Posts-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Users-Favorites.jpg\" class=\"attachment-full size-full\" alt=\"Widgets Users Favorites\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Users-Favorites.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Users-Favorites-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Users-Favorites-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Users-Favorites-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, <strong>review a page or post that shows those widgets<\/strong>. As mentioned previously, the plugin comes with some predefined stylization, which you can further adjust with CSS code. Similar to before, this CSS varies on a case-by-case basis, which is why we can\u2019t suggest any universally applicable stylizations. Instead, we will only leave you with the code we used, in hopes that you will be able to adjust it accordingly.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">#wpfp-most_favorited_posts, #wpfp-users_favorites {\r\nmargin-bottom: 35px;\r\n}\r\n#wpfp-most_favorited_posts ul , #wpfp-users_favorites ul{\r\npadding: 0;\r\nmargin: 0;\r\nlist-style: none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As before, we suggest adding the CSS into the<strong> Appearance &gt; Customize &gt; Additional CSS<\/strong> section of the customizer <strong>or a suitable CSS-inserting plugin<\/strong> After inserting the above mentioned CSS snippet, we have gotten the following result for the two widgets provided by WP Favorite Posts plugin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"470\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Result.jpg\" class=\"attachment-full size-full\" alt=\"Widgets Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Result-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Result-768x373.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Widgets-Result-620x301.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"advanced-functionalities-of-the-wp-favorite-posts-plugin\"><\/a>Advanced Functionalities of the WP Favorite Posts Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Despite appearing simple, the WP Favorite Posts plugin also offers some advanced functionalities mostly reserved for intermediate and advanced WordPress users. These uses include the <strong>[wpfp-link]<\/strong> shortcode, the custom <strong>wpfp_link()<\/strong> function and <strong>wpfp<\/strong> page template. We have decided to explain them in a separate section.[\/vc_column_text][vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The <em>[wpfp-link]<\/em> Shortcode<\/h3>\n<p>[\/vc_column_text][vc_column_text]Using the previous instructions, you will be able to enable favoriting on all your posts, either before or after the post content. However, sometimes <strong>webmasters want flexibility in choosing whether to include this link on certain posts<\/strong>, as well as a possibility of adjusting its placement. Both of these can be achieved either by using the <em>[wpfp-link]<\/em> shortcode or correctly calling the<em> wpfp_link()<\/em> function. But, if you choose to use either of these methods on posts or custom post types, we advise adjusting the Auto show favorite link option to Custom, to <strong>avoid displaying duplicate favorite links.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options.jpg\" class=\"attachment-full size-full\" alt=\"Advanced Uses Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Additionally, <strong>either of these methods can be used to display the favorite link on pages<\/strong>, extending the favoriting capabilities to pages as well. Meaning, you can opt to display the favorite link in a predefined location on posts, while maintaining the flexibility on pages, if you choose to do so.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will cover both of these methods, starting from the one easier to implement. To display the favorite link on pages or posts using a shortcode, you only need to insert the shortcode call \u2013<strong> [wpfp-link]<\/strong> into a suitable shortcode-rendering element. These elements depend on the page builder you are using for editing.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the Gutenberg editor, it is the <strong>Shortcode block<\/strong>, Elementor uses the<strong> Text Editor widget<\/strong>, and for the WPBakery plugin that element is the <strong>Text Block<\/strong>, while WordPress users who use the Classic Editor can <strong>insert the shortcode call into the editor\u2019s visual tab<\/strong>. We will demonstrate how this is done within the Gutenberg editor, as an example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, <strong>open a given page or post<\/strong> where you wish to add the favorite link and <strong>insert the Shortcode block<\/strong> in the place where you wish the link to appear. You can do this by selecting the \u201c+\u201d icon, searching for the Shortcode block, and selecting it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Add Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>enter<em> [wpfp-link]<\/em> into the Shortcode block<\/strong> and <strong>update the page\/post<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Add Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, you should <strong>check the position and functionality of the newly created favorite link<\/strong> on your page\/post. In some cases, additional CSS code might be needed for its stylization. As previously, the CSS is created on a case-by-case basis. In our case, the CSS we previously used was sufficient.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.wpfp-span {\r\ndisplay: inline-block;\r\nmargin-bottom: 15px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that CSS, we have gotten the following result.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-Gutenberg-Result.jpg\" class=\"attachment-full size-full\" alt=\"Add to Favorites Gutenberg Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-Gutenberg-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-Gutenberg-Result-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-Gutenberg-Result-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-Gutenberg-Result-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Calling the <em>wpfp_link()<\/em> Function<\/h3>\n<p>[\/vc_column_text][vc_column_text]While using the [wpfp-link] shortcode is more suited for displaying the favorite link on specific pages and posts in a custom location, by using the <strong>wpfp_link()<\/strong> function you can adjust the custom placement of that link for pages and posts in general.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, doing so requires considerable WordPress knowledge as it involves calling the custom <strong>wpfp_link()<\/strong> function in an appropriate location. And, while the plugin suggests editing the<em> single.php<\/em> and <em>page.php<\/em> template files, we argue for a different approach \u2013 hooking the function onto an appropriate hook. Since this is quite an advanced and difficult subject, we will try to give a quick overview of it, before explaining what it means in this specific case. Let us first explain what WordPress hooks are.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]WordPress <strong>hooks are a piece of placeholder code<\/strong> developers leave within their code which other WordPress users can use to add new functionalities or change existing ones. Thus, all WordPress hooks are divided into two categories \u2013 action hooks, used for adding new functionalities, and filter hooks, used to alter existing ones.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use hooks, <strong>WordPress users need to write custom functions<\/strong> called callback functions or callbacks, which contain the code behind a given functionality. In this case, such a function is already provided by the plugin: the <em>wpfp_link()<\/em> function. But, for the functionality to work, <strong>the callback function needs to be \u201chooked onto\u201d a suitable WordPress hook<\/strong>. This is done by using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> function for action hooks and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/\" target=\"_blank\" rel=\"noopener\">add_filter()<\/a> function for filter hooks.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These functions accept the same four arguments: hook name, callback function name, priority, and the maximum number of arguments the callback function can accept, in that order. And, while the first two are most commonly used, the choice of the hook makes this method so difficult for most WordPress users. Specifically, every time you wish to implement new functionality or change an existing one,<strong> you will need to find a suitable WordPress hook<\/strong> on which you need to hook your callback. As a possible hook could be part of WordPress core files, as well as part of your current theme and plugins, finding it often requires a lot of time and in-depth coding knowledge.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Even though it is difficult, <strong>this approach to WordPress customization has some benefits over directly editing template files<\/strong>, which was the preferred coding approach in the past. The most obvious one is that, by using WordPress hooks,<strong> you will not lose customization every time a theme, plugin, or WordPress update comes along<\/strong>. The other, less obvious benefit, is that<strong> this method allows you to keep track of your modifications easily<\/strong>, as the suggested way of adding code which relies on WordPress hooks is to insert it either into the <em>functions.php<\/em> file of your child theme or into a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you understand what WordPress hooks are, you are one step closer to adding the favorite link correctly. Since you will be adding a new feature, <strong>you only need to figure out a suitable action hook<\/strong>. In most cases, asking your theme authors for help in finding that hook is best. Additionally, in case you want to implement the same link inside a specific custom post, you can also consult with the plugin authors that enabled that custom post type.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, after you figure out the appropriate action hook, you need to hook the <em>wpfp_link()<\/em> function onto it by calling the <em>add_action()<\/em> function. Even though <em>add_action()<\/em> function uses four parameters, using the following call is sufficient in most cases:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( function_exists( 'wpfp_link' ) ) {\r\nadd_action( 'suitable-action-hook-here', 'wpfp_link' );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you need to replace the <em>suitable-action-hook-here<\/em> part with the correct action hook in your case. To reiterate, this code snippet should be inserted either in the<em> functions.php<\/em> file of your child theme or a site-specific plugin, using FTP. We won\u2019t go over the details of how the code is inserted via FTP in this article. Instead, we will include the code we used for our example, as a final point in our overview on using WordPress hooks. The code snippet we used for the article is given below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( function_exists( 'wpfp_link' ) ) {\r\nadd_action( 'lekker_action_after_blog_post_item', 'wpfp_link' );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As noted, we have used the <em>lekker_action_after_blog_post_item<\/em> as the action hook. Since this action hook is specific to the <a href=\"https:\/\/lekker.qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">Lekker<\/a> theme we used while creating the article, <strong>this code snippet can\u2019t be copied and pasted<\/strong>, as the code won\u2019t do anything unless the same action hook is present in your current theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, apart from creating the code and inserting it into a suitable location, you also need to make sure the favorite link is set to show in a custom location, to avoid duplicate links. Navigate to <strong>Settings &gt; WP Favorite Posts &gt; Options<\/strong> section,<strong> locate the Auto show favorite link<\/strong>, and <strong>set its placement to Custom<\/strong>. Then, <strong>click the \u201cUpdate options\u201d button<\/strong> to save your settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options.jpg\" class=\"attachment-full size-full\" alt=\"Advanced Uses Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Advanced-Uses-Options-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, the only thing that remains is to <strong>review the design and functionality of the newly added favorite button.<\/strong> Depending on the website, some CSS code might be needed to adjust the stylization of that link, as said previously. We used the following CSS snippet:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.wpfp-span {\r\nposition: relative;\r\ndisplay: inline-block;\r\nwidth: 100%;\r\ntext-align: right;\r\nfont-weight: 600;\r\ncolor: #1f1f1f;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having inserted it into <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> of the customizer, we have gotten the result shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-CSS-Result.jpg\" class=\"attachment-full size-full\" alt=\"Add to Favorites CSS Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-CSS-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-CSS-Result-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-CSS-Result-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-to-Favorites-CSS-Result-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Using the WPFP Page Template<\/h3>\n<p>[\/vc_column_text][vc_column_text]Finally, the plugin also has a built-in page template which displays the list of users\u2019 favorite posts. It also allows the user to clear that list completely or to edit the list by removing some of the entries. However, this page template is <strong>slightly less flexible than the User\u2019s Favorite widget<\/strong> previously covered, as it only displays the user\u2019s favorite blog posts. Nevertheless, we have decided to cover it as well, as this page template can be a valid option for some websites.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use this page template effectively, we advise adjusting some of the plugin options beforehand. Navigate to<strong> Settings &gt; WP Favorite Posts<\/strong> to find the relevant options directly tied to the plugin\u2019s page template. Sadly, most of these options don\u2019t directly specify where they are used, making it difficult for novice WordPress users to use them properly. Luckily, as we have thoroughly inspected the plugin\u2019s code for this article, we will explain which options you should change.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, you should <strong>set the Favorite post per page<\/strong>, which determines the maximum number of user\u2019s favorite posts that can be displayed per page. If a user has more favorite posts than the chosen limit, he will be able to access them using pagination which is part of the template. After setting the posts per page option, <strong>click the \u201cUpdate options\u201d button<\/strong> and <strong>scroll below<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"652\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Favorite-Post-Per-Page.jpg\" class=\"attachment-full size-full\" alt=\"Favorite Post Per Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Favorite-Post-Per-Page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Favorite-Post-Per-Page-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Favorite-Post-Per-Page-768x517.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Favorite-Post-Per-Page-620x417.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the Label Settings subsection found below, you will be able to <strong>adjust the corresponding labels<\/strong>: the label for the clear link, label after clearing the list, label for the remove link, the label shown when the list is empty, and notice shown to users who aren\u2019t logged in. After adjusting them, <strong>click the \u201cUpdate options\u201d button<\/strong> once more, to save your option choices.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-Subsection.jpg\" class=\"attachment-full size-full\" alt=\"Label Settings Subsection\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-Subsection.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-Subsection-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-Subsection-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Label-Settings-Subsection-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having done the previous, let us explain how you can use the wpfp page template. As this page template is technically more similar to a shortcode, the explanation is similar to the one given above.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, <strong>create a new page and insert a shortcode-rendering element<\/strong> in it. As mentioned previously, this element differs based on the page builder plugin you are using. For Gutenberg, which we are using as an example, that is the Shortcode block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Add Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Add-Shortcode-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having done that, <strong>insert the shortcode call<\/strong> in the following form &#8211; <strong>{{wp-favorite-posts}}<\/strong> into the shortcode-rendering element. This will display a list of favorite posts thanks to the <em>wpfp-page-template.php<\/em> file which is part of the plugin\u2019s files.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, it is worth mentioning that <strong>the plugin\u2019s page template doesn\u2019t restrict other content from being displayed on the page<\/strong> with the corresponding shortcode call. Meaning, you can add different elements\/blocks to this page apart from the one you already inserted. However, note that if you opt to add more content to the page, that content will always be displayed below the list of favorite posts. Having said that, after adding the call, make sure to publish the page and examine how it is displayed on the front end of the website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Users Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similar to previous uses of the plugin, additional CSS code might be needed to further stylize the outcome. The CSS code we used is given below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.wpfp-span {\r\ndisplay: inline-block;\r\n}\r\n.wpfp-span ul {\r\nlist-style: none;\r\n}\r\n.wpfp-span ul li {\r\nmargin-bottom: 1.5em;\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\n-webkit-box-orient: vertical;\r\n-webkit-box-direction: normal;\r\n-ms-flex-direction: column;\r\nflex-direction: column;\r\n}\r\n.wpfp-span .remove-parent {\r\ncolor: red;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As mentioned previously, this code needs to be created on a case-by-case basis. Therefore, you should try to use our code only as a starting point in finding the CSS code suitable for your website. Having said that, after inserting the CSS code inside the <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> section, we have gotten the following result.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"685\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Favorite-Blog-Posts-Result.jpg\" class=\"attachment-full size-full\" alt=\"Users Favorite Blog Posts Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Favorite-Blog-Posts-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Favorite-Blog-Posts-Result-300x212.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Favorite-Blog-Posts-Result-768x543.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Users-Favorite-Blog-Posts-Result-620x438.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With it, we conclude this article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Favoriting posts in WordPress increases the visitors\u2019 website engagement while providing valuable info regarding your website\u2019s content and visitors\u2019 preference. This feature is especially useful for websites that rely on custom post types as the majority of their content. While not available by default, it can be easily implemented thanks to some WordPress plugins.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we have explained how you can use the WP Favorite Posts plugin to implement and use the favorite posts feature. While the options and widgets that we covered are mostly straightforward, the plugin leaves room for intermediate and advanced users, and we also covered these functionalities. Thus, by carefully reading and applying our instructions, you should have no problem allowing your users to add favorite posts on the website. Finally, as this feature is beneficial for most WordPress websites, bookmarking the article for future use is something we strongly recommend.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking to increase user engagement and improve their experience while gaining valuable insights? Let your users add favorite posts in WordPress.<\/p>\n","protected":false},"author":11229,"featured_media":36621,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,244,13],"class_list":["post-36589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-users","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=36589"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36589\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/36621"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=36589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=36589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=36589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}