Month: October 2019

  • WordPress Performance Improvement Checklist

    WordPress performance really matters because no one wants to visit a website that takes lots of loading time. A good loading time for a website is less than 2 minutes. In this tutorial we have presented a checklist for WordPress performance improvement.

    • Use a minimum number of plugins
    • Make sure the installed plugins and themes are updated
    • Make sure that the database tables are removed for the plugins which are uninstalled
    • Remove unused entries from the database tables like meta entries used by a plugin which is uninstalled
    • Remove unused options from the wp_options table which were added by the uninstalled plugins
    • If 60-80% of the wp_option entries are using autload = ‘no’ then it’s a good idea to create MySQL index for wp_options table “CREATE INDEX autoloadindex ON wp_options(autoload)” Read More
    • Make sure that your theme is not using unnecessary database calls
    • Install a cache plugin e.g wp-super-cache
    • Install optimizer plugin e.g Autoptimizer
    • The use of CDN can enhance the performance of the website for different regions of the world.
    • Optimize the images before using on the website
  • WordPress Plugin Development Cheat Sheet

    WordPress plugins are used to extend the functionality of a WordPress website. There are about 51,000+ plugins available in WordPress’s official plugins repository at the writing of this post. There are scenarios when you need to develop your own WordPress plugin for some specific task/requirement. In this blog post, we present some useful functions, hooks, filters, and best practices for custom WordPress plugin development.

    Built-In Functions:

    wp_email('example@example.com', 'Subject', 'Message');
    wp_die('The message here');

    function_exists() - for functions
    isset() - for variables
    class_exists() - for classes
    defined() - for constants

    is_admin()
    is_singular()
    is_page()
    is_archive()

    //data validation
    is_email() // check if email is valid
    term_exists() checks if term exists
    username_exists() checks if the username exists

    //data sanitization
    sanitize_email()
    sanitize_text_field()
    sanitize_user() // sanitize data as username

    //nonces
    wp_nonce_field('myplugin_form_action', 'myplugin_nonce_field', false);
    wp_verify_nonce($nonce, 'myplugin_form_action');

    Pluggable Functions:

    https://codex.wordpress.org/Pluggable_Functions

    Wp Security Techniques:

    • Data Validation
    • Sanitizing input – make sure input is safe
    • Sanitizing output – make sure output is safe
    • Using nonces – make sure submitted forms are secure
    • Checking users

    Best Practices:

    • File organization
    • Plugin architecture
    • Avoid naming collisions
    • Choose a good name for your plugin
    • Write great documentation
    • Plugin boilerplates

    Common Best Practices:

    • Add blank index files in each directory of the plugin so that the contents of the plugin directories are not directly accessible (excluding the images, css and js folders)
    • Make sure to check the constant ABSPATH is defined to prevent direct access to the PHP files of the plugin

    Hooks:

    Example

    function myplugin_action_hook_example(){
    wp_email('example@example.com', 'Subject', 'Message');
    }
    add_action('init', 'myplugin_action_hook_example');

    References:
    https://codex.wordpress.org/Plugin_API/Action_Reference

    Important Hooks

    register_activation_hook() // runs when the plugin is activated
    if(! current_user_can('activate_plugins')) return;
    //do things like adding options, creating tables etc.
    register_deactivation_hook() // runs when the plugin is deactivated
    if(! current_user_can('activate_plugins')) return;
    //do things like
    flush_rewrite_rules();

    register_uninstall_hook() // runs when the plugin is uninstalled
    if(! current_user_can('activate_plugins')) return;
    //do things like
    delete_option('myplugin_posts_per_page', 10);

    Filters:

    function myplugin_filter_hook_example($content){
    $content = $content . '<p>Custom Content Here...</p>';
    return $content;
    }
    add_filter('the_content', 'myplugin_filter_hook_example');

    References:
    https://codex.wordpress.org/Plugin_API/Filter_Reference
  • How to Add Quill Editor in Angular Project

    This post describes the steps to integrate Quill Editor in an angular project.

    Run the following commands in your angular project directory:

    npm install ngx-quill --save
    npm install quill --save

    Inside app.module.ts or any shared module import the QuillModule

    import { QuillModule } from 'ngx-quill';

    Add the following in imports array:

    QuillModule, // inside app.module.ts or any shared module

    Add following in index.html

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css">

    Now add the following where you want to display editor:

    <quill-editor></quill-editor> <!--replace existing text areas with this tag and rest will be handled by this-->
  • How to add Like/Love reactions in angular

    This blog post describes step by step process to add like/love reactions in angular project.

    Step 1:

    Create a component by using the command ng g c e.g ng g c postReactions

    Step 2:

    <button  (click)="incrementLove()">
        love it{{post.loveCount}}
    </button>

    I have added a button in the html file of the post reactions component

    Step 3:

    On the blog page, we have a list of blog posts and we want to add post reactions in each post, so we have added the selector for post reactions at the bottom of each post inside the loop

    <app-post-reactions [postType]='posts' [post]='post'><br>
    </app-post-reactions>

    Also, you can see that we have passed two variables from the parent component i.e blog page which will be passed to the child component i.e post reactions component.

    Step 4

    We have received the passed variables inside the child component i.e post reactions component by using the @Input()

    @Input() postType: string;
    @Input() post: any;

    Step 5

    Finally, we can create the incrementLove() function which will update the value inside the post document.

    this.post.loveCount = this.post.loveCount+1;
    this.afs.doc(this.postType+'/'+this.post.id).update(this.post).then(res => {
             //successfully posted
    }, err => {
            //error
    });
  • How to Display the Index in Reverse Order for *ngFor Angular

    Let’s say that we have data in array e.g tasks = [‘task 5’, ‘task 4’, ‘task 3’, ‘task 2’, ‘task 1’]. Now when we will use ngFor then it will display the data like this:

    *ngFor="let task of tasks; let i = index"
    Task #{{i}}: {{task}}
    
    Output:
    Task 0: task 5
    Task 1: task 4
    Task 2: task 3
    Task 3: task 2
    Task 4: task 1

    But we want to reverse the order of only the index. In order to do that in ts file of the angular components, define a veriable named as totalTasks: number. Now make it equal to the length of the array like this:

    totalTasks: number;
    totalTasks = tasks.length;

    Now following modifications to the angular *ngFor will do the trick:

    *ngFor="let task of tasks; let i = index"
    Task #{{ totalTasks - i }}: {{task}}

    and now the output will be:

    Task 5: task 5
    Task 4: task 4
    Task 3: task 3
    Task 2: task 2
    Task 1: task 1
  • How To Develop Custom WordPress Plugin from Scratch using OOP

    This post describes the exact step to develop a custom WordPress plugin from scratch using Object-Oriented Programming.

    Go to https://wppb.me/, fill the form and download your zip file

    Edit the main file (plugin-name.php) and update texts like ‘description’ if you want

    Create all custom post types, make sure that the custom post type title is not longer than 20 characters otherwise you will get an error ‘invalid post type’

    function create_post_uni_lms_classes_std() {
        register_post_type( 'uni_lms_classes',
            array(
                'labels' => array(
                    'name' => __('Classes','unilms'),
                    'singular_name' => __('Class','unilms'),
                    'add_new' => __('Add New','unilms'),
                    'add_new_item' => __('Add New Class','unilms'),
                    'edit' => __('Edit','unilms'),
                    'edit_item' => __('Edit Class','unilms'),
                    'new_item' => __('New Class','unilms'),
                    'view' => __('View','unilms'),
                    'view_item' => __('View Class','unilms'),
                    'search_items' => __('Search Classes','unilms'),
                    'not_found' => __('No Class found','unilms'),
                    'not_found_in_trash' => __('No Classes found in Trash','unilms'),
                    'parent' => __('Parent Class','unilms')
                ),
    
                'public' => true,
                'menu_position' => 15,
                'supports' => array( 'title' ),
                'taxonomies' => array( '' ),
                'has_archive' => true,
                'show_in_menu' => false
            )
        );
    }
    
    add_action( 'init', 'create_post_uni_lms_classes_std' );

    Create a menu page for plugin settings or configurations by using add_menu_page() and add_submenu_page() functions

    function uni_lms_admin_actions_std(){
    add_menu_page(
    	__('Problems We Solve Enhancement', $this->plugin_name),
    	'Problems We Solve',
    	'edit_posts',
    	$this->plugin_name,
    	array( $this, 'display_dashboard_page' ),
    	'dashicons-admin-settings',
    	30
    );
    
    add_submenu_page(
    	$this->plugin_name,
    	__('Success Stories', $this->plugin_name),
    	'Success Stories', 'edit_posts',
    	'edit.php?post_type=success-stories'
    );
    }
    add_action('admin_menu', 'uni_lms_admin_actions_std');

  • How to Deploy NodeJS App in GoDaddy Shared Hosting

    This post describes the exact steps to deploy a NodeJS app on GoDaddy shared hosting.

    1. Log in to GoDaddy account and click Manage Hosting
    2. In settings, click server and make sure SSH access is on
    3. Click manage against SSH access and note down the credentials
    4. Install a tool (Putty, MobaXTerm, etc.) to connect to the server using SSH
    5. Once connected cd into the directory where you want to deploy a NodeJS app. It will be public_html for main domain or public_html/ in case of subdomain
    6. run the command: wget https://nodejs.org/dist/v6.9.2/node-v6.9.2-linux-x64.tar.xz
    7. Above command will install the node in your directory
    8. Upload your app in zip format and extract in the directory where you want to run the app
    9. run the command node app.js &
    10. If you find an error, make sure to add the code inside the .htaccess file (code available at the end of the list)
    11. To stop existing NodeJS app first run any one of the commands: ps -ef | grep node OR ps aux | grep node
    12. The above command will give you all the running processes, take note of the process id (2nd column from left) you want to stop
    13. Now run the command: kill -9 PROCESS_ID
    14. That’s all. Enjoy 🙂

    .htaccess code:

    RewriteEngine on
    RewriteRule  (.*)  http://localhost:3000/$1  [P,L]
    DirectoryIndex disabled