Add a custom drop-down to Datatable


Javascript codes


<script>
$(document).ready(function(){         
    let table = $('#kt_datatable').DataTable({
        responsive:true,
        order: [[0, 'desc']],
        columnDefs: [
            {
            targets: 7,
            searchable: false,
            orderable: false,

            }
        ],
        language: {
            'url' : datatable_lang_cdns.{{config('app.locale')}}                
        },
        "dom": 'l<"toolbar">ftip',
        initComplete: function () {
            this.api().columns([6]).every( function () {
                var column = this;
                var select = $('<select><option value="">All Role</option><select>')
                .appendTo( $('.toolbar').empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column.search( val ? '^'+val+': '', true, false ).draw();
                 } );

                 column.data().unique().sort().each( function ( d, j ) {
                     select.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
            } );
        }
    });
});

</script>

Style codes:


<style>

.toolbar{
    display: inline-block;
    margin-left: 2%;
}
.dataTables_length{
    display: inline-block;
}
.dataTables_filter{
    display: inline-block;
    float: right;
}
</style>

Laravel storage folder write permission at Ubuntu 20.04 Nginx server


Check user assigned in Nginx `www.conf` file located at `/etc/php/7.0/fpm/pool.d/www.conf` User may be www-data or any other.
Then run following command at terminal one by one


sudo chown $USER:www-data -R storage/
sudo chmod u=+srwX,g=+srX,o=rX -R storage/
sudo chmod -R o+w storage/
sudo chmod -R 775 storage/

How to configure Cache-control at Nginx or Apache server


Nginx:

open virtual hosts file and add below codes.


vim /etc/nginx/sites-available/your-domain.conf


location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff2)$ {
  expires 365d;
  add_header Cache-Control "public, no-transform";
}

Apache:

Setup cache control with mod headers. enabled headers if disabled


a2enmod headers

Now open your .htaccess file and add below codes


<ifModule mod_headers.c>
  <filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp|js|css)$">
    Header set Cache-Control "max-age=31536000, public"
  </filesMatch>
</ifModule>

Custom pagination links with wordpress paginate_links() function



$total_pages = $recent_sales->max_num_pages;
if ($total_pages > 1){

  echo '<div class="pagination"><ul class="list-unstyled">';

  $current_page = max(1, $paged);

  $links = paginate_links(array(
    'base'      => add_query_arg('paged','%#%'),
    'format'    => '?paged=%#%',
    'current' => $current_page,
    'total' => $total_pages,
    'prev_text'    => '<i class="far fa-angle-left"></i>',
    'next_text'    => '<i class="far fa-angle-right"></i>',
    'add_args'  => array(),
    'type' => 'array',
    'show_all' => true
  ));

  if ( $paged == 1) echo '<li class="pg-prev pg-nav"><a href="javascript:void(0)" class="disabled"><i class="far fa-angle-left"></i></a></li>';

  foreach ($links as $key => $link) {
    echo "<li>$link</li>";
  }

  if ( $paged == $total_pages ) echo '<li class="pg-next pg-nav"><a href="javascript:void(0)" class="disabled"><i class="far fa-angle-right"></i></a></li>';

  echo '</ul></div>';
}

Order by meta value and query with a meta value | WordPress



$recent_sales = new WP_Query(array(
  'paged' => $paged,
  'post_type' => 'Property',  //custom post type name
  'post_status' => 'publish',
  'posts_per_page' => 2, 
  'meta_key'  => 'sold_date',
  'orderby' => 'meta_value',
  'order' => $sortorder == 'oldest' ? 'ASC' : 'DESC',
  'meta_query' => array(
     array(
       'key' => 'property_status',
       'value' => 'past-sell'
     )
  )                   
));

Custom logo display in WordPress


Following two way we can do it


<?php if ( has_custom_logo() ) : ?>
<a href="/">
  <?php 
     $custom_logo_id = get_theme_mod( 'custom_logo' );
     $image = wp_get_attachment_image_src( $custom_logo_id , 'full' ); 
  ?>
  <img src="<?php echo $image[0]; ?>" class="custom-logo" alt="Logo" width="146" height="40">
</a>
<?php endif; ?>

<?php if ( has_custom_logo() ) : ?>
   <?php the_custom_logo() ?>
<?php endif; ?>

Manage wordpress navigation menu dynamically with Nav Walker


Add below codes to your theme functions.php file


function app_nav_init() {
  register_nav_menus(array(
     'primary'  => 'Primary Menu',
     'footer-1' => 'Footer Top Menu',
     'footer-2' => 'Footer Bottom Menu'
  ));
}
add_action( 'init', 'app_nav_init' );

//Declare a nav walker class to manage nav custom output
class Footer_2_Walker extends Walker {    
    /**
     * Database fields to use.
     * @see Walker::$db_fields
     */
    public $db_fields = array(
        'parent' => 'menu_item_parent',
        'id'     => 'db_id',
    );

    function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
    	$object = $item->object;
    	$type = $item->type;
    	$title = $item->title;
    	$description = $item->description;
    	$permalink = $item->url;            
        if( $permalink && $permalink != '#' ) {
            $output .= '<a href="' . $permalink . '">';
        } else {
            $output .= '<a href="#">';
        }        
        $output .= $title.'</a>';
    } 
}

Now, you can call the custom walker from a view to display custom nav menu


<?php
wp_nav_menu( array(
  'theme_location' => 'footer-2',
  'menu_id'        => 'footer-2-menu',
  'menu_class'     => 'footer-bottom-link',
  'items_wrap' => '<div id="%1$s" class="%2$s">%3$s</div>',
  'container' => false,
  'walker' => new Footer_2_Walker()
) );
?> 

Add custom meta to post


Add below codes on you theme functions.php file


function sm_meta_callback( $post ) {
    $featured = get_post_meta( $post->ID );
?>
<p>
  <div class="sm-row-content">
    <label for="meta-checkbox">
    <input type="checkbox" name="meta-checkbox" id="meta-checkbox" value="yes" <?php if ( isset ( $featured['meta-checkbox'] ) ) checked( $featured['meta-checkbox'][0], 'yes' ); ?> /> Featured this post
    </label>
  </div>
</p>
<?php
}
function sm_custom_meta() {
   add_meta_box( 'sm_meta', __( 'Featured Posts', 'theme-name' ), 'sm_meta_callback', 'post' );
}
add_action( 'add_meta_boxes', 'sm_custom_meta' );
/**
 * Saves the custom meta input
 */
function sm_meta_save( $post_id ) { 
    // Checks save status
   $is_autosave = wp_is_post_autosave( $post_id );
   $is_revision = wp_is_post_revision( $post_id );
   $is_valid_nonce = ( isset( $_POST[ 'sm_nonce' ] ) && wp_verify_nonce( $_POST[ 'sm_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
   // Exits script depending on save status
   if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
     return;
   }
   // Checks for input and saves
   if( isset( $_POST[ 'meta-checkbox' ] ) ) {
       update_post_meta( $post_id, 'meta-checkbox', 'yes' );
   } else {
       update_post_meta( $post_id, 'meta-checkbox', 'no' );
   } 
}
add_action( 'save_post', 'sm_meta_save' );

Now, you can fetch posts with custom meta anywhere on your view to display post. Please check below query to fetch posts with meta value


<?php 
$args = array(
  'posts_per_page' => 5,
  'meta_key' => 'meta-checkbox',
  'meta_value' => 'yes',
  'post_type' => 'post',
  'post_status' => 'publish',
  'order'    => 'DESC',
  'orderby'  => 'id',
);
$feature_blog = new WP_Query( $args );
?>