Author: therichpost

How to run jQuery in Angular 8?
Hello to all, welcome to therichpost.com. In this post, I will tell you, How to run jQuery in Angular 8?

Some time or I can say, I do my mostly code with the help of jQuery so I will definitely use Jquery into my Angular 8 project.

Here I am going to tell you working steps to run jQuery in Angular 8 and please follow carefully:

1. Here are the basics commands to add Angular 8 setup into your PC:
```
$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest8 //Go inside the Angular 8 Project
```
2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal to install jQuery modules:
```
$ npm install jquery –save //Add jquery module
```
3. Here is the code, you need to add into your angular.json file in root folder:
```
...
"scripts": ["node_modules/jquery/dist/jquery.min.js"]
...
```
4. Here is the code, you need to add into your src/app/app.component.ts file:
```
import { Component } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'jquery in angular 8';

ngOnInit(){
       $('body').addClass('df');
}
}
```
5. After run below command, you can see in firebug that body has class name “df”:

ng
```
ng serve
```
This is it. If you have any query related to this post then please do comment below or ask question.

Harjas,

Thank you
July 3, 2019

How to implement Fullcalendar in Angular 8?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to implement Fullcalendar in Angular 8?

Today I am writing my first post related to Angular 8.

Important: FullCalendar has been update to version 5 So please check below link first:

How to implement FullCalendar in Angular 9/10 ?

In this post, I will implement Fullcalndar in Angular 8 with the help of jQuery.

1. Let start, here are the basics commands to set Angular 8 into your pc:

$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest8 //Go inside the Angular 8 Project

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal to install Fullcalendar and jQuery modules:

$ npm install jquery --save //Add jquery module

$ npm i fullcalendar //Add fullcalendar module

$ npm i moment //Add momentjs library

$ ng serve //Run your Angular 8 Project

Now you are few inches left to implement Fullcalendar in Angular8

3. Here is the code, you need to add into your angular.json file in root folder:

...
"styles": [
              "src/styles.css",
              "node_modules/fullcalendar/dist/fullcalendar.min.css"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.min.js",
            "node_modules/moment/min/moment.min.js",
            "node_modules/fullcalendar/dist/fullcalendar.min.js"]
...

4. Here is the code, you need to add into your src/app/app.component.ts file:

import { Component } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'easyfullcalendar';

ngOnInit(){
       setTimeout(() => {
        $("#calendar").fullCalendar({  
                        header: {
                            left   : 'prev,next today',
                            center : 'title',
                            right  : 'month,agendaWeek,agendaDay'
                        },
                        navLinks   : true,
                        editable   : true,
                        eventLimit : true,
                        events: [
                            {
                                title : 'This is your',
                                start : '2019-03-03T12:30:00',
                                color : '#f9c66a' // override!
                            },
                            {
                                title : 'Your meeting with john',
                                start : '2019-03-07T12:30:00',
                                end   : '2019-03-09',
                                color : "#019efb"
                            },
                            {
                                title  : 'This is Today',
                                start  : '2019-03-12T12:30:00',
                                allDay : false, // will make the time show,
                                color  : "#57cd5f"
                            }
                        ],  // request to load current events
                    });

     }, 100);
   }
}

5. Finally, here is the code for you src/app/app.component.html file:

<div id="calendar"></div>

You are done and if you have any query related to this post, then please do comment below or ask questions.

Jassa

Thank you

July 2, 2019

How to add Woocommerce Products from frontend?

Hello to all, welcome to therichpost.com. Today I am going to share my WP Plugin link and with the help of this plugin user will add Woocommerce Products from frontend.

Add shortcode [ ProductForm ] into your post and pages to show add product form in frontend.

TheRich Woo Frontend Add Product Form

If you have any query related to this plugin then you can ask here.

June 28, 2019
How to implement Fullcalendar in WordPress?

Hello to all, welcome to therichpost.com. Here is the working plugin for Fullcalendar in WordPress.

Here you can check the working example:

TheRich WP Fullcalendar

[TheRicHWordpressFullcalendar]

Feel free to ad your views and if you have any query related to this plugin then add comment below.

Thank you.

June 12, 2019
How to add header and footer when Edit with Thrive Architect?

Hello to all, welcome to therichpost.com. In this post, I will tell you, how to add header and footer when Edit with Thrive Architect?

I just work on Thrive Theme and I found that, it is amazing. While doing work with Thrive Theme Architect,
I found some amazing things like Global Header and Global Footer setting, which impressed me a lot and I will share some other good thing above Thrive Theme Architect.

Here I am going to share the setting for add header and footer when Edit with Thrive Architect and please do carefully:

After Click on setting menu, you see below image options:

After click on Global menu, you will find below image options:

Then after click on Header menu and Footer menu, you will see below screens:

This is it, if you have any query related to Thrive Themes then please do comment below.

Jassa jatt,

Thank you

June 3, 2019

Tilt in Angular 7 working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Tilt in Angular 7 working example.

If you are new in Angular then you can check my old posts related to Angular 7.

In this post, I am using Tilt effect in Angular 7.

Here is the code and please use carefully:

1. Very first, you need to run the below command into your terminal to add tilt js into your Angular 7 application:

$ npm install --save angular-tilt

1. After run above command, add below code into your Angular 7 fresh application:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularTiltModule } from 'angular-tilt';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  AngularTiltModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div style="text-align:center">
 <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">


 <div style="margin: 0 auto;background:green; height:350px; width:350px; text-align:center; vertical-align:middle; color:#fff" class="container" aTilt 
    [tiltSettings]="tiltSettings">  
     <h1>
       Welcome to {{ title }}!
     </h1>
 </div>

</div>

If you have any query related to this post then please do comment below.

Jassa jatt

Thank you

May 29, 2019

Woocommerce related products custom query

Hello to all, welcome to therichpost.com. In this post, I will tell you, Woocommerce related products custom query.

If you are new in WordPress then please have a look on my old posts related to WordPress.

In this post, I am making custom query to show woocommerce related products like, Woocommerce shows in Single product page but In my query, I will show related products for particular user which is logged in, this means logged in user will see only his/her products.

With the wordpress hook, we can add this custom query into Woocommerce single product page, if we want to particular author related products and here is the code and please use this carefully.

<?php 
global $post;
$related = get_posts( 
  array( 
  'category__in' => wp_get_post_categories( $post->ID ), 
  'numberposts'  => 4, 
  'post__not_in' => array( $post->ID ),
  'post_type'    => 'product'
  ) 
);

if( $related ) { ?>
  <ul>
    <?php 
      foreach( $related as $post ) {
        setup_postdata($post); 
        $url = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()), 'full' );
        $product = wc_get_product( get_the_ID() );?>
        <li class="post-<?php echo get_the_ID();?> product type-product">
          <a href="<?php echo get_the_permalink(get_the_ID()); ?>">
          <img src="<?php echo $url; ?>">
          <h2><?php echo get_the_title(); ?></h2>
          <span class="price">$ <?php echo $product->get_price(); ?></span>
          </a>
          <a href="<?php echo get_the_permalink(get_the_ID()); ?>">Buy Now</a>
        </li>
      <?php
      /*whatever you want to output*/
      }
    wp_reset_postdata(); ?>
  </ul>
<?php } ?>

If you have any query related to this post then please let me know or comment below.

Harjas,

Thank you

May 20, 2019

WordPress cheat code to update User Password mysql query
Hello to all, welcome to therichpost.com. In this post, I will tell you, WordPress cheat code to update User Password mysql query.

To get more WordPress Cheat Codes, please chick: WordPress Cheat Codes.

In this post, I am sharing, WordPress cheat code to update User Password mysql query
and I think, this will be useful to all.

Here is the code for, WordPress cheat code to update User Password mysql query and please use this carefully:
```
$passhash = md5("password");
global $wpdb;
$a = $wpdb->update( $wpdb->prefix.'users', array( 'user_pass' => $passhash ), array( 'ID' => get_current_user_id() ) );
if($a == 1){
  echo "Done";
  }else{echo "err";}
```
This is done and if you have any query then please do comment below.

Jassa Jatt,

Thank you.
May 19, 2019

WordPress cheat code to update User details from frontend

Hello to all, welcome to therichpost.com. In this post, I will tell you, WordPress cheat code to update User details from frontend.

Today again, I am coming with WordPress cheat code to update User details from frontend and this is very easy and useful.

I am sharing these codes because, these codes are very simple but sometime simple thing takes very much time so.

With this post code, I am making frontend form and with that form, I will update login user details. I will hope this will be useful.

Here is the code for wordpress cheat code to update user details from frontend and please use this carefully into your WordPress theme’s template file:

<?php
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) &&  $_POST['action'] == "new_post") {
global $current_user; // Get login user data
get_currentuserinfo();
$args = array(
    'ID'         => $current_user->id,
    'user_email' => esc_attr( $_POST['user_email'] ),
    'user_nicename' => esc_attr( $_POST['user_nicename'] )
);
wp_update_user( $args ); // Update user data
}?>
<!-- Content -->
<div class="content">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="card-header">
                        <div class="crd-flx">
                            <h2 class="card-title">My Profile</h2>
                        </div>
                    </div>
                    <div class="card-body">
                        <form class="My-profile" id="new_post" name="new_post" method="post" action="">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                        <label>Name</label>
                                        <input type='text' class="form-control" name="user_nicename" required value="<?php echo $current_user->user_nicename; ?>" />
                                    </div>
                                    <div class="form-group">
                                        <label>Username</label>
                    
                    <!--This is disabled because we can not change the Username-->
                    
                                        <input disabled="disabled" type='text' class="form-control" name="username" value="<?php echo $current_user->user_login; ?>" />
                                    </div>
                                    <div class="form-group">
                                        <label>Email</label>
                                        <input type='email' class="form-control" name="user_email" required value="<?php echo $current_user->user_email; ?>" />
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                            <div class="form-group">
                                                <input type="submit" value="Save" class="btn btn-custom login-btn pull-right"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <input type="hidden" name="action" value="new_post" />
                            <?php wp_nonce_field( 'new-post' ); ?>
                        </form>
                    </div>
                </div>
            </div>
        </div>
</div>
<!-- /.content -->

This is it and if you have any query related to this post then please do comment.

Harjas,

Thank you

May 17, 2019

WordPress Cheat Code to add Post from Frontend

Hello to all, welcome to therichpost.com. In this post, I will tell you, WordPress Cheat Code to add Post from Frontend.

Today, I am going to start new topic named WordPress Cheat Code
and in this topic, I will share all WordPress Cheat Code, which will help others to make wordpress code easy.
Today, I will write first post for this topic name WordPress Cheat Code to add Post from Frontend.

WordPress plays very important role in website world and I personally like WordPress very much. There are many WordPress developers in the world and I am one of the best WordPress developer(hahaha).

WordPress developers, today I am going to make your life easy with my today post.

In this post, I am just adding the title from frontend post form and In future posts, I will add post featured image and other things.

Here is the code for WordPress Cheat Code to add Post from Frontend and you can add this into any your wordpress theme’s template file.

<?php
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) &&  $_POST['action'] == "new_post") {
$new_post = array(
        'post_title'    =>  $_POST['title'],
        'post_status'   => 'publish', // Choose: publish, preview, future, draft, etc.
        'post_type'     => 'post' //'post',page' or use a custom post type if you want to
);
wp_insert_post($new_post);
}
?>
  <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
           <div class="card-header">
              <h2 class="card-title">Add POST</h2>
                </div>
                <div class="card-body">
                   <div class="row">
                       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                           <form id="new_post" name="new_post" method="post" action="">
                              <div class="form-group">
                                    <label>POST Title</label>
                                    <input type='text' class="form-control" required="" name="title" />
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                        <div class="form-group">
                                            <input type="submit" value="Save" class="btn btn-custom login-btn pull-right"/>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="action" value="new_post" />
                <?php wp_nonce_field( 'new-post' ); ?>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

This is it and if you have any query related to this post then please do comment below.

jASSA jATT,

Thank you.

May 16, 2019

Author: therichpost

1. Here are the basics commands to add Angular 8 setup into your PC:

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal to install jQuery modules:

3. Here is the code, you need to add into your angular.json file in root folder:

4. Here is the code, you need to add into your src/app/app.component.ts file:

5. After run below command, you can see in firebug that body has class name “df”:

1. Let start, here are the basics commands to set Angular 8 into your pc:

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal to install Fullcalendar and jQuery modules:

3. Here is the code, you need to add into your angular.json file in root folder:

4. Here is the code, you need to add into your src/app/app.component.ts file:

5. Finally, here is the code for you src/app/app.component.html file:

1. Very first, you need to run the below command into your terminal to add tilt js into your Angular 7 application:

1. After run above command, add below code into your Angular 7 fresh application: