Creating a bookmark system for WordPress can range from simple solutions to more complex ones. Here are 5 different ideas and implementations you can consider. These examples assume some degree of PHP, MySQL, HTML, CSS, and JavaScript integration.
Option 1: Simple Bookmark System (PHP and MySQL Only)
// Add a bookmark
if (isset($_POST['bookmark'])) {
$user_id = $_POST['user_id'];
$post_id = $_POST['post_id'];
$query = "INSERT INTO bookmarks (user_id, post_id) VALUES ('$user_id', '$post_id')";
$connection->query($query);
}
// Display bookmarks
$query = "SELECT * FROM bookmarks WHERE user_id='current_user_id'";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
echo "Post ID: " . $row['post_id'];
}
Option 2: Bookmarks using AJAX for dynamic updating
<button onclick="addBookmark(1, 101)">Add Bookmark</button>
<script>
function addBookmark(userId, postId) {
const xhttp = new XMLHttpRequest();
xhttp.open("POST", "add_bookmark.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("user_id=" + userId + "&post_id=" + postId);
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log('Bookmark added');
}
};
}
</script>
add_bookmark.php
<?php
$connection = new mysqli("localhost", "username", "password", "database");
$user_id = $_POST['user_id'];
$post_id = $_POST['post_id'];
$query = "INSERT INTO bookmarks (user_id, post_id) VALUES ('$user_id', '$post_id')";
$connection->query($query);
?>
Option 3: Using CSS to Display Bookmark Icon
<style>
.bookmark-icon {
font-size: 24px;
cursor: pointer;
color: gray;
}
.bookmark-icon.active {
color: gold;
}
</style>
<span class="bookmark-icon" onclick="toggleBookmark(this)">★</span>
<script>
function toggleBookmark(element) {
element.classList.toggle('active');
// Add AJAX or other logic to update the bookmark status in your database
}
</script>
Option 4: Interactive Bookmarks Using jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button class="bookmark-btn" data-post-id="101">Bookmark</button>
<script>
$('.bookmark-btn').click(function() {
const postId = $(this).data('post-id');
$.post('add_bookmark.php', { post_id: postId }, function(response) {
console.log(response);
});
});
</script>
Option 5: Bookmarks using a WordPress widget
- Create a widget file: bookmark-widget.php
- PHP code for the widget:
<?php
class Bookmark_Widget extends WP_Widget {
function __construct() {
parent::__construct('bookmark_widget', __('Bookmark Widget', 'text_domain'), array('description' => __('A Widget to display bookmarks', 'text_domain')));
}
public function widget($args, $instance) {
echo $args['before_widget'];
echo '<button onclick="addBookmark()">Add Bookmark</button>';
echo $args['after_widget'];
}
}
function register_bookmark_widget() {
register_widget('Bookmark_Widget');
}
add_action('widgets_init', 'register_bookmark_widget');
?>
These options cover the basic approaches to implementing a bookmarking system in WordPress using various technologies. You can modify and extend them to suit your needs.
