Wordpress theme add css js files right method

Hello

Today I am going to explain how to add css and js files in functions.php in wordpress theme. I was face so much issues when add css and js files. Theme is not display properly as in html view. I saw that I made mistake in include js files. My way is not right. So here I saw you the correct way.

All files are in "assets" folder.

functions.php

function load_stylesheets(){

$theme_version = wp_get_theme()->get( 'Version' );

wp_enqueue_style('bootstrap', get_template_directory_uri().'/assets/vendors/bootstrap/css/bootstrap.min.css', array(), $theme_version, false);

wp_enqueue_style('fontawesome', get_template_directory_uri().'/assets/vendors/fontawesome/css/all.min.css', array(), $theme_version, false);

wp_enqueue_style('tinyslider', get_template_directory_uri().'/assets/vendors/tiny-slider/dist/tiny-slider.css', array(), $theme_version, false);

wp_enqueue_style('owlcarousel1', get_template_directory_uri().'/assets/vendors/owl-carousel/owl.carousel.min.css', array(), $theme_version, false);

wp_enqueue_style('owlcarousel2', get_template_directory_uri().'/assets/vendors/owl-carousel/owl.theme.default.min.css', array(), $theme_version, false);

wp_enqueue_style('animate', get_template_directory_uri().'/assets/vendors/animate/animate.min.css', array(), $theme_version, false);

wp_enqueue_style('iconstyle', get_template_directory_uri().'/assets/vendors/paroti-icons/style.css', array(), $theme_version, false);

wp_enqueue_style('magnific', get_template_directory_uri().'/assets/vendors/jquery-magnific-popup/jquery.magnific-popup.css', array(), $theme_version, false);

wp_enqueue_style('youtube', get_template_directory_uri().'/assets/vendors/youtube-popup/youtube-popup.css', array(), $theme_version, false);

wp_enqueue_style('pstyle', get_template_directory_uri().'/assets/css/paroti.css', array(), $theme_version, false);

wp_enqueue_style('customcss', get_template_directory_uri().'/assets/css/custom.css', array(), $theme_version, false);

//js files

wp_register_script('jquery',get_template_directory_uri().'/assets/vendors/jquery/jquery-3.6.1.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('jquery');

wp_register_script('bootstrap',get_template_directory_uri().'/assets/vendors/bootstrap/js/bootstrap.bundle.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('bootstrap');

wp_register_script('tinislider',get_template_directory_uri().'/assets/vendors/tiny-slider/dist/min/tiny-slider.js',array('jquery'), $theme_version, true);

wp_enqueue_script('tinislider');

wp_register_script('validatefile',get_template_directory_uri().'/assets/vendors/jquery-validation/jquery.validate.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('validatefile');

wp_register_script('wowjs',get_template_directory_uri().'/assets/vendors/wow/wow.js',array('jquery'), $theme_version, true);

wp_enqueue_script('wowjs');

wp_register_script('ajaxchimp',get_template_directory_uri().'/assets/vendors/jquery-ajaxchimp/jquery.ajaxchimp.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('ajaxchimp');

wp_register_script('jqueryappear',get_template_directory_uri().'/assets/vendors/jquery-appear/jquery.appear.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('jqueryappear');

wp_register_script('carrousalmin',get_template_directory_uri().'/assets/vendors/owl-carousel/owl.carousel.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('carrousalmin');

wp_register_script('magnificpopup',get_template_directory_uri().'/assets/vendors/jquery-magnific-popup/jquery.magnific-popup.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('magnificpopup');

wp_register_script('youtubejquery',get_template_directory_uri().'/assets/vendors/youtube-popup/youtube-popup.jquery.js',array('jquery'), $theme_version, true);

wp_enqueue_script('youtubejquery');

wp_register_script('mainjsfile',get_template_directory_uri().'/assets/js/paroti.js',array('jquery'), $theme_version, true);

wp_enqueue_script('mainjsfile');

wp_register_script('customjs',get_template_directory_uri().'/assets/js/customjs.js',array('jquery'), $theme_version, true);

wp_enqueue_script('customjs');

}

add_action('wp_enqueue_scripts','load_stylesheets');

Sorting numbers without using inbuilt function

 $result = ['9','2','5','4','3','7'];

for ($i = 0; $i < count($result) - 1; $i++) {

  for ($j = $i + 1; $j < count($result); $j++) {

    if ($result[$i] > $result[$j]) {

      $temp = $result[$i];

      $result[$i] = $result[$j];

      $result[$j] = $temp;

    }

  }

}

echo "<pre>";print_r($result);echo "</pre>";

OUTPUT:

Array
(
    [0] => 2
    [1] => 3
    [2] => 4
    [3] => 5
    [4] => 7
    [5] => 9
)

Encrypt and decrypt password method with key

 Hello Today I saw you how to encrypt and decrypt password.

core PHP:

define ("SECRETKEY", "MyApplicationResult");
function encryptedPassword($password){
return openssl_encrypt($password, "AES-128-ECB", SECRETKEY);
}
function decryptedPassword($password){
return openssl_decrypt($password, "AES-128-ECB", SECRETKEY);
}

CodeIgniter 4:

 public function encrypt_pass($simple_string){
       
        // Store the cipher method
        $ciphering = "AES-128-CTR";
        // Use OpenSSl Encryption method
        $iv_length = openssl_cipher_iv_length($ciphering);
        $options = 0;
        // Non-NULL Initialization Vector for encryption
        $encryption_iv = '1234567891011121';
        // Store the encryption key
        $encryption_key = "MySecretKey";
        return $encryption = openssl_encrypt($simple_string, $ciphering, $encryption_key, $options, $encryption_iv);
     }

    public function decrypt_pass($encryption){
        // Store the cipher method
        $ciphering = "AES-128-CTR";
        // Use OpenSSl Encryption method
        $iv_length = openssl_cipher_iv_length($ciphering);
        $options = 0;
        // Non-NULL Initialization Vector for encryption
        $decryption_iv = '1234567891011121';
        // Store the encryption key
        //$decryption_key = $this->websitekey;
        $decryption_key = "MySecretKey";
        return $decryption=openssl_decrypt ($encryption, $ciphering, $decryption_key, $options, $decryption_iv);
    }

Get Browser name, version and operating system name in php

Hello.

Recently I want to know about user's details. SO I use these code for geting browser name, version and operating system name.

Output: 

Browser Name: Google Chrome
Browser Version: 116.0.0.0
Operating System: Windows 10

Code:

$userAgent = $_SERVER['HTTP_USER_AGENT'];

function getBrowserVersion($userAgent, $browserName) {

    $pattern = "";

    switch ($browserName) {

        case "Internet Explorer":

            $pattern = '/MSIE|Trident\/.*rv:([\d\.]+)/';

            break;

        case "Mozilla Firefox":

            $pattern = '/Firefox\/([\d\.]+)/';

            break;

        case "Microsoft Edge":

            $pattern = '/Edge\/([\d\.]+)/';

            break;

        case "Google Chrome":

            $pattern = '/Chrome\/([\d\.]+)/';

            break;

        case "Apple Safari":

            $pattern = '/Version\/([\d\.]+)/';

            break;

        case "Opera":

            $pattern = '/Opera\/([\d\.]+)/';

            break;

    }

    if (preg_match($pattern, $userAgent, $matches)) {

        return $matches[1];

    }

    return "Unknown";

}

function getBrowserInfo($userAgent) {

    if (preg_match('/MSIE|Trident/i', $userAgent)) {

        return "Internet Explorer";

    } elseif (preg_match('/Firefox/i', $userAgent)) {

        return "Mozilla Firefox";

    } elseif (preg_match('/Edge/i', $userAgent)) {

        return "Microsoft Edge";

    } elseif (preg_match('/Chrome/i', $userAgent)) {

        return "Google Chrome";

    } elseif (preg_match('/Safari/i', $userAgent)) {

        return "Apple Safari";

    } elseif (preg_match('/Opera/i', $userAgent)) {

        return "Opera";

    }

    return "Unknown";

}

function getOperatingSystem($userAgent) {

    $os = "Unknown";

    if (preg_match('/Windows NT 10/i', $userAgent)) {

        $os = "Windows 10";

    } elseif (preg_match('/Windows NT 6.3/i', $userAgent)) {

        $os = "Windows 8.1";

    } elseif (preg_match('/Windows NT 6.2/i', $userAgent)) {

        $os = "Windows 8";

    } elseif (preg_match('/Windows NT 6.1/i', $userAgent)) {

        $os = "Windows 7";

    } elseif (preg_match('/Windows NT 6.0/i', $userAgent)) {

        $os = "Windows Vista";

    } elseif (preg_match('/Windows NT 5.1/i', $userAgent) || preg_match('/Windows XP/i', $userAgent)) {

        $os = "Windows XP";

    } elseif (preg_match('/Windows NT 5.0/i', $userAgent)) {

        $os = "Windows 2000";

    } elseif (preg_match('/Windows NT 4.0/i', $userAgent)) {

        $os = "Windows NT 4.0";

    } elseif (preg_match('/Macintosh|Mac OS X/i', $userAgent)) {

        $os = "Mac OS X";

    } elseif (preg_match('/Linux/i', $userAgent)) {

        $os = "Linux";

    } elseif (preg_match('/Unix/i', $userAgent)) {

        $os = "Unix";

    } elseif (preg_match('/Ubuntu/i', $userAgent)) {

        $os = "Ubuntu";

    }

    return $os;

}

$operatingSystem = getOperatingSystem($userAgent);

$browserName = getBrowserInfo($userAgent);

$browserVersion = getBrowserVersion($userAgent, $browserName);

echo "Browser Name: " . $browserName . "<br>";

echo "Browser Version: " . $browserVersion;

echo "<br>Operating System: " . $operatingSystem;

How to backup and download Database using PHP

Hello

Today I saw you How to backup and download Database using PHP.

dbexport.php

<?php

    

    $mysqlUserName      = 'root';

    $mysqlPassword      = 'password';

    $mysqlHostName      = 'localhost';

    $DbName             = 'wordpress63';  

    

   

    Export_Database($mysqlHostName,$mysqlUserName,$mysqlPassword,$DbName,  $tables=false, $backup_name=false );

    function Export_Database($host,$user,$pass,$name,  $tables=false, $backup_name=false )

    {

        $mysqli = new mysqli($host,$user,$pass,$name); 

        $mysqli->select_db($name); 

        $mysqli->query("SET NAMES 'utf8'");

        $queryTables    = $mysqli->query('SHOW TABLES'); 

        while($row = $queryTables->fetch_row()) 

        { 

            $target_tables[] = $row[0]; 

        }   

        if($tables !== false) 

        { 

            $target_tables = array_intersect( $target_tables, $tables); 

        }

        foreach($target_tables as $table)

        {

            $result         =   $mysqli->query('SELECT * FROM '.$table);  

            $fields_amount  =   $result->field_count;  

            $rows_num=$mysqli->affected_rows;     

            $res            =   $mysqli->query('SHOW CREATE TABLE '.$table); 

            $TableMLine     =   $res->fetch_row();

            $content        = (!isset($content) ?  '' : $content) . "\n\n".$TableMLine[1].";\n\n";

            for ($i = 0, $st_counter = 0; $i < $fields_amount;   $i++, $st_counter=0) 

            {

                while($row = $result->fetch_row())  

                { //when started (and every after 100 command cycle):

                    if ($st_counter%100 == 0 || $st_counter == 0 )  

                    {

                            $content .= "\nINSERT INTO ".$table." VALUES";

                    }

                    $content .= "\n(";

                    for($j=0; $j<$fields_amount; $j++)  

                    { 

                        $row[$j] = str_replace("\n","\\n", addslashes($row[$j]) ); 

                        if (isset($row[$j]))

                        {

                            $content .= '"'.$row[$j].'"' ; 

                        }

                        else 

                        {   

                            $content .= '""';

                        }     

                        if ($j<($fields_amount-1))

                        {

                                $content.= ',';

                        }      

                    }

                    $content .=")";

                    //every after 100 command cycle [or at last line] ....p.s. but should be inserted 1 cycle eariler

                    if ( (($st_counter+1)%100==0 && $st_counter!=0) || $st_counter+1==$rows_num) 

                    {   

                        $content .= ";";

                    } 

                    else 

                    {

                        $content .= ",";

                    } 

                    $st_counter=$st_counter+1;

                }

            } $content .="\n\n\n";

        }

        

        $backup_name = $name.".sql";

        header('Content-Type: application/octet-stream');   

        header("Content-Transfer-Encoding: Binary"); 

        header("Content-disposition: attachment; filename=\"".$backup_name."\"");  

        echo $content; exit;

    }

?>

Search functionality in wordpress custom theme

Hello. Today I saw you how to make search functionality in custom theme of wordpress. 

Put this search form in your search area.

<div class="sidebar__search">
<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="sidebar__search-form">
<div>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="Keywrord.." />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</div>

search.php

<?php
/**
 * The template for displaying search results pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
get_header(); ?>
<section class="blog-details blog_single">
    <div class="container">
        <div class="row">
            <div class="col-xl-8 col-lg-7 searchpage">
                <p>You searched for : <?php printf( __( '%s', 'immigration' ), '<span>' . get_search_query() . '</span>' ); ?></p>
<?php
                        global $query_string;
                        $query_args = explode("&", $query_string);
                        $search_query = array();
                        foreach($query_args as $key => $string) {
                          $query_split = explode("=", $string);
                          $search_query[$query_split[0]] = urldecode($query_split[1]);
                        } // foreach
                        $the_query = new WP_Query($search_query);
                        if ( $the_query->have_posts() ) {
                        ?>
                        <!-- the loop -->
                        <ol>    
                        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                            <li>
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </li>   
                        <?php endwhile; ?>
                        </ol>
                        <!-- end of the loop -->
                        <?php wp_reset_postdata(); ?>
                    <?php } else {  ?>
                        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                    <?php } 
                    ?>
                </div>
                <div class="col-xl-4 col-lg-5 blog-sidebar__col">
                    <div class="blog-sidebar__right">
                        <?php include ("sidebar-blog.php"); ?>
                    </div>
                </div>
        </div>
    </div>
</section>
 <?php get_footer(); ?>

Create custom post type and get it to frontend with code

 Hello All

Today I show you how to create custom post type in functions.php and save those data and get it to frontend side.

//custom post type for Consultant details
function consultatns_custom() {
  
// Set UI labels for Custom Post Type
    $labels = array(
        'name'                => _x( 'Consultant', 'Post Type General Name', 'immigration' ),
        'singular_name'       => _x( 'consultant', 'Post Type Singular Name', 'immigration' ),
        'menu_name'           => __( 'Consultant', 'immigration' ),
        'parent_item_colon'   => __( 'Parent Consultant', 'immigration' ),
        'all_items'           => __( 'All Consultants', 'immigration' ),
        'view_item'           => __( 'View consultant', 'immigration' ),
        'add_new_item'        => __( 'Add New consultant', 'immigration' ),
        'add_new'             => __( 'Add New', 'immigration' ),
        'edit_item'           => __( 'Edit consultant', 'immigration' ),
        'update_item'         => __( 'Update consultant', 'immigration' ),
        'search_items'        => __( 'Search consultant', 'immigration' ),
        'not_found'           => __( 'Not Found', 'immigration' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'immigration' ),
    );
      
// Set other options for Custom Post Type
      
    $args = array(
        'label'               => __( 'consultant', 'immigration' ),
        'description'         => __( 'All Consultant data', 'immigration' ),
        'labels'              => $labels,
        // Features this CPT supports in Post Editor
        'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields' ),
        // You can associate this CPT with a taxonomy or custom taxonomy. 
        //'taxonomies'          => array( 'genres' ),
        /* A hierarchical CPT is like Pages and can have
        * Parent and child items. A non-hierarchical CPT
        * is like Posts.
        */
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'post',
        'show_in_rest' => true,
        
        'taxonomies'          => array( 'category' ),
    );
      
    // Registering your Custom Post Type
    register_post_type( 'consultant', $args );
  
}
  
/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/
add_action( 'init', 'consultatns_custom', 5 );
//new metabox for consultant type
function wporg_add_custom_box() {
    $screens = [ 'consultant', 'wporg_cpt' ];
    foreach ( $screens as $screen ) {
        add_meta_box(
            'wporg_box_id',                 // Unique ID
            'Social Media Links Here',      // Box title
            'wporg_custom_box_html',  // Content callback, must be of type callable
            $screen                            // Post type
        );
    }
}
add_action( 'add_meta_boxes', 'wporg_add_custom_box' );
function wporg_custom_box_html( $post ) {
    $fblink = get_post_meta( $post->ID, 'metakey_facebook', true );
    $instalink = get_post_meta( $post->ID, 'metakey_insta', true );
    $twitterlink = get_post_meta( $post->ID, 'metakey_twitter', true );
    $pinrestlink = get_post_meta( $post->ID, 'metakey_pinrest', true );
    ?>
    <p> <label for="facebooklink">Facebook</label>
    <input type="text" name="facebooklink" id="facebooklink" value="<?php echo $fblink; ?>"></p>
    <p><label for="instalink">Instagram</label>
    <input type="text" name="instalink" id="instalink" value="<?php echo $instalink; ?>"></p>
    <p> <label for="twitterlink">Twitter</label>
    <input type="text" name="twitterlink" id="twitterlink" value="<?php echo $twitterlink; ?>"></p>
    <p><label for="pinrestlink">Pinrest</label>
    <input type="text" name="pinrestlink" id="pinrestlink" value="<?php echo $pinrestlink; ?>"></p>
    <?php
}
function wporg_save_postdata( $post_id ) {
    if ( array_key_exists( 'facebooklink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_facebook',
            $_POST['facebooklink']
        );
    }
    if ( array_key_exists( 'instalink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_insta',
            $_POST['instalink']
        );
    }
    if ( array_key_exists( 'twitterlink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_twitter',
            $_POST['twitterlink']
        );
    }
    if ( array_key_exists( 'pinrestlink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_pinrest',
            $_POST['pinrestlink']
        );
    }
}
add_action( 'save_post', 'wporg_save_postdata' );
//end consultant code

This code result is display like this.

When you insert new Consultant, it look like this:

Data will save on click update/publish button and use this code to get data.

page-consultant.php

 <?php 

                  $args = array(

                   'post_type' => 'consultant',

                   'posts_per_page' => 4,

                   'post_status' => 'publish',

                   'orderby' => 'date',

                   'order' => 'DESC',

               );

               $query = new WP_Query( $args );

               if ( $query->have_posts() ) {

                  echo '<div class="row">';

                  $secondsdelay = 0;

                  while ( $query->have_posts() ) {

                     $secondsdelay = $secondsdelay + 100;

                     $secondsset = $secondsdelay.'ms';

                    $data = $query->the_post();

                    $post_thumbnail_id = get_post_thumbnail_id( $data );

                    $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );

                    

                    $title = get_the_title();

                    $permalink = get_the_permalink();

                    $excerpt = get_the_excerpt();

                    $content = get_the_content();

                    //get custom fields data

                    //$custom = get_post_custom( get_the_ID() );

                    $fblink = get_post_meta(get_the_ID(),'metakey_facebook',true);

                    $instalink = get_post_meta(get_the_ID(),'metakey_insta',true);

                    $twitterlink = get_post_meta(get_the_ID(),'metakey_twitter',true);

                    $pinrestlink = get_post_meta(get_the_ID(),'metakey_pinrest',true);

               ?>

                  <!--Team One Single Start-->

                  <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp animated" data-wow-delay="<?php echo $secondsset; ?>" style="visibility: visible; animation-delay: <?php echo $secondsset; ?>; animation-name: fadeInUp;">

                     <div class="team-one__single">

                        <div class="team-one__img-box">

                           <div class="team-one__img">

                              <img src="<?php echo $image[0]; ?>" alt="">

                           </div>

                           <div class="team-one__share-btn">

                              <a href="<?php echo $permalink; ?>"><i class="fa fa-share-alt"></i></a>

                           </div>

                           <ul class="list-unstyled team-one__social">

                              <li><a href="<?php echo $fblink; ?>"><i class="fab fa-facebook"></i></a></li>

                              <li><a href="<?php echo $instalink; ?>"><i class="fab fa-twitter"></i></a></li>

                              <li><a href="<?php echo $twitterlink; ?>"><i class="fab fa-pinterest-p"></i></a></li>

                              <li><a href="<?php echo $pinrestlink; ?>"><i class="fab fa-instagram"></i></a></li>

                           </ul>

                        </div>

                        <div class="team-one__content">

                           <p class="team-one__sub-title">Consultants</p>

                           <h3 class="team-one__title"><a href="<?php echo $permalink; ?>"><?php echo $title; ?></a></h3>

                           <div class="team-one__arrow-box">

                              <a href="<?php echo $permalink; ?>" class="team-one__arrow"><i class="fa fa-angle-right"></i></a>

                           </div>

                        </div>

                     </div>

                  </div>

                  <!--Team One Single End-->

               <?php }

                  echo '</div>';

               } 

               // Reset Post Data

               wp_reset_postdata();

               ?>

Create theme option with acf in wordpress theme

Hello All.

Today I want to show you how to create theme option pages with acf. Its very easy to create and use it. It saves your time. 

Open your active theme's functions.php file and put this code:

//acf option page
if( function_exists('acf_add_options_page') ) {
    acf_add_options_page(array(
        'page_title'    => 'Theme General Settings',
        'menu_title'    => 'Theme Settings',
        'menu_slug'     => 'theme-general-settings',
        'capability'    => 'edit_posts',
        'redirect'      => false
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Theme Header Settings',
        'menu_title'    => 'Header',
        'parent_slug'   => 'theme-general-settings',
    ));
    acf_add_options_sub_page(array(
        'page_title'    => 'Theme Footer Settings',
        'menu_title'    => 'Footer',
        'parent_slug'   => 'theme-general-settings',
    ));
    acf_add_options_sub_page(array(
        'page_title'    => 'Single Page Sidebar Settings',
        'menu_title'    => 'Single Page Sidebar',
        'parent_slug'   => 'theme-general-settings',
    ));
}
//end option page

It will create like this look in your wordpress

Now go to Custom FIelds -> Field Groups

Create new field group and set it location by set rules. Means where to display this page. 

Go to Location section, click on first field and select "Option Page"

Select "is equal to"

Select "Theme Header Setting"

Here I set theme header. I want to set header data like logo, contact number, and other header details.

If you want to use it in your theme, you can use it anywhere. But you can not use in header.php and footer.php file directly. You have to include it first like this.

<?php get_header(); ?>

In header.php file, put this above line in top. After this code, you can start html code but this get_header() is must put.

If you want to use custom option page data in anywhere, you can use like this: 

<?php 
if ( get_field('logo','option') ) {
   $logo = get_field('logo','option');
} else {
   $logo = get_template_directory_uri().'/assets/logo-1.png';
}
?>
<?php if ( get_field('updates_text','option') ) { ?>
              <p><?php the_field('updates_text','option') ?></p>
<?php } ?>

Inshort "option" is must include in get_field or the_field function.

If you want to use any acf fields in particular template, use like this:-

 <?php if ( get_field('treck_offices') ) { ?>
                 <h3><?php  the_field('treck_offices'); ?></h3>
<?php } ?>

For repeater field use this code:-

<?php if (have_rows('benifit_list')) { ?> 
    <ul class="coaching-details__benefit-points list-unstyled">
       <?php while(have_rows('benifit_list')) : the_row(); ?>
           <li>
                 <div class="icon">
                         span class="icon-check"></span>
                 </div>
                <div class="text">
                   <p><?php the_sub_field('coaching_benifit_list'); ?></p>
                </div>
              </li>
        <?php endwhile; ?> 
     </ul>
<?php } ?>

Modify comment section and create new in wordpress

 Hello

Here I explain how to modify comment section.

it look like this : 

And code is here.

functions.php

if ( is_single() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}
add_filter( 'comment_form_fields', 'custom_comment_field' );
function custom_comment_field( $fields ) {
    // What fields you want to control.
    $comment_field = $fields['author'];
    $comment_field = $fields['email'];
    $comment_field = $fields['comment'];
    $comment_field = $fields['cookies'];
    // The fields you want to unset (remove).
    unset($fields['author']);
    unset($fields['email']);
    unset($fields['url']);
    unset($fields['comment']);
    unset($fields['cookies']);
    // Display the fields to your own taste.
    // The order in which you place them will determine in what order they are displayed.
    $fields['author'] = '<div class="row"><div class="col-xl-6"><div class="comment-form__input-box"><input type="text" id="author" name="author" require="required" placeholder="Your Name" ></div></div> ';
    $fields['email'] = '<div class="col-xl-6"><div class="comment-form__input-box"><input type="text" id="email" name="email" require="required" placeholder="Your Email"></div></div></div>';
    $fields['comment'] = '<div class="row">
            <div class="col-xl-12"><div class="comment-form__input-box text-message-box"><textarea id="comment" name="comment" required="required" placeholder="Your Comment"></textarea></div></div></div>';
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"><label for="wp-comment-cookies-consent"> Save details for future comments?</label></p>';
    return $fields;
}

comments.php:

<div class="comment-one">

<?php if ( have_comments() ) : ?>

<h2 class="comments-title"></h2>

<div class="main_comment">

<?php

//$comments_number = get_comments_number();

// Get all comments for the post

$comments = get_comments(array(

    'post_id' => $post->ID,

    'status' => 'approve', // Only get approved comments

    'parent' => 0, // Only get top-level comments (i.e. not replies to other comments)

    'order' => 'ASC' // Order comments by oldest to newest

));

foreach($comments as $comment) {

        //echo "<pre>";print_r($comment);

$comment_author =  $comment->comment_author;

$comment_content = $comment->comment_content;

$author_img = get_template_directory_uri().'/assets/comment-1-1.jpg';

$comment_ID = $comment->comment_ID;

$replylink = get_permalink(get_the_ID()).'?replytocom='.$comment_ID.'#respond';

echo '<div class="comment-one__single">

<div class="comment-one__image">

<img src="'.$author_img.'" alt="">

</div>

<div class="comment-one__content">

<h3>'.$comment_author.'</h3>

<p>'.$comment_content.'</p>

<a href="'.$replylink.'" class="thm-btn comment-one__btn" data-commentid="" data-postid="">Reply</a>

</div>

</div>';

// Get the replies for the comment

    $replies = get_comments(array(

        'post_id' => $post->ID,

        'status' => 'approve', // Only get approved comments

        'parent' => $comment->comment_ID, // Only get comments that are replies to this comment

        'order' => 'ASC' // Order replies by oldest to newest

    ));

    foreach ($replies as $reply) {

    $reply_ID = $reply->comment_ID;

$replylink1 = get_permalink(get_the_ID()).'?replytocom='.$reply_ID.'#respond';

    echo '<div class="comment-one__single sub_reply_class">

<div class="comment-one__image">

<img src="'.$author_img.'" alt="">

</div>

<div class="comment-one__content">

<h3>'.$reply->comment_author.'</h3>

<p>'.$reply->comment_content.'</p>

<a href="'.$replylink1.'" class="thm-btn comment-one__btn">Reply</a>

</div>

</div>';

    }

    }

?>

</div>

<?php //the_comments_navigation(); ?>

<?php endif; // Check for have_comments(). ?>

<?php

comment_form(

        array(

            'logged_in_as'       => null,

            'title_reply'        => esc_html__( 'Leave a comment', 'immigration' ),

            'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title chi">',

            'title_reply_after'  => '</h2>',

        )

    );

?>

</div><!-- .comments-area -->

Create custom post type with some extra custom fields and display it to frontend side without plugin in wordpress

 Hello 

Today I want to explain How to create custom post type and its custom fields and displayed it to frontend without any plugin. You have to do it in your theme's functions.php file.

Above is from backend. Now in frontend, it look like this:-

Now its code

functions.php

//custom post type for Consultant details
function consultatns_custom() {
  
// Set UI labels for Custom Post Type
    $labels = array(
        'name'                => _x( 'Consultant', 'Post Type General Name', 'immigration' ),
        'singular_name'       => _x( 'consultant', 'Post Type Singular Name', 'immigration' ),
        'menu_name'           => __( 'Consultant', 'immigration' ),
        'parent_item_colon'   => __( 'Parent Consultant', 'immigration' ),
        'all_items'           => __( 'All Consultants', 'immigration' ),
        'view_item'           => __( 'View consultant', 'immigration' ),
        'add_new_item'        => __( 'Add New consultant', 'immigration' ),
        'add_new'             => __( 'Add New', 'immigration' ),
        'edit_item'           => __( 'Edit consultant', 'immigration' ),
        'update_item'         => __( 'Update consultant', 'immigration' ),
        'search_items'        => __( 'Search consultant', 'immigration' ),
        'not_found'           => __( 'Not Found', 'immigration' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'immigration' ),
    );
      
// Set other options for Custom Post Type
      
    $args = array(
        'label'               => __( 'consultant', 'immigration' ),
        'description'         => __( 'All Consultant data', 'immigration' ),
        'labels'              => $labels,
        // Features this CPT supports in Post Editor
        'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields' ),
        // You can associate this CPT with a taxonomy or custom taxonomy. 
        //'taxonomies'          => array( 'genres' ),
        /* A hierarchical CPT is like Pages and can have
        * Parent and child items. A non-hierarchical CPT
        * is like Posts.
        */
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'post',
        'show_in_rest' => true,
        
        'taxonomies'          => array( 'category' ),
    );
      
    // Registering your Custom Post Type
    register_post_type( 'consultant', $args );
  
}
  
/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/
  
add_action( 'init', 'consultatns_custom', 5 );
//code for custom fields or meta box
//new metabox for consultant type
function wporg_add_custom_box() {
    $screens = [ 'consultant', 'wporg_cpt' ];
    foreach ( $screens as $screen ) {
        add_meta_box(
            'wporg_box_id',                 // Unique ID
            'Social Media Links Here',      // Box title
            'wporg_custom_box_html',  // Content callback, must be of type callable
            $screen                            // Post type
        );
    }
}
add_action( 'add_meta_boxes', 'wporg_add_custom_box' );
function wporg_custom_box_html( $post ) {
    $fblink = get_post_meta( $post->ID, 'metakey_facebook', true );
    $instalink = get_post_meta( $post->ID, 'metakey_insta', true );
    $twitterlink = get_post_meta( $post->ID, 'metakey_twitter', true );
    $pinrestlink = get_post_meta( $post->ID, 'metakey_pinrest', true );
    ?>
    <p> <label for="facebooklink">Facebook</label>
    <input type="text" name="facebooklink" id="facebooklink" value="<?php echo $fblink; ?>"></p>
    <p><label for="instalink">Instagram</label>
    <input type="text" name="instalink" id="instalink" value="<?php echo $instalink; ?>"></p>
    <p> <label for="twitterlink">Twitter</label>
    <input type="text" name="twitterlink" id="twitterlink" value="<?php echo $twitterlink; ?>"></p>
    <p><label for="pinrestlink">Pinrest</label>
    <input type="text" name="pinrestlink" id="pinrestlink" value="<?php echo $pinrestlink; ?>"></p>
    <?php
}
function wporg_save_postdata( $post_id ) {
    if ( array_key_exists( 'facebooklink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_facebook',
            $_POST['facebooklink']
        );
    }
    if ( array_key_exists( 'instalink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_insta',
            $_POST['instalink']
        );
    }
    if ( array_key_exists( 'twitterlink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_twitter',
            $_POST['twitterlink']
        );
    }
    if ( array_key_exists( 'pinrestlink', $_POST ) ) {
        update_post_meta(
            $post_id,
            'metakey_pinrest',
            $_POST['pinrestlink']
        );
    }
}
add_action( 'save_post', 'wporg_save_postdata' );
//end consultant code

Frontend Code:-

frontend.php

 <?php 
                  $args = array(
                   'post_type' => 'consultant',
                   'posts_per_page' => 4,
                   'post_status' => 'publish',
                   'orderby' => 'date',
                   'order' => 'DESC',
               );
               $query = new WP_Query( $args );
               if ( $query->have_posts() ) {
                  echo '<div class="row">';
                  $secondsdelay = 0;
                  while ( $query->have_posts() ) {
                     $secondsdelay = $secondsdelay + 100;
                     $secondsset = $secondsdelay.'ms';
                    $data = $query->the_post();
                    $post_thumbnail_id = get_post_thumbnail_id( $data );
                    $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
                    
                    $title = get_the_title();
                    $permalink = get_the_permalink();
                    $excerpt = get_the_excerpt();
                    $content = get_the_content();
                    //get custom fields data
                    //$custom = get_post_custom( get_the_ID() );
                    $fblink = get_post_meta(get_the_ID(),'metakey_facebook',true);
                    $instalink = get_post_meta(get_the_ID(),'metakey_insta',true);
                    $twitterlink = get_post_meta(get_the_ID(),'metakey_twitter',true);
                    $pinrestlink = get_post_meta(get_the_ID(),'metakey_pinrest',true);
               ?>
                  <!--Team One Single Start-->
                  <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp animated" data-wow-delay="<?php echo $secondsset; ?>" style="visibility: visible; animation-delay: <?php echo $secondsset; ?>; animation-name: fadeInUp;">
                     <div class="team-one__single">
                        <div class="team-one__img-box">
                           <div class="team-one__img">
                              <img src="<?php echo $image[0]; ?>" alt="">
                           </div>
                           <div class="team-one__share-btn">
                              <a href="<?php echo $permalink; ?>"><i class="fa fa-share-alt"></i></a>
                           </div>
                           <ul class="list-unstyled team-one__social">
                              <li><a href="<?php echo $fblink; ?>"><i class="fab fa-facebook"></i></a></li>
                              <li><a href="<?php echo $instalink; ?>"><i class="fab fa-twitter"></i></a></li>
                              <li><a href="<?php echo $twitterlink; ?>"><i class="fab fa-pinterest-p"></i></a></li>
                              <li><a href="<?php echo $pinrestlink; ?>"><i class="fab fa-instagram"></i></a></li>
                           </ul>
                        </div>
                        <div class="team-one__content">
                           <p class="team-one__sub-title">Consultants</p>
                           <h3 class="team-one__title"><a href="<?php echo $permalink; ?>"><?php echo $title; ?></a></h3>
                           <div class="team-one__arrow-box">
                              <a href="<?php echo $permalink; ?>" class="team-one__arrow"><i class="fa fa-angle-right"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--Team One Single End-->
               <?php }
                  echo '</div>';
               } 
               // Reset Post Data
               wp_reset_postdata();
               ?>