Skip to main content

Posts

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
Recent posts

React: Print Specific Section of the page with - ReactToPrint

  Want to know how can you easily print specific section of your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the ReactToPrint in your project    npm install --save react-to-print Step2: Add the following code in your component   import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; const Example = () => {      const componentRef = useRef();      return (           <div>                <ReactToPrint                     trigger={() => <button>Print this out!</button>}                     content={() => componentRef}                />                <table ref={componentRef}>                     <tr>                         <td>Printable data goes here</td>                     </tr>               </table>     

React: Remember me functionality with React

Want to know how can you easily integrate Remember me on your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the react-cookie in your project    npm install react-cookie Step2: Add the following code in index.js import { CookiesProvider } from "react-cookie"; ReactDOM.render(      <CookiesProvider>           <App />      </CookiesProvider>,      document.getElementById('root') ); Step3: Add the following code in your component    import React, { useState } from 'react'; import { useCookies } from 'react-cookie'; const App = () => { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const [cookies, setCookie] = useCookies(['user']); const handle = () => {      setCookie('Name', name, { path: '/' });  

WP: 8. Dynamically show post taxonomies and their data in tab format [Solved]

    Today I ran into a problem, I need to dynamically show post taxonomies and their data in tab format and found this solution. And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy. Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever. Step 1: Get the taxonomies terms first <?php     $terms = get_terms( array(       'taxonomy' => 'off_plan_categories',       'hide_empty' => true,     ) );     // echo '<pre>';     // print_r($terms);     // die; ?> Step 2:  Execute loop first for tab navigation <nav id="offPlanPropertyTabs" class="offplan-property-type-tabs nav nav-tabs"> <?php foreach($terms as $key => $term): ?>   <button class="nav-item nav-link <?php if($key==0): ?> active <?php en

WP: 7. Control Tab on frontend with ACF[Solved]

    Today I ran into a problem, I needed to implement tabs on the front end with ACF dynamically and found this solution. And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy. Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever. Step 1: Execute loop first for tab navigation <?php $i=1; while(have_rows('data')) : the_row(); ?>   <button class="nav-item nav-link <?php if($i==1){echo "active";}?>" data-bs-toggle="tab" data-bs-target="#tab <?php echo $i;$i++;?> "> <h3 class="s-floorplan__tabs__title"><?php the_sub_field('tab_title'); ?></h3> <p class="s-floorplan__tabs__text"><?php the_sub_field('tab_sub_title'); ?></p>   </button> <?php

WP: 6. Related post loop by excluding the current post in single.php

   Today I ran into a problem, I need to implement a related post on the blog detail page and found this solution. And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy. Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever. Step 1: Get the id of current post in starting of single.php like following <?php $do_not_duplicate = $post->ID; ?> Step 1: Now in your related post query add the following <?php $args = array( 'post_type' => 'post', 'posts_per_page' => 3, 'post__not_in'   => array( $do_not_duplicate ), 'order' => 'ASC', ); $related_query = new WP_Query($args);               while ( $related_query->have_posts() ): $related_query->the_post(); ?> Now Cheers !😊

WP: 5. Guide to Implement Next Previous Post Navigation in WP

  Today I ran into a problem, I need to implement to post previous and next navigation and found this solution. And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy. Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever. Step 1: Go ahead and paste the following code in your active theme's single.php //To return the URL of the previous page, use the following php code: $prev = get_permalink(get_adjacent_post(false,'',false)); //To return the URL of the next page, use the following php code: $next = get_permalink(get_adjacent_post(false,'',true)); //To use them, simply echo the variables $prev and $next where you need them. <a href="<?php echo $prev; ?>">Previous Post</a> and the  <a href="<?php echo $next; ?>">Next Post<