Wednesday, May 3, 2023

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();
               ?>

No comments:

Post a Comment