Skill Level: Moderate to Advance knowledge and usage experience with databases in phpMyAdmin and cPanel.

Ever had to change the WordPress database tables prefix to make them more secure? and you had to rely on bulky plugins and other sources? Below I want to share a very easy 3 stage process to change the table prefix, so it works without breaking anything.

Stage 1: Change wp-config.php

Using an FTP client or from cPanel File Manager, open the wp-config.php file — Search for $table_prefix = ‘wp_’.
Change this to your custom prefix. Use a less-than-9-character letter-number combo with no meaning, like “8J2kIp0_”.

Save Changes.

Stage 2: Change prefix in phpMyAdmin

Go into your cPanel from your web host — find phpMyAdmin from Databases section, and open the database view.

Click on the correct database table from the left side menu. When you click on the database, it will show all the tables in the database on rigth side of the page.

Scroll to the bottom and find Check all / Check tables having overhead.

From the drop-down, select Replace table prefix — in the prompt box, enter the old prefix “wp_” changing into new one “8J2kIp0_”. Click Continue. Now all the table names will be changed.

Stage 3: Change related field values in _options and _usermeta

Click on the database table, then the SQL tab on the top right side. This will open a Run SQL query box for the database. Copy the SQL code below and change it to your specific prefix names, paste it in the big text box, and click Go below the text box.

-- Fix roles
UPDATE `8J2kIp0_options`
SET option_name = REPLACE(option_name, 'wp_', '8J2kIp0_')
WHERE option_name LIKE 'wp_%';

-- Fix user capabilities
UPDATE `8J2kIp0_usermeta`
SET meta_key = REPLACE(meta_key, 'wp_', '8J2kIp0_')
WHERE meta_key LIKE 'wp_%';

Running this will show how many rows are affected by this, like below. This part is important for the website users to gain access to the admin side.

That is it. Go back to the website and refresh, clear the browser cache, and see if everything works.

Adding a likes count with thumbs up icon is quite easy without using a plugin. Below I explain the code I used here in my website. All the code explained goes in the functions.php file in the theme, although it can be modified to use in a plugin as well.

Functionality

What we are going to do is store likes count in post meta of whichever the post you choose to add a likes count to. The post meta field name will be “likes”. Whenever the thumbs-up icon is clicked, the likes count will increment. We are not tracking if a user has already liked an article with this method. However that can be done using cookies. We will use a simple shortcode that can be placed where ever in the site we want to show the likes count button.

FYI, the shortcode is using GLOBAL $post variable to get the post ID. And the post ID will be whatever is in the global post value within a wp query loop.

Pre-rec Libraries I am using

I am using the free and always awesome fontawesome library to get the thumbs up icon. Aside that, jQuery library which is a standard load on most websites these days.

Adding Likes Button Shortcode

This will allow the functionality for shortcode [aj_likes_btn] the context of which you can edit for your liking. This shortcode will print the HTML code where ever the shortcode is placed, to display a thumbs-up icon button and likes count.

<?php 
add_shortcode('aj_likes_btn', 'aj_likes_btn');
function aj_likes_btn(){
	global $post;

	$post_id = $post->ID;
	$current_count = get_post_meta( $post_id, 'likes',true);
	$current_count = $current_count ? $current_count : 0;
    
    ob_start();
	?>
	<div class='aj_likes'>
		<p><a class='aj_thumbsup' href='' data-id='<?php echo $post_id;?>'>
		    <i class="far fa-thumbs-up"></i></a> 
		    Likes (<span><?php echo $current_count;?></span>)</p>
	</div>
	<?php
	return ob_get_clean();
}

Adding AJAX functionality

This JQuery code can be added to existing javascript file ( in which case the AJAX url must be updated to correct ajax url) or save into a new javascript file called aj_script.js

jQuery(document).ready(function($){

$('body').on('click','.aj_thumbsup',function(event){
	event.preventDefault(); // stop click from refreshing page
    
    var OBJ = $(this);
    
    if(OBJ.hasClass('recorded')) return; // stop multiple submissions
    
	var id = $(this).data('id'); // get post ID
	var data_arg = {};
	data_arg['id'] = id;
	data_arg['action'] = 'aj_like_post'; // ajax hook name

	$.ajax({
		beforeSend: function(){},
		type: 'POST',
		url:the_ajax_script.ajaxurl, // Must be updated if adding this to existing
		data: data_arg,dataType:'json',
		success:function(data){
			OBJ.siblings('span').html( data.new_count); // populate with new new_count
			OBJ.addClass('recorded') // mark as thumbsup recorded
			OBJ.find('i').removeClass('far').addClass('fas'); // make thumbs up icon solid
		}
	});
});
});

To enqueue the above script use this PHP code, which goes into function.php. Make sure to replace THEME_DIR with correct location if you are saving the javascript code to a different location.

<?php
define("THEME_DIR", get_template_directory_uri());
wp_enqueue_script( 'aj_script', THEME_DIR . '/aj_script.js', array( 'jquery' ), 1.0, true );
wp_localize_script( 
	'aj_script', // the handle name of the script
	'the_ajax_script', 
	apply_filters('aj_script_data', array( 
		'ajaxurl' => admin_url( 'admin-ajax.php' ) , 
		'postnonce' => wp_create_nonce( 'aj_nonce' )
	))
);

PHP code to process the AJAX request which would record the new incremented like count for the post.

<?php
add_action( 'wp_ajax_aj_like_post', 'aj_record_like_post' );
add_action( 'wp_ajax_nopriv_aj_like_post', 'aj_record_like_post' ); 
// nopriv allows for nonloggedin users to like as well

public function aj_record_like_post(){

	$post_id = sanitize_text_field( $_POST['id']);

	$current_count = get_post_meta( $post_id, 'likes',true);
	$current_count = $current_count ? $current_count : 0;

	$new_count = $current_count + 1; // add one more like

	update_post_meta( $post_id, 'likes', $new_count); // save new count to the post meta

	echo json_encode(array(
		'status'=>'good',
		'new_count'=>$new_count,
	)); exit;
}

CSS code to stylize the looks.

.aj_likes{text-align:center; padding:30px 0; font-size:18px;}
.aj_likes a:hover i{transform: scale(1.2);}
.aj_likes a.recorded:hover i{transform: scale(1);}

Now add the shortcode [aj_likes_btn] where ever you want viewers to like that post, and it will look like this on the post. If you like this code share, be sure to give my like button a smashing as well 🙂