Showing Bookmark Button Inside Loop or Outside Loop
https://gist.github.com/manchumahara/4d5c84094f0cd5b544dc11017ceedfe7
Get total bookmark count of any post by id
https://gist.github.com/manchumahara/f5ed5deaa092fa943062f1f864bf5879
Get total bookmark count of any category by category id
https://gist.github.com/manchumahara/8ec4ad329bc13bbafc83a8d378313996
Check if any post is bookarked by any post id
https://gist.github.com/manchumahara/043cb79fc98e9ea5939354af50e22766
Check if any post is bookarked by any user by any post id & user id
https://gist.github.com/manchumahara/d1f234358e1c362d561a516b9958ee03
Custom Login Url
The plugin only works for loggedin user and shows a login form for guest. if you don’t want to show the login form in bookmark popup you can override the output and display your own login url instead.
<code class="language-php">
//apply_filters('cbxwpbookmark_login_html', $cbxwpbkmark_login_html, $login_url, $redirect_url);
add_filter('cbxwpbookmark_login_html', 'cbxwpbookmark_login_link_change', 10, 3);
function cbxwpbookmark_login_link_change($cbxwpbkmark_login_html, $login_url, $redirect_url){
//$login_url is the redirect url you need
$login_url = ''; //set your custom login url here
$cbxwpbkmark_login_html = 'To login <a href="'.esc_url($login_url).'">click</a> here'; //set login form or html as need to display as your custom login
return $cbxwpbkmark_login_html;
}
</code>
Bookmark Icon
In core plugin bookmark icon is added using css. So the only way to change is override css.
To override the css you need some css skill and the custom css can be added in theme’s style sheet or can be put in customizer’s custom css area.
So, the below code will give the idea.
<code class="language-css">
.cbxwpbkmarktrig-marked:before {
background: no-repeat url('image url here') 0 0;
}
.cbxwpbkmarktrig:before {
background: no-repeat url('image url here') 0 0;
}
</code>
If you are not familiar with custom css then buy the pro addon, it has built in option to add custom icon. Using the pro addon you can also select some ready icon and also override from theme without uploading custom icon but placing custom icon in a specific folder inside the theme. To override icon from theme without writing custom css create folder structure like this — {Your theme root}/cbxwpbookmark/bookmarkicons, child theme location will get high priority. Custom bookmark icon needs to have images named bookmark_before_2x.png, bookmark_after_2x.png and put these images inside the folder {Your theme root}/cbxwpbookmark/bookmarkicons
JS Event
From version 1.5.6 we added custom js event as limited level. Pro addon has a some commented code about how to add the js event but here in documentation we will make it more clear.
1. Hook to add new js
add the js to write the event code. the codes are from our pro addon, you need to adjust the path and others based on the code format
<code class="language-php">
add_action( 'cbxwpbookmark_js_before_cbxwpbookmarkpublicjs', array( $this, 'cbxwpbookmark_js_before_cbxwpbookmarkpublicjs' ) );
public function cbxwpbookmark_js_before_cbxwpbookmarkpublicjs(){
wp_register_script( 'cbxwpbookmark-events-test', plugin_dir_url( __FILE__ ) . 'assets/js/cbxwpbookmark-events-test.js', array( 'cbxwpbookmark-events' ), $this->version, true );
wp_enqueue_script( 'cbxwpbookmark-events-test' );
}
</code>
2. Check the js file {your wordpress root}\wp-content\plugins\cbxwpbookmark\assets\js\cbxwpbookmark-public.js and search for “CBXWPBookmarkEvents_do_action” to understand where and why those js events are added.
3. How je events are added or the code of cbxwpbookmark-events-test.js. In this example js file we used same js function as callback to test but you need to put your own custom function as callback for each event’s callback as write your own custom event code. This events are like wordpress filters/hooks. The add_action compatible is CBXWPBookmarkEvents_add_action and add_filter compatible is CBXWPBookmarkEvents_add_filter. For more details study the event manager js file wp-content\plugins\cbxwpbookmark\assets\js\cbxwpbookmark-events.js
<code class="language-javascript">
'use strict';
if ( typeof window.CBXWPBOOKMARK_FILTERS !== 'undefined' ) {
function cbxwpbookmark_gust_click_test() {
console.log('event works');
console.log(arguments);
}
/*CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_gust', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_user', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_no_cat_pre', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_no_cat_cats_loaded', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_cats_pre', cbxwpbookmark_gust_click_test, 10);*!/
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_nocats_pre', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_cats_bk_click', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_cats_bk_response', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_nocats_bk_click', cbxwpbookmark_gust_click_test, 10);
CBXWPBookmarkEvents_add_action('cbxwpbookmark_trigger_nocats_bk_response', cbxwpbookmark_gust_click_test, 10);*/
}
</code>
How to change bookmark grid size
<code class="language-php">
add_filter('cbxwpbookmark_bookmarkgrid_cols_class', 'cbxwpbookmark_bookmarkgrid_cols_class_extend', 10, 2);
/**
* Change grid size
*
* @param $grid
* @param $object_type
*
* @return mixed
*/
function cbxwpbookmark_bookmarkgrid_cols_class_extend($grid, $object_type){
//grid default value 'col-xs-12 col-sm-6 col-md-4'
//we used bootstrap grid
//$grid = 'col-xs-12 col-sm-6 col-md-4'; //change and uncomment this line to change grid values
$grid = 'col-12'; //change and uncomment this line to change grid values
return $grid;
}
</code>
Last modified: October 1, 2023